我正在创建一个chrome扩展名，第一步是创建一个网站上列出的表格中的大学教授姓名数组。这是JS，它可以在主页上完美运行。但是，当我继续学习列出特定教授姓名的课程时，大部分时间都无效。仍然会一直抓住主页上的教授，因为它们都在同一文档中。每当我不断刷新页面时，它都会随机抓住所有教授，但大多数时候不会。所以看起来我的选择器正在工作，但为什么每次都不工作？
var tableElementNode = document.querySelectorAll(".section-detail-grid.table-bordered-wrap>tbody>tr>td>div");
console.log(tableElementNode);
这是主网页上的html的代码段（在所有其他课程页面上都是相同的）。上面的JS代码抓住了教授“布尔戈斯”，并将其列出到日志中。
<table class="section-detail-grid table-bordered-wrap">
<thead>
<tr>
<th class="persist chk-col">
<input type="checkbox" checked="" class="select-all">
</th>
<th class="persist hidden-print info-col"></th>
<th>CRN #</th>
<th>Status</th>
<th class="persist">Subject</th>
<th>Course</th>
<th class="persist">Section</th>
<th>Instructor</th>
<th>Day(s) & Location(s)</th>
<th>Credits</th>
<th>USF System Institution </th>
</tr>
</thead>
<tbody>
<tr data-id="88047" data-index="0" class="section-item section first">
<td class="persist chk-col">
<input type="checkbox" class="select" checked="">
</td>
<td class="persist col-icons hidden-print">
<button role="button" class="btn btn-icon btn-section-details persist" data-toggle="tooltip" title="" data-original-title="Show Section Details"><i class="glyphicons circle_info"></i> </button>
</td>
<td class="">
88047
</td>
<td class="">
Enrolled
</td>
<td class="persist">
MAC
</td>
<td class="">
2283
</td>
<td class="persist">
003
</td>
<td class="">
<div class="professor" id="0">Burgos, Fernando</div>
</td>
这是某个课程网页上的html的摘录，并且JS代码似乎没有在这里抓住教授的名字（Wang，Jing）。
<table class="section-detail-grid table-bordered-wrap">
<thead>
<tr>
<th class="persist chk-col">
<input type="checkbox" class="select-all">
</th>
<th class="persist info-col"></th>
<th>CRN #</th>
<th class="persist">Subject</th>
<th>Course</th>
<th class="persist">Section</th>
<th class="persist">Component</th>
<th>Instructor</th>
<th>Day(s) & Location(s)</th>
<th>Credits</th>
<th>USF System Institution </th>
<th>Parts of Term</th>
</tr>
</thead>
<tbody>
<tr data-id="80886" data-index="0" class="section-item section first linked-section">
<td class="persist chk-col row-label">
<input type="checkbox" class="select " data-sectionid="80886" checked="">
</td>
<td class="persist col-icons">
<ul>
<li class="persist">
<button role="button" class="btn btn-icon btn-section-details persist" data-toggle="tooltip" title="" data-original-title="Show Section Details"><i class="glyphicons circle_info"></i> <span class="visible-acc">Section Details</span></button>
</li>
</ul>
</td>
<td class=" row-label">
80886
</td>
<td class="persist row-label">
COP
</td>
<td class=" row-label">
3514
</td>
<td class="persist row-label">
001
</td>
<td class="persist row-label">
Class Lecture
</td>
<td class=" row-label">
<div>Wang, Jing</div>
</td>
<td class=" row-label">
<div> <span aria-label="Monday">M</span><span aria-label="Wednesday">W</span> 9:30am - 10:45am - CHE 103</div>
</td>
<td class=" row-label">
3
</td>
<td class=" row-label">
Tampa
</td>
<td class=" row-label">
Fall 2018 - Full Term
</td>
</tr>
<tr class="section-flags">
我几乎到处都在寻找解决方案，却找不到任何东西。
编辑：我什至右键单击并在我需要的元素上复制了选择器，JS仍然无法抓住找到的元素
答案 0 :(得分：0)
您需要执行array[...].outerText才能在div中获取内容。
var tableElementNode = document.querySelectorAll(".section-detail-grid tbody div")[0].outerText;
console.log(tableElementNode);<table class="section-detail-grid table-bordered-wrap">
<thead>
<tr>
<th class="persist chk-col">
<input type="checkbox" class="select-all">
</th>
<th class="persist info-col"></th>
<th>CRN #</th>
<th class="persist">Subject</th>
<th>Course</th>
<th class="persist">Section</th>
<th class="persist">Component</th>
<th>Instructor</th>
<th>Day(s) & Location(s)</th>
<th>Credits</th>
<th>USF System Institution </th>
<th>Parts of Term</th>
</tr>
</thead>
<tbody>
<tr data-id="80886" data-index="0" class="section-item section first linked-section">
<td class="persist chk-col row-label">
<input type="checkbox" class="select " data-sectionid="80886" checked="">
</td>
<td class="persist col-icons">
<ul>
<li class="persist">
<button role="button" class="btn btn-icon btn-section-details persist" data-toggle="tooltip" title="" data-original-title="Show Section Details"><i class="glyphicons circle_info"></i> <span class="visible-acc">Section Details</span></button>
</li>
</ul>
</td>
<td class=" row-label">
80886
</td>
<td class="persist row-label">
COP
</td>
<td class=" row-label">
3514
</td>
<td class="persist row-label">
001
</td>
<td class="persist row-label">
Class Lecture
</td>
<td class=" row-label">
<div>Wang, Jing</div>
</td>
<td class=" row-label">
<div> <span aria-label="Monday">M</span><span aria-label="Wednesday">W</span> 9:30am - 10:45am - CHE 103</div>
</td>
<td class=" row-label">
3
</td>
<td class=" row-label">
Tampa
</td>
<td class=" row-label">
Fall 2018 - Full Term
</td>
</tr>
</tbody>
</table>