I'm creating a chrome extension and one of my first steps is to create an array of college professor names that are in a table which is listed on a website. Here is the JS and it works perfectly on the main page. However when I go on to a course which list's specific professor names, it wont work most of the time. It will still grab the professors that are in the main page all the time because it's all in the same document. Every so often when i keep refreshing the page it randomly grabs all the professors but most of the time it will not. So it looks like my selectors are working but why does it not work every time?
var tableElementNode = document.querySelectorAll(".section-detail-grid.table-bordered-wrap>tbody>tr>td>div");
console.log(tableElementNode);Here is a snippet of the html on the main webpage (which is the same on all other course pages). The JS code above grabs the professor "Burgos" and lists it on to the log.
<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>Here is a snippet of the html on a certain course webpage and the JS code doesn't seem to grab the professor name(Wang, Jing) here.
<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">I've looked almost everywhere for a solution and cannot find anything.
Edit: I've even right clicked and copied the selector on the element I need and the JS will still not grab the find the element
