🔰selectors

CSS ⟩ CSS Rules ⟩ selectors

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 */

span.fatal.error         /* <span class="fatal error"> */
span[lang="fr"].warning  /* <span lang="fr" class="warning"> */

The return value of querySelectorAll() is not an array of Element objects. Instead, it is an iterable array-like object known as a NodeList.

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 .

Previouscalc()Nextselect direct children by JS

Last updated 8 months ago

Was this helpful?