querySelectorAll 和 getElementsBy* 方法回傳什麼？

Question

getElementsByClassName（以及getElementsByTagName 和querySelectorAll 等類似函數）與querySelectorAll方式相同嗎？回傳一個元素數組？

我問的原因是因為我試著用getElementsByClassName更改所有元素的樣式。見下文。

//doesn't work
document.getElementsByClassName('myElement').style.size = '100px';

//works
document.getElementById('myIdElement').style.size = '100px';

Answer 1

您使用陣列作為對象，getElementbyId 和 getElementsByClassName 是：

• getElementbyId 將傳回一個 Element 物件< /a> 如果沒有找到具有該 ID 的元素，則傳回 null
• getElementsByClassName 將傳回即時 HTMLCollection< /a>，如果沒有找到符合元素，長度可能為 0

getElementsByClassName

https://www.w3.org/ TR/2008/WD-html5-20080610/dom.html#getelementsbyclassname

取得ElementById

https://developer.mozilla.org/en- US/docs/Web/API/Document/getElementById

在您的程式碼中包含以下行：

將不按預期工作，因為getElementByClassName將傳回一個數組，並且該數組不具有樣式< /code> 屬性，您可以透過迭代來存取每個元素。

這就是函數 getElementById 為您工作的原因，該函數將傳回直接物件。因此，您將能夠存取 style 屬性。

Answer 2

您的getElementById 程式碼之所以有效，是因為ID 必須是唯一的，因此該函數總是只傳回一個元素（如果沒有找到，則傳回null ）。

但是，這些方法 getElementsByClassName, getElementsByName, getItemByTagName，以及 getElementsByTagNameNS 傳回一個可迭代的元素集合。

方法名稱提供了提示：getElement 暗示單數，而getElements 暗示複數。

方法querySelector 也傳回單一元素，並且 querySelectorAll 傳回一個可迭代的集合。

可迭代集合可以是 NodeList 或 HTMLCollection一個>.

getElementsByName和querySelectorAll 都指定傳回節點清單;其他getElementsBy * 方法 指定傳回< code>HTMLCollection，但請注意，某些瀏覽器版本的實作方式有所不同。

這兩種集合類型不提供與元素、節點或類似類型相同的屬性；這就是為什麼從document.getElements…(…)讀取style 失敗的原因。 換句話說：NodeList 或 HTMLCollection 沒有 style；只有 Element 具有 style。

---

這些「類似數組」的集合是包含零個或多個元素的列表，您需要對其進行迭代才能存取它們。 雖然您可以像數組一樣迭代它們，但請注意，它們與不同 “https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference /Global_Objects/Array”rel="noreferrer">陣列s。

在現代瀏覽器中，您可以使用Array.from;那麼您可以使用forEach 和其他陣列方法，例如迭代方法：

Array.from(document.getElementsByClassName("myElement"))
  .forEach((element) => element.style.size = "100px");

在不支援 Array.from 或迭代方法的舊瀏覽器中，您仍然可以使用Array.prototype.slice.call。 然後你可以像使用真正的數組一樣迭代它：

var elements = Array.prototype.slice
    .call(document.getElementsByClassName("myElement"));

for(var i = 0; i < elements.length; ++i){
  elements[i].style.size = "100px";
}

您也可以迭代NodeList 或HTMLCollection 本身，但請注意，在大多數情況下，這些集合是即時的（MDN文件，DOM 規格)，即它們隨著DOM 的變化而更新。 因此，如果您在循環時插入或刪除元素，請確保不會意外跳過某些元素或建立無限循環。 MDN 文件應始終註明方法傳回即時集合還是靜態集合。

例如，NodeList 提供了一些迭代方法，例如現代瀏覽器中的 forEach：

document.querySelectorAll(".myElement")
  .forEach((element) => element.style.size = "100px");

也可以使用簡單的 for 迴圈：

var elements = document.getElementsByClassName("myElement");

for(var i = 0; i < elements.length; ++i){
  elements[i].style.size = "100px";
}

旁白：.childNodes< /a> 產生一個live NodeList 和.children產生一個live HTMLCollection，因此這兩個getter 也需要小心處理。

---

有一些函式庫，例如jQuery，它們使 DOM 查詢變得更短，並在「一個元素」上建立一個抽象層和「元素的集合」：

$(".myElement").css("size", "100px");