🔰querying elements

JS ⟩ browser ⟩ DOM ⟩ selecting elements

📘 手冊

• NodeList

• Element ⟩

  • .closest() - 往上選。

  • .querySelector() - 往下選。

  • .querySelectorAll() - returns NodeList.

  • .matches() - 只跟自己比較，不往上選，也不往下選。

• Document ⟩

  • .querySelector()

  • .querySelectorAll()

• DocumentFragment ⟩

  • .querySelector()

  • .querySelectorAll()

🔴 主題

• using components - do not query web components too early.

• $(), $all()

• elem.isInside()

• elem.isHeading

⭐️ 重點

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

• querySelector() , querySelectorAll() return a static NodeList.

• Node.childNodes is a live NodeList.

NodeList objects

• have a length property, can be indexed like arrays.

• can loop with traditional for( ; ; )for-offorEach()

• can convert into array with Array.from().

Some older browsers have not implemented NodeList.forEach() nor Array.from(). This can be circumvented by using Array.prototype.forEach() 👉 💈範例

• ::first-line and ::first-letter pseudo-elements match portions of text nodes rather than actual elements, they will not match if used with querySelectorAll() or querySelector().

• many browsers will refuse to return matches for the :link and :visited pseudo-classes.

💈範例

// ⭐️ traditional for-loop
for (let i = 0; i < nodeList.length; i++) {
  let node = nodeList[i];
}

// ⭐️ for-of loop
const list = document.querySelectorAll('input[type=checkbox]');

for (let checkbox of list) {
  checkbox.checked = true;
}

// ⭐️ for browsers which don't support NodeList.forEach()
Array.prototype.forEach.call(list, (checkbox) => {
  checkbox.checked = true;
});

📗 參考

• JavaScript The Definitive Guide (15.3 Scripting Document)

👥 相關

• Element

• selectors

• pseudo-class

• pseudo-element

• NodeList vs. Array