瞭解NodeList、HTMLCollection以及NamedNodeMap的使用
阿新 • • 發佈：2018-11-02
- 這三個都是類陣列物件。
- HTMLCollection只包含元素節點，而NodeList包含任何節點型別。
- HTMLCollection物件可以呼叫item()和namedItem()方法，NodeList物件只能呼叫item()方法。在獲取元素時，兩者都可以通過方括號的語法或item()方法。HTMLCollection物件允許通過namedItem()方法，傳入一個name或id獲取元素。
- 一些舊版本瀏覽器中的方法（如：getElementsByClassName()）返回的是 NodeList 物件，而不是 HTMLCollection 物件。所有瀏覽器的 childNodes 屬性返回的是 NodeList 物件。大部分瀏覽器的 querySelectorAll() 返回 NodeList 物件。getElementsByTagName()返回HTMLCollection物件。
- NamedNodeMap物件是通過node.attributes屬性獲取，獲取到由該元素的所有屬性構成的偽陣列物件。
例：
<body> <div> <a href="#" id="a1">1</a> <a href="a.html" name="a2">2</a> </div> </body> <script> // 獲取一個HTMLCollection物件 var res = document.getElementsByTagName("a"); console.log(res); console.log(res.item(0)) console.log(res[0]) console.log(res.namedItem('a1')) console.log(res.namedItem('a2')) // 結果如下圖所示： </script>
