了解NodeList、HTMLCollection以及NamedNodeMap的使用(代码)_JavaScript

上一篇: 前端常用的JavaScript操作（代码... 下一篇:web文本数据清洗流程及实例（实...

了解NodeList、HTMLCollection以及NamedNodeMap的使用(代码)

发布时间：2022-05-16 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了了解NodeList、HTMLCollection以及NamedNodeMap的使用(代码)，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

本篇文章给大家带来的内容是关于了解 nodelist、HTMLCollection以及NamedNodeMap的使用(代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

这三个都是类数组对象。

HTMLCollection只包含元素节点，而NodeList包含任何节点类型。
HTMLCollection对象可以调用ITem()和namedItem()方法，NodeList对象只能调用item()方法。在获取元素时，两者都可以通过方括号的语法或item()方法。HTMLCollection对象允许通过namedItem()方法，传入一个name或id获取元素。
一些旧版本浏览器中的方法（如：getElementsByclassname()）返回的是 NodeList 对象，而不是 HTMLCollection 对象。所有浏览器的 childNodes 属性返回的是 NodeList 对象。大部分浏览器的 querySelectorAll() 返回 NodeList 对象。getelementsbytagname()返回HTMLCollection对象。
NamedNodeMap对象是通过node.attributes属性获取，获取到由该元素的所有属性构成的伪数组对象。

例：

<body>
<p>
  <a href="#" id="a1">1</a>
  <a href="a.html" name="a2">2</a>
</p>
</body>
<script>
	// 获取一个HTMLCollection对象
	VAR res = document.getElementsByTagName("a");
	console.LOG(res);
	console.log(res.item(0))
	console.log(res[0])
	console.log(res.namedItem('a1'))
	console.log(res.namedItem('a2'))
	// 结果如下图所示：
</script>

了解NodeList、HTMLCollection以及NamedNodeMap的使用(代码)

以上就是对了解NodeList、HTMLCollection以及NamedNodeMap的使用(代码)的全部介绍，如果您想了解更多有关HTML视频教程，请关注PHP中文网。

以上就是了解NodeList、HTMLCollection以及NamedNodeMap的使用(代码)的详细内容，更多请关注脚本宝典其它相关文章！

脚本宝典总结

以上是脚本宝典为你收集整理的了解NodeList、HTMLCollection以及NamedNodeMap的使用(代码)全部内容，希望文章能够帮你解决了解NodeList、HTMLCollection以及NamedNodeMap的使用(代码)所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：HTMLCollection

上一篇: 前端常用的JavaScript操作（代码... 下一篇:web文本数据清洗流程及实例（实...

猜你在找的JavaScript相关文章

html font标签如何设置字体大小？html font标签属性用法介绍 2022-05-16
vue3+TypeScript+vue-router的使用方法 2022-04-16
vue3获取当前路由地址 2022-04-16
如何利用React实现图片识别App 2022-04-16
JavaScript展开运算符和剩余运算符的区别详解 2022-04-16
微信小程序中使用vant框架的具体步骤 2022-04-16
Vue elementUI表单嵌套表格并对每行进行校验详解 2022-04-16
如何利用Typescript封装本地存储 2022-04-16
微信小程序中wxs文件的一些妙用分享 2022-04-16
JavaScript的Set数据结构详解 2022-04-16