JavaScript HTML DOM 節點列表
JavaScript HTML DOM 節點列表
NodeList 物件是一個從文件中獲取的節點列表 (集合) 。
NodeList 物件類似 HTMLCollection 物件。
一些舊版本瀏覽器中的方法(如:getElementsByClassName())返回的是 NodeList 物件,而不是 HTMLCollection 物件。
所有瀏覽器的 childNodes 屬性返回的是 NodeList 物件。
大部分瀏覽器的 querySelectorAll() 返回 NodeList 物件。
以下程式碼選取了文件中所有的 <p> 節點:
例項
NodeList 中的元素可以通過索引(以 0 為起始位置)來訪問。
訪問第二個 <p> 元素可以是以下程式碼:
NodeList 物件 length 屬性
NodeList 物件 length 屬性定義了節點列表中元素的數量。
例項
例項解析
獲取 <p> 元素的集合:
var myNodelist = document.querySelectorAll("p");
顯示節點列表的元素個數:
document.getElementById("demo").innerHTML = myNodelist.length;
length 屬性常用於遍歷節點列表。
例項
修改節點列表中所有 <p> 元素的背景顏色:
HTMLCollection 與 NodeList 的區別
HTMLCollection 是 HTML 元素的集合。
NodeList 是一個文件節點的集合。
NodeList 與 HTMLCollection 有很多類似的地方。
NodeList 與 HTMLCollection 都與陣列物件有點類似,可以使用索引 (0, 1, 2, 3, 4, ...) 來獲取元素。
NodeList 與 HTMLCollection 都有 length 屬性。
HTMLCollection 元素可以通過 name,id 或索引來獲取。
NodeList 只能通過索引來獲取。
只有 NodeList 物件有包含屬性節點和文字節點。
節點列表不是一個數組!
節點列表看起來可能是一個數組,但其實不是。
你可以像陣列一樣,使用索引來獲取元素。
節點列表無法使用陣列的方法: valueOf(), pop(), push(), 或 join() 。