javascript - querySelectorAll 没有选择所有选定的元素

Question

我正在创建一个 chrome 扩展，我的第一步是创建一组大学教授姓名，这些姓名位于网站上列出的表格中。这是 JS，它在主页上完美运行。但是，当我继续学习列出特定教授姓名的课程时，它大部分时间都不起作用。它仍然会一直抓取主页中的教授，因为它们都在同一个文档中。每隔一段时间，当我不断刷新页面时，它会随机抓取所有教授，但大多数时候不会。所以看起来我的选择器正在工作，但为什么它不是每次都工作？

var tableElementNode = document.querySelectorAll(".section-detail-grid.table-bordered-wrap>tbody>tr>td>div");
console.log(tableElementNode);

这是主网页上的 html 片段（在所有其他课程页面上都相同）。上面的 JS 代码抓取了教授“Burgos”并将其列在日志中。

<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) &amp; 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) &amp; 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 仍然不会抓取找到该元素

标签： javascripthtmlgoogle-chrome-extension

Answer 1

您需要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) &amp; 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>