JavaScript 学习-28.元素与节点(HTMLCollection 和 NodeList)
2022/5/27 1:20:05
本文主要是介绍JavaScript 学习-28.元素与节点(HTMLCollection 和 NodeList),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
前言
我们平常说的查找元素 和 节点到底有什么区别?为什么有时候返回HTMLCollection ,有时候返回NodeList?
HTMLCollection 和 NodeList 的区别又是什么?带着这些问题进入本篇的学习。
节点与元素
根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 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
是文本节点。
从上面例子可以看出,节点包含了元素,元素是属于节点的一种。
element 元素对象
节点都是单个对象,有时会需要一种数据结构,能够容纳多个节点。DOM提供两种集合对象,用于实现这种节点的集合:NodeList和HTMLCollection。
- HTMLCollection 是表示 HTML 元素的集合。
- NodeList 对象代表一个有顺序的节点列表
以下方法获取的为element 元素对象
- document.getElementById("id属性")
- document.querySelector('css选择器')
示例
// 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 对象
HTMLCollection只能包含 元素节点(ElementNode)类型的节点, 以下方法返回HTMLCollection对象
- document.getElementsByClassName("className")
- document.getElementsByTagName("tag名称")
- document.forms // 对象选择器查找 HTML 对象
<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 是表示节点的集合。
NodeList 对象中的属性和方法:
属性 / 方法 | 参数 | 描述 |
---|---|---|
length | 无 | 返回 NodeList 中的数量。 |
item() | 索引 number类型 | 返回 NodeList 中指定索引的节点。 |
以下方法获取的为NodeList对象
- document.getElementsByName("name名称")
- document.querySelectorAll("css选择器")
- element.childNodes // 获取元素的子节点
<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区别
HTMLCollection 是表示 HTML 元素的集合,元素也是节点的一种,也就是元素节点,NodeList 是表示节点的集合
我们可以理解为 HTMLCollection 是 Nodelist 集合的一种。
差异 | HTMLCollection | NodeList |
---|---|---|
length | 有 | 有 |
item() | 有 | 有 |
namedItem | 有 | 无 |
forEach | 无 | 有 |
索引取值 | 可以 | 可以 |
实时变动 | 是 | 是 |
节点类型 | 元素节点 | 任意节点:文本节点、元素节点、属性节点、注释节点 |
这篇关于JavaScript 学习-28.元素与节点(HTMLCollection 和 NodeList)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-07-02springboot项目无法注册到nacos-icode9专业技术文章分享
- 2024-06-26结对编程到底难不难?答案在这里
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)