�ݺ�ߣ

jQuery
Javascript CSS selector
2017/06/01 LT

<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%

<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
��

<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

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);

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

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>

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/

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

Selectors API
Element.querySelectorAll(DOMString?selectors);
�� CSS selectors
https://www.w3.org/TR/css3?selectors/

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>

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]

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

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

�ݺ�ߣ

Query selecter��Ԓ

More Related Content

Query selecter��Ԓ