iT邦幫忙

2021 iThome 鐵人賽

DAY 20
0
自我挑戰組

JavaScript老學徒筆記—馬步篇系列 第 21

【Day20】比較Nodelist與HTML collection的差異

前面提到透過DOM API取得網頁節點的方法:

//根據傳入的id 名稱,找到DOM裡面相同id名稱的節點。
document.getElementById('idName');

//根據傳入的tag名稱,回傳所有符合條件的NodeList物件。
document.getElementsByTagName('tagName');

//根據傳入的class名稱,回傳所有符合條件的NodeList物件。
document.getElementsByClassName('className')

//根據所設定的selector條件(class或id都可以),回傳第一個符合條件的節點。
document.querySelector('selector');

//根據所給定的selector條件,回傳所有符合條件的 NodeList。
document.querySelectorAll;

由以上方法所回傳的可能會有以下三種節點:

  • HTML元素節點(element nodes)
  • 文字節點(text node),包含空白
  • 註解節點(comment node)

getElementById與querySelector都是取得單一元素或節點,沒有 index 及 length 屬性。

DOM提供2種節點集合,用於容納多個節點:

  • HTML collection:由「document.getElementsByTagName()」及「document.getElementsByClassName」查詢後回傳,HTML Collection只收集HTML 元素節點,這個集合不是陣列,不能使用陣列型別所提供的方法,但是有陣列索引(index)及length屬性可以使用,是一個有序的動態集合。
  • NodeList:由「document.querySelectorAll()」查詢後回傳,除了HTML節點外,也包括文字節點、屬性節點,這個集合同樣不是陣列,不能使用陣列所提供的方法,但是有陣列索引(index)及length屬性可以使用。

HTML Collection是一個動態的集合,節點的變動會及時反應在集合中。

<div id="sword">
  <ul id="fiveHero">
    <li id="firstHero">1 東邪</li>
    <li id="secondHero">2 西毒</li>
    <li id="thirdHero">3 南帝</li>
    <li id="fifthHero">4 北丐</li>
    <li id="lastHero">5 中神通</li>
  </ul>
</div>
var outside = document.getElementById('fiveHero');
var collection = document.getElementsByTagName('li');
console.log(collection.length);  //5  得出5個HTML元素節點
console.log(collection[1].textContent);  //"2 西毒"
//清空<ul id="fiveHero">下面的節點
outside.innerHTML = '';
console.log(collection.length);  //0 即時更新為0個元素節點

本來抓取到的HTML collection集合中有5個元素,但是我們用outside.innerHTML =''清空之後,再console.log(collection.length)一次,已經即時更新為0個了。

NodeList大部分都是即時更新的,由childNodes屬性返回的NodeList物件是一個動態的集合,但是透過document.querySelectorAll() 及 document.querySelector()取得的NodeList是靜態的集合。

<div id="sword">
  <ul id="fiveHero">
    <li id="firstHero">1 東邪</li>
    <li id="secondHero">2 西毒</li>
    <li id="thirdHero">3 南帝</li>
    <li id="fifthHero">4 北丐</li>
    <li id="lastHero">5 中神通</li>
  </ul>
</div>
var outside = document.querySelector('ul');
var list = document.querySelectorAll('li');  //抓取所有<li>元素節點
console.log(list.length);          //5
console.log(list[2].textContent);  //"3 南帝"
//清空<ul id="fiveHero">下面的節點
outside.innerHTML = '';
console.log(list.length);          //5   沒有即時更新狀態

「outside.innerHTML = ''」清空了底下的元素,但是console.log(list.length)仍然為5,沒有更新為0,所以document.querySelector()回傳的是一個靜態的集合。

But 人生最厲害的就是那個but!由childNodes屬性返回的NodeList物件是一個動態的集合,可以即時更新集合的狀態。

<div id="sword">
  <ul id="fiveHero">
    <li id="firstHero">1 東邪</li>
    <li id="secondHero">2 西毒</li>
    <li id="thirdHero">3 南帝</li>
    <li id="fifthHero">4 北丐</li>
    <li id="lastHero">5 中神通</li>
  </ul>
</div>
var outside = document.querySelector('ul');
console.log(outside.childNodes.length);   //5
console.log(outside.childNodes);
// [object NodeList] (11)
//["#text","<li/>","#text","<li/>","#text","<li/>","#text","<li/>","#text","<li/>","#text"]
outside.innerHTML = '';
console.log(outside.childNodes.length);  //0

我們抓取了,存在變數outside裡面,利用coconsole.log()查詢它childNodes的長度,然後清空了outside裡面的內容,再查詢一次childNodes.length,果然即時更新變成0了。

HTML collection還有一個nameItem()方法,可以返回集合中name屬性和id屬性值的元素。

<div id="sword">
  <ul id="fiveHero">
    <li id="firstHero">1 東邪</li>
    <li id="secondHero" name="1">2 西毒</li>
    <li id="thirdHero">3 南帝</li>
    <li id="fifthHero">4 北丐</li>
    <li id="lastHero">5 中神通</li>
  </ul>
</div>
var one = document.getElementsByTagName('li').namedItem('firstHero');
var two = document.getElementsByTagName('li').namedItem('2');
console.log(one);     //<li id="firstHero">1 東邪</li>
console.log(two);     //<li id="secondHero" name="2">2 西毒</li>

上一篇
文件物件模型--DOM
下一篇
【Day21】給我一個節點,我可以把網頁改頭換面
系列文
JavaScript老學徒筆記—馬步篇35

尚未有邦友留言

立即登入留言