nodelist 与 HTMLCollection 的区别

本文介绍: Nod eLi st 对象中的属性和方法： | 属性 / 方法 | 参数 | 描述 | | ———— |————— | ——————————————————— | | length | 无 | 返回 Nod eLi st 中的数量。HTMLColle ct ion只能包含元素节点(Elem e n tNod e)类型的节点, 以下方法返回HTMLCo ll ec t ion 对象。从上面例子可以看出，节点包含了元素，元素是属于节点的一种。

原地址 https://cloud.tencent.com/developer/article/2013289

节点与元素

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

以下示例

&lt;div id="user"&gt;
    &lt;p id="demo" class="text-info"&gt;Hello&lt;/p&gt;
&lt;/div&gt;

每个 HTML 元素是元素节点，所以<div>是一个元素节点，<p>也是元素节点。 <p class="text-info">Hello</p>元素有属性和文本，所以class="text-info" 和 id="demo"是属性节点，Hello是文本节点。从上面例子可以看出，节点包含了元素，元素是属于节点的一种。

// getElementById返回元素
element1 = document.getElementById('user');
console.log(element1) // 返回整个div 元素<div id="user"><p id="demo" class="text-info">Hello</p></div>
element2 = document.getElementById('demo');
console.log(element2) // <p id="demo" class="text-info">Hello</p>
// querySelector返回元素
element1 = document.querySelector('#user');
console.log(element1) // 返回整个div 元素<div id="user"><p id="demo" class="text-info">Hello</p></div>
element2 = document.querySelector('#demo');
console.log(element2) // <p id="demo" class="text-info">Hello</p>
element3 = document.querySelector('p');
console.log(element3) // <p id="demo" class="text-info">Hello</p>
element4 = document.querySelector('.text-info');
console.log(element4) // <p id="demo" class="text-info">Hello</p>
element5 = document.querySelector('p.text-info');
console.log(element5) // <p

    <div id="user">
        <p id="demo" class="text-info">Hello</p>
        <p>Hello</p>
    </div>

elements = document.getElementsByClassName("text-info");
console.log(elements);  // HTMLCollection
console.log(elements.length); // 获取个数
// 索引取值
console.log(elements[0]); // 下标取值 <p id="demo" class="text-info">Hello</p>
// item 根据下标取值
console.log(elements.item(0));
// namedItem 根据id 或name属性取值
console.log(elements.namedItem('demo'));

属性 / 方法	参数	描述
length	无	返回 HTMLCollection 中元素的数量。
item()	索引 number 类型	返回 HTMLCollection 中指定索引的元素。
namedItem()	字符串，传元素的id或name 名称，如果id找不到就找name	返回 HTMLCollection 中指定 ID 或 name 属性的元素。

HTMLCollection.namedItem(name)
或
HTMLCollection[name]

// namedItem 根据id 或name属性取值
console.log(elements.namedItem('demo'));
// 也可以直接中括号里面传id或name属性
console.log(elements['demo']);

    <form id="form-user">
        <label for="user-id">用户名</label>
        <input id="user-id" name="username" value="yoyo">
    </form>
    <div id="user">
        <p id="demo" class="text-info">Hello</p>
        <p>Hello</p>
    </div>

nodes = document.getElementsByName('username');
console.log(nodes)  // NodeList [input#user-id]
// length 属性
console.log(nodes.length)  //1
// 索引取值
console.log(nodes[0]) // <input id="user-id" name="username" value="yoyo">
// item索引取值
console.log(nodes.item(0))  // <input id="user-id" name="username" value="yoyo">

document.querySelectorAll()也一样

nodes = document.querySelectorAll('#user');
console.log(nodes);  // NodeList [div#user]
console.log(nodes.length);  // 1
// 索引取值
console.log(nodes[0]) // <input id="user-id" name="username" value="yoyo">
// item索引取值
console.log(nodes.item(0))  // <input id="user-id" name="username" value="yoyo">

element.childNodes 是获取元素的子节点

element = document.getElementById('user');
// childNodes 所有的子节点
console.log(element.childNodes);
console.log(element.childNodes.length);  // 5

差异	HTMLCollection	NodeList
length	有	有
item()	有	有
namedItem	有	无
forEach	无	有
索引取值	可以	可以
节点类型	元素节点	任意节点：文本节点、元素节点、属性节点、注释节点