首页前端开发JavaScript了解NodeList、HTMLCollection以及NamedNodeMap的使用(代码)

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

时间2024-01-28 21:24:03发布访客分类JavaScript浏览759
导读:收集整理的这篇文章主要介绍了了解NodeList、HTMLCollection以及NamedNodeMap的使用(代码 ,觉得挺不错的,现在分享给大家,也给大家做个参考。本篇文章给大家带来的内容是关于了解nodelist、HTMLColle...
收集整理的这篇文章主要介绍了了解NodeList、HTMLCollection以及NamedNodeMap的使用(代码),觉得挺不错的,现在分享给大家,也给大家做个参考。

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

这三个都是类数组对象。

  1. HTMLCollection只包含元素节点,而NodeList包含任何节点类型。

  2. HTMLCollection对象可以调用ITem()和namedItem()方法,NodeList对象只能调用item()方法。在获取元素时,两者都可以通过方括号的语法或item()方法。HTMLCollection对象允许通过namedItem()方法,传入一个name或id获取元素。

  3. 一些旧版本浏览器中的方法(如:getElementsByclassname())返回的是 NodeList 对象,而不是 HTMLCollection 对象。所有浏览器的 childNodes 属性返回的是 NodeList 对象。大部分浏览器的 querySelectorAll() 返回 NodeList 对象。getelementsbytagname()返回HTMLCollection对象。

  4. 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的使用(代码)的全部介绍,如果您想了解更多有关HTML视频教程,请关注PHP中文网。

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

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!

HTMLCollection

若转载请注明出处: 了解NodeList、HTMLCollection以及NamedNodeMap的使用(代码)
本文地址: https://pptw.com/jishu/590176.html
BootStrap简介以及怎样部署安装(介绍) Bootstrap是什么,有什么特点?

游客 回复需填写必要信息