Last updated 4 months ago
Was this helpful?
โฉ โฉ selectors
basic selectors
attribute selectors
combinators
pseudo-class
pseudo-element
custom selectors
select direct children by JS
(CSS Tricks)
JavaScript: The Definitive Guide (15.3 Scripting Documents)
DOM โฉ querying elements
div /* tag name selector: <div> */ #nav /* id selector : id="nav" */ .warning /* class selector : class="warning" */
/* attribute selector */ p[lang="fr"] /* <p lang="fr"> */ *[name="x"] /* any element with name="x" */
body > h1:first-child /* first <h1> direct child of <body> */
/* ------------ ่ฆชๅญ้ไฟ ------------ */ /* ไธไธๅฎๆฏ็ดๆฅ็่ฆชๅญ้ไฟ */ ancestor descendant /* op: space */ /* ็ดๆฅๅญๅ ็ด */ parent > direct-child /* ็ดๆฅๅญๅ ็ด ๏ผไฝไธๆฏ็ฌฌไธๅ(ไปฅไธๅฏซๆณๆๆ้ฝไธๆจฃ) */ parent > direct-child + next-siblling /* immediate sibling */ parent > :not(:first-child) parent > :nth-child(n+2) /* n = 0, 1, 2 ... */ /* ๆฒๆๅญๅ ็ด ็ๅ ็ด (ๆๅบๅฑค) */ :not(:has(*)) /* :has() ็บ CSS4 ๅ่ฝ */ /* ------------ ๅ ๅผ้ไฟ ------------ */ /* (็ท้ฐ่็)ไธไธๅๅ ๅผ(next sibling) */ brother + next-younger-brother /* ๅพ้ข็ๅ ๅผ(following sibling) */ older ~ younger /* ไธๅฟ ไธๅฎ่ฆ็ทๆฅ่็ */
span.fatal.error /* <span class="fatal error"> */ span[lang="fr"].warning /* <span lang="fr" class="warning"> */
The return value of is not an array of objects. Instead, it is an iterable array-like object known as a .
NodeList objects
have a length property, can be indexed like arrays.
can loop with traditional for( ; ; ) loop, for-of loop, forEach() method.
can convert into array with Array.from().
However, some older browsers have not implemented NodeList.forEach() nor Array.from(). This can be circumvented by using โ see this document's .
NodeList.forEach()
Array.from()
DocumentFragment.querySelectorAll()
Array.prototype.forEach()