声明

该文部分代码和内容节选自菜鸟教程，仅用作个人学习，特此声明

链接：https://www.runoob.com/

DOM NodeList

• NodeList 对象是一个从文档中获取的节点列表 (集合) 。

• NodeList 对象类似 HTMLCollection 对象。

• 一些旧版本浏览器中的方法（如：getElementsByClassName()）返回的是 NodeList 对象，而不是 HTMLCollection 对象。

• 所有浏览器的 childNodes 属性返回的是 NodeList 对象。

• 大部分浏览器的 querySelectorAll() 返回 NodeList 对象。
  

1、获取并访问NodeList

直接上例子

<h2>JavaScript HTML DOM NodeList</h2>

<p> RNG 双杀大皇族</p>

<p>肉由耐我给五啊噗</p>

<p>法克鱿~~~</p>

<p id="demo"></p>

<script>
var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML = "第一个段落的内容为:<span style='color:red;'> " + myNodelist[0].innerHTML + '</span>';
</script>

2、NodeList length

NodeList 对象 length 属性定义了节点列表中元素的数量,常用于遍历节点列表

直接上例子

<h2>JavaScript HTML DOM NodeList</h2>

<p> RNG 双杀大皇族</p>

<p>肉由耐我给五啊噗</p>

<p>法克鱿~~~</p>

<p>点击按钮修改 p 元素的背景颜色。</p>

<button onclick="myFunction()">点我</button>

<script>
function myFunction() {
    var myCollection = document.querySelectorAll("p");
    var i;
    for (i = 0; i < myCollection.length; i++) {
        myCollection[i].style.color = "orange";
    }
}
</script>

标签：NodeList,DOM,对象,length,var,document
来源： https://www.cnblogs.com/xypersonal/p/16229796.html