🔰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 */
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 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 Array.prototype.forEach() — see this document's Example.
Last updated