JS 查看标签下某元素所有信息（查看元素，查询元素，遍历元素、HTMLCollection对象、NodeList对象）
生活随笔
收集整理的這篇文章主要介紹了
JS 查看标签下某元素所有信息（查看元素，查询元素，遍历元素、HTMLCollection对象、NodeList对象）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
NodeList?對象是一個從文檔中獲取的節點列表 (集合) 。
NodeList 對象類似?HTMLCollection?對象。
一些舊版本瀏覽器中的方法（如：getElementsByClassName()）返回的是 NodeList 對象，而不是 HTMLCollection 對象。
所有瀏覽器的?childNodes?屬性返回的是 NodeList 對象。
大部分瀏覽器的?querySelectorAll()?返回 NodeList 對象。
?
HTMLCollection 與 NodeList 的區別
- HTMLCollection?是 HTML 元素的集合。
- NodeList 是一個文檔節點的集合。
- NodeList 與 HTMLCollection 有很多類似的地方。
- NodeList 與 HTMLCollection 都與數組對象有點類似，可以使用索引 (0, 1, 2, 3, 4, ...) 來獲取元素。
- NodeList 與 HTMLCollection 都有 length 屬性。
- HTMLCollection 元素可以通過 name，id 或索引來獲取。
- NodeList 只能通過索引來獲取。
- 只有 NodeList 對象有包含屬性節點和文本節點。
?
查看元素（HTMLCollection對象，包含通過索引、通過id）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <body><h2>JavaScript HTML DOM</h2><p id="aaa"> Hello World!</p><p id="bbb"> Hello Runoob!</p><p id="demo"></p><script> var myCollection = document.getElementsByTagName("p"); console.log(myCollection["aaa"]) //document.getElementById("demo").innerHTML = "第二個段落的內容為:<span style='color:red;'> " + myCollection["bbb"].innerHTML + '</span>'; document.getElementById("demo").innerHTML = "第二個段落的內容為:<span style='color:red;'> " + myCollection[1].innerHTML + '</span>'; </script></body> </html>?
查看元素（NodeList對象）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <body><h2>JavaScript HTML DOM!</h2><p>Hello World!</p><p>Hello Runoob!</p><p id="demo"></p><script> var myNodelist = document.querySelectorAll("p"); document.getElementById("demo").innerHTML = "第二個段落的內容為:<span style='color:red;'> " + myNodelist[1].innerHTML + '</span>'; </script></body> </html>?
遍歷元素（HTMLCollection對象）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <body><h2>JavaScript HTML DOM</h2><p>Hello World!</p><p>Hello Runoob!</p><p>點擊按鈕修改 p 元素的背景顏色。</p><button onclick="myFunction()">點我</button><script> function myFunction() {var myCollection = document.getElementsByTagName("p");var i;for (i = 0; i < myCollection.length; i++) {myCollection[i].style.color = "red";} } </script></body> </html>?
遍歷元素（NodeList對象）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <body><h2>JavaScript HTML DOM!</h2><p>Hello World!</p><p>Hello Runoob!</p><p>點擊按鈕修改所有 p 元素的背景顏色。</p><button onclick="myFunction()">點我</button><script> function myFunction() {var myNodelist = document.querySelectorAll("p");var i;for (i = 0; i < myNodelist.length; i++) {myNodelist[i].style.color = "red";} } </script></body> </html>?
總結
以上是生活随笔為你收集整理的JS 查看标签下某元素所有信息（查看元素，查询元素，遍历元素、HTMLCollection对象、NodeList对象）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： placement new--《C++必
- 下一篇： 在gridview里查找模板里的butt