你可能没有听说过 js中的 DOM操作还有这个: HTMLCollection 和 NodeList
一文了解DOM操作中的HTMLCollection和NodeList
- ??序言
- 🎈一、基礎知識
- 1. 定義
- （1）HTMLCollection
- （2）NodeList
- 2. 屬性和方法
- （1）HTMLCollection
- （2）NodeList
- 🪁二、異同點
- 1. HTMLCollection 與 NodeList 的區(qū)別
- 2. querySelectorAll 和 getElementsByTagName 的區(qū)別
- （1）querySelectorAll
- （2）getElementsByTagName
- 📞三、結束語
- 🐣彩蛋 One More Thing
- （：參考資料
- （：番外篇
??序言
猶記得上回有一次面試的時候被問到 htmlCollection 和數(shù)組的關系。當時的我心里想的是， html 中的集合和數(shù)組的關系，那解題就是說 set 和數(shù)組的關系？
于是……面試官當下立即糾正我， htmlCollection 是單詞連在一起的，是 js 的一個內(nèi)容。當時我可能是想……找個地洞鉆……
不會的咋還是得虛心接收，查漏補缺還是比較合理。經(jīng)過一系列的資料查詢和總結之后，得出以下總結。
下面開始進入本文的講解~🙋
🎈一、基礎知識
1. 定義
（1）HTMLCollection
- HTMLCollection 表示一個包含了元素（元素順序為文檔流中的接口）的集合（通用集合），還提供了從該集合中選擇元素的屬性和方法。
- 例如使用 getElementsByTagName() 方法返回的就是一個 HTMLCollection 對象。
（2）NodeList
-
NodeList 對象是節(jié)點的集合。
-
通過以下方法，可以獲取到 NodeList 對象。主要有：①在一些舊版本瀏覽器中的方法，比如 getElementsClassName() 方法，返回的是 NodeList 對象，而不是 HTMLCollection 對象。②所有瀏覽器的 Node.childNodes 屬性返回的都是 NodeList 對象。③大部分瀏覽器的 document.querySelectorAll() 返回的是 NodeList 對象。
-
我們可以通過以下代碼進行驗證：
document.body.childNodes instanceof NodeList // true document.querySelector('body') instanceof NodeList // true or false document.getElementByClassName('body') instanceof NodeList // true or false
2. 屬性和方法
（1）HTMLCollection
HTMLCollection 對象中的屬性和方法，舉例兩個：
- item(index) —— 返回 HTMLCollection 中指定索引的元素，如果不存在則返回 null ；
- length （只讀） —— 返回 HTMLCollection 中元素的數(shù)量。
接下來用一個例子來進行闡述驗證。具體代碼如下：
document.getElementsByTagName('body') instanceof HTMLCollection // trueconst htmlCollection = document.getElementsByTagName('body') console.log(htmlCollection.item(0)) // <body>...</body> console.log(htmlCollection.length()) // 1（2）NodeList
NodeList 對象中的屬性和方法主要有以下幾種。包括：
- item() —— 返回某個元素基于文檔數(shù)的索引；
- length() —— 返回 NodeList 中的節(jié)點數(shù)量；
- NodeList.forEach() —— 該方法用于遍歷 NodeList 中的所有成員。它接收一個回調(diào)函數(shù)作為參數(shù)，每遍歷一回就要執(zhí)行這個回調(diào)函數(shù)一次，用法與數(shù)組實例的 forEach 方法是完全一致的；
- NodeList.keys()/values()/entries() —— 對于這三個方法來說，它們都會返回一個 ES6 的遍歷器對象，可以通過 for…of… 來進行循環(huán)遍歷，以便于獲取每一個成員的信息。
同時，需要注意以上三者的區(qū)別，分別如下：
- keys() —— 指的是返回鍵名的遍歷器；
- values() —— 指的是返回鍵值的遍歷器；
- entries() —— 指的是返回的遍歷器要同時包含鍵名和鍵值的信息。
我們寫點代碼來論證以上內(nèi)容。具體代碼如下：
const nodelist = document.querySelectorAll('body')console.log(nodelist.item(0)) // <body>...</body> console.log(nodelist.length) // 1 console.log(nodelist.forEach(item => console.log(item))) // <body>...</body>for(var key of nodelist.keys()) {console.log(nodelist[key]) // <body>...</body> }for(var value of nodelist.values()) {console.log(value) // <body>...</body> }for(var entry of nodelist.entries()) {console.log(entry) // [0, body] }🪁二、異同點
1. HTMLCollection 與 NodeList 的區(qū)別
| 集合 | 元素的集合 | 節(jié)點的集合 |
| 靜態(tài)和動態(tài) | HTMLCollection 是動態(tài)綁定的，是一個動態(tài)集合。DOM 樹發(fā)生變化，HTMLCollection 也會隨之變化，說明其節(jié)點的增刪是敏感的 | NodeList 是一個靜態(tài)集合，其不受 DOM 樹元素變化的影響；相當于是 DOM 樹、節(jié)點數(shù)量和類型的快照，也就是說對節(jié)點進行增刪操作時，NodeList 是感覺不到的。但是對節(jié)點內(nèi)部內(nèi)容修改，是可以感覺得到的，比如修改 innerHTML |
| 節(jié)點 | 不包含屬性節(jié)點和文本節(jié)點 | 只有 NodeList 對象有包含屬性節(jié)點和文本節(jié)點 |
| 元素獲取方式 | HTMLCollection 元素可以通過 name，id 或 index 索引來獲取 | NodeList 只能通過 index 索引來獲取 |
| 偽數(shù)組 | HTMLCollection 和 NodeList 都是類數(shù)組，不是數(shù)組，只是長得像數(shù)組而已。所以無法使用數(shù)組的方法，比如： pop()，push()，或 join() 等等 | 與 HTMLCollection 一樣 |
2. querySelectorAll 和 getElementsByTagName 的區(qū)別
在上述的表格中我們可以了解到， HTMLCollection 是動態(tài)集合，當 DOM 樹發(fā)生變化時， HTMLCollection 也會隨之改變。而 NodeList 是靜態(tài)集合，當 DOM 樹發(fā)生變化時， NodeList 不會受到 DOM 樹變化的影響。我們來舉兩個例子進行闡述說明。
（1）querySelectorAll
先附上代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>htmlCollection和NodeList</title> </head> <body><ul><li></li><li></li><li>MondayLab</li><li></li><li></li></ul><script>var oldUl = document.querySelectorAll('ul')[0];var oldLi = document.querySelectorAll('li');console.log(oldUl); // NodeList[body]console.log(oldLi.length); // 5var newLi = document.createElement('li');oldUl.appendChild(newLi);console.log(oldLi.length); // 5var length = oldLi.length - 1;oldLi[length].innerHTML = 'monday';console.log(oldLi[length].innerHTML); // monday console.log(oldLi.length); // 5 → 雖然通過innerHTML可以讀到文本節(jié)點的內(nèi)容，但是長度依舊不變，還是5</script> </body> </html>大家可以看到，使用 querySelectorAll 來獲取 <li> ，返回的是一個 NodeList 的集合。且當頁面 DOM 結構發(fā)生改變時，其長度不會發(fā)生任何的改變。但是當改變 innerHTML 時，則文本節(jié)點的內(nèi)容會發(fā)生改變。值得注意的是，即使 innerHTML 改變 DOM 的結構，但長度依舊是不變的，還是 5 。
（2）getElementsByTagName
先附上代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTMLCollection</title> </head> <body><ul><li></li><li></li><li>MondayLab</li><li></li><li></li></ul><script>var oldUl = document.getElementsByTagName('ul')[0];var oldLi = document.getElementsByTagName('li');console.log(oldUl); // HTMLCollection[body]console.log(oldLi.length); // 5var newLi = document.createElement('li');oldUl.appendChild(newLi);console.log(oldLi.length); // 6 → 順利改變 DOM 的結構</script> </body> </html>大家可以看到，使用 getElementByTagName 時，獲取的是一個 HTMLCollection 集合，這個時候說明對節(jié)點進行增刪操作時，頁面的 DOM 結構會發(fā)生改變，且HTMLCollection 將實時地獲取到集合的長度。
📞三、結束語
寫到這里的時候，不得不感概 js 的 DOM 操作是如此的強大，也突然就明白了自己之前寫代碼的時候為啥會遇到那么多坑。如果在學習之初就追溯于原理，可能跳的坑應該就能少很多了。
講到這里，關于 HTMLCollection 和 NodeList 的內(nèi)容就結束啦！希望對大家有幫助~
彩蛋有幾篇我看過還比較好理解的文章，有需要可以當擴展知識進行擴充哦~
🐣彩蛋 One More Thing
（：參考資料
lio_zero👉HTMLCollection和NodeList的區(qū)別
Snandy👉將HTMLCollection/NodeList/偽數(shù)組轉(zhuǎn)換成數(shù)組
binyellow👉DOM操作，HTMLCollection、NodeList
愛民👉NodeList 和 HTMLCollection
（：番外篇
-
關注公眾號星期一研究室，第一時間關注優(yōu)質(zhì)文章，更多精選專欄待你解鎖~
-
如果這篇文章對你有用，記得留個腳印jio再走哦~
-
以上就是本文的全部內(nèi)容！我們下期見！👋👋👋
總結
以上是生活随笔為你收集整理的你可能没有听说过 js中的 DOM操作还有这个: HTMLCollection 和 NodeList的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 飞书智能伙伴发布：接入大模型能力，限时开
- 下一篇： 浅谈前端路由原理hash和history