Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Query selecterの話

Query selecterの話

ckazu

June 01, 2017
Tweet

More Decks by ckazu

Other Decks in Programming

Transcript

  1. 5

  2. <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%
  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% chrome console ↑
  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>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
  5. 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);
  6. 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>
  7. 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/
  8. 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); };
  9. 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>
  10. 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]