2017/06/01 aiming 基盤チーム LT

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