The document contains sample code showing how to select and extract data from elements in an HTML table using different methods, including vanilla JavaScript, jQuery, XPath, and the Selectors API. It compares selecting and extracting the second cell (<td>) from each row in the table using document.querySelectorAll(), jQuery, and XPath to retrieve a NodeList containing the cells. It then logs the cells to the console for each method.

1. jQuery
Javascript CSS selector
2017/06/01 LT

2. 5

3. <table id="score">
<thead>
<tr>
<th>Test
<th>Result
<tfoot>
<tr>
<th>Average
<td>??
<tbody>
<tr>
<td>A
<td>87%
<tr>
<td>B
<td>78%
<tr>
<td>Z
<td>81%
</table>
Test Result
Average ??
A 87%
B 78%
...
...
Z 81%

4. <table id="score">
<thead>
<tr>
<th>Test
<th>Result
<tfoot>
<tr>
<th>Average
<td>??
<tbody>
<tr>
<td>A
<td>87%
<tr>
<td>B
<td>78%
<tr>
<td>Z
<td>81%
</table>
Test Result
Average ??
A 87%
B 78%
...
...
Z 81%
chrome console
↑

5. <table id="score">
<thead>
<tr>
<th>Test
<th>Result
<tfoot>
<tr>
<th>Average
<td>??
<tbody>
<tr>
<td>A
<td>87%
<tr>
<td>B
<td>78%
<tr>
<td>C
<td>81%
</table>
var table = document.getElementById("score");
var groups = table.tBodies;
var rows = null;
var cells = [];
for (var i = 0; i < groups.length; i++) {
rows = groups[i].rows;
for (var j = 0; j < rows.length; j++) {
cells.push(rows[j].cells[1]);
}
}
console.log(cells);
> (3) [td, td, td]
Pure Javascript

6. jQuery
> jQuery("#score > tbody > tr td:nth‐of‐type(2)")
>> (3) [td, td, td, prevObject: r.fn.init(1)]
> jQuery("#score > tbody > tr td:nth‐of‐type(2)").text()
>> "87%
>> 78%
>> 81%
>> "
※ #score > tbody > tr td + td OK
var _j = document.createElement('script');
_j.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.
document.body.appendChild(_j);

7. jQuery

8. XPath !!!

9. XML Path Language (XPath)
=> https://www.w3.org/TR/xpath/

10. XPath
> $x('//table/tbody/tr/td[count(preceding‐sibling::td) = 1]')
>> (3) [td, td, td]
> $x('//table/tbody/tr/td[count(preceding‐sibling::td) = 1]')[0
>> <td> 87%
>> </td>

11. CSS selector ...
jQue..

12. Selectors API by W3C
http://www.w3.org/TR/2013/REC‑selectors‑api‑20130221/
Previous Versions:
http://www.w3.org/TR/2012/PR‑selectors‑api‑20121213/
http://www.w3.org/TR/2012/WD‑selectors‑api‑20120628/
http://www.w3.org/TR/2009/CR‑selectors‑api‑20091222/
http://www.w3.org/TR/2008/WD‑selectors‑api‑20081114/
http://www.w3.org/TR/2007/WD‑selectors‑api‑20071221/
http://www.w3.org/TR/2007/WD‑selectors‑api‑20071019/
http://www.w3.org/TR/2006/WD‑selectors‑api‑20060926/
http://www.w3.org/TR/2006/WD‑selectors‑api‑20060525/

13. Selectors API
partial interface Document {
Element? querySelector(DOMString selectors);
NodeList querySelectorAll(DOMString selectors);
};
partial interface DocumentFragment {
Element? querySelector(DOMString selectors);
NodeList querySelectorAll(DOMString selectors);
};
partial interface Element {
Element? querySelector(DOMString selectors);
NodeList querySelectorAll(DOMString selectors);
};

14. Selectors API
Element.querySelectorAll(DOMString selectors);
↑ CSS selectors
https://www.w3.org/TR/css3‑selectors/

15. querySelectorAll()
> document.querySelectorAll('#score > tbody > tr td:nth‐of‐type(2)'
>> (3) [td, td, td]
> document.querySelectorAll('#score > tbody > tr td:nth‐of‐type(2)'
>> <td> 87%
>> </td>

16. querySelectorAll()
jQuery
> jQuery("#score > tbody > tr td:nth‐of‐type(2)")
>> (3) [td, td, td, prevObject: r.fn.init(1)]
> document
.querySelectorAll('#score > tbody > tr td:nth‐of‐type(2)')
>> (3) [td, td, td]

17. document.querySelectorAll('table, input:checked')

18. jQuery
1. getElementById()
2. querySelectorAll()
3. sizzle jQuery