我们平常说的查找元素 和 节点到底有什么区别?为什么有时候返回HTMLCollection ,有时候返回NodeList?
HTMLCollection 和 NodeList 的区别又是什么?带着这些问题进入本篇的学习。
根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:
以下示例
<div id="user"> <p id="demo" class="text-info">Hello</p> </div>
每个 HTML 元素是元素节点,所以<div>
是一个元素节点,<p>
也是元素节点。
<p class="text-info">Hello</p>
元素有属性和文本,所以class="text-info"
和 id="demo"
是属性节点,Hello
是文本节点。
从上面例子可以看出,节点包含了元素,元素是属于节点的一种。
节点都是单个对象,有时会需要一种数据结构,能够容纳多个节点。DOM提供两种集合对象,用于实现这种节点的集合:NodeList和HTMLCollection。
以下方法获取的为element 元素对象
示例
// 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 id="demo" class="text-info">Hello</p>
HTMLCollection只能包含 元素节点(ElementNode)类型的节点, 以下方法返回HTMLCollection对象
<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'));
HTMLCollection 对象中的属性和方法:
属性 / 方法 | 参数 | 描述 |
---|---|---|
length | 无 | 返回 HTMLCollection 中元素的数量。 |
item() | 索引 number类型 | 返回 HTMLCollection 中指定索引的元素。 |
namedItem() | 字符串,传元素的id或name名称,如果id找不到就找name | 返回 HTMLCollection 中指定 ID 或 name 属性的元素。 |
namedItem() 方法返回 HTMLCollection 对象中指定 ID 或 name 的元素。
HTMLCollection.namedItem(name) 或 HTMLCollection[name]
使用示例,以下两种方法都可以
// namedItem 根据id 或name属性取值 console.log(elements.namedItem('demo')); // 也可以直接中括号里面传id或name属性 console.log(elements['demo']);
NodeList 是表示节点的集合。
NodeList 对象中的属性和方法:
属性 / 方法 | 参数 | 描述 |
---|---|---|
length | 无 | 返回 NodeList 中的数量。 |
item() | 索引 number类型 | 返回 NodeList 中指定索引的节点。 |
以下方法获取的为NodeList对象
<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 是表示 HTML 元素的集合,元素也是节点的一种,也就是元素节点,NodeList 是表示节点的集合
我们可以理解为 HTMLCollection 是 Nodelist 集合的一种。
差异 | HTMLCollection | NodeList |
---|---|---|
length | 有 | 有 |
item() | 有 | 有 |
namedItem | 有 | 无 |
forEach | 无 | 有 |
索引取值 | 可以 | 可以 |
实时变动 | 是 | 是 |
节点类型 | 元素节点 | 任意节点:文本节点、元素节点、属性节点、注释节点 |