首页 > web前端 > js教程 > 正文

js关于Dom的childNodes和childrens以及相关节点的获取

青灯夜游
发布: 2018-10-11 17:04:56
转载
3489人浏览过

本文给大家介绍js关于Dom的childNodes和childrens以及相关节点的获取,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

dom-文档对象模型

Node类型 

每个DOM节点都有一个nodeType的属性用来表示这个节点的类型。一共有12中类型,常见的的ELEMENT_NODE=1;ATTRIBUTE_NODE=2;TEXT_NODE=3

例子

<p class="p"id="p">
    p
    <p class="doughter">
        doughter
    </p>
    <p class="son">
        son
    </p>
    <p class="cousin">
        cousin
    </p>
</p>
登录后复制

对于p节点而言,nodeType=1,nodeName=”p” nodeValue=null

(nodeName保存的是标签名)

var p = document.getElementById("p")
登录后复制

P中关于node的属性

1.png

P中还有一个childNodes属性,其中保存在NodeList对象,NodeList是一种类数组对象,用于保存一组有序的节点,可以通过位置来访问这些节点。虽然可以通过方括号语法来访问NodeList的值,而且这个对象也有length 属性,但它并不是Array的实例。NodeList对象的独特指出在与它实际上是基于DOM结构动态执行查询的结果,因此DOM结构的变化能够自动反应在NodeList中。

对于节点而言还有一个属性叫做childrens。根据《javascript高级程序设计》:由于IE9之前的其他版本与其他浏览器在处理文本节点中的空白符时有差异,因此久出现了children属性。该属性是HTMLCollection的实例,只包含元素中同样还是元素的子节点。除此之外,二者没有什么区别。

根据上例,我们把p的childNodes和children都输出看看

p.children

2.png

p.childNodes

3.png

可以看出

1.   二者是属于不同的实例,children时HTMLCollection的实例,childNodes是childNodes的实例

2.   children只包含了同样是元素的孩子节点,而childNodes返回了元素的子元素集合,,包括了HTML

节点,属性节点,文本节点。可以通过nodeType来判断是哪种类型的节点。只有当nodeType==1时候才是元素节点。(2=属性节点,3=文本节点)

关于childNodes的支持情况如下

 

IE6-8/Safari/Chrome/Opera

IE9/Firefox

childNodes(i)

支持

不支持

可以通过一下方法进行转化

var arr = Array.prototype.slice.call(p.childNodes,0);
    arr.filter((item,index)=>(
        item.nodeType===1
))
登录后复制

除了孩子关系,节点还存在父子关系,兄弟关系

4.png

通过以上属性获得的节点不一定是元素类型。可能是text等。(如果不存在的为null)如果希望获得元素类型的节点,对DOM的扩展中提供了获取元素类型节点的方法

5.png

操作节点

appendChild()

用于向childNodes列表的末尾添加一个节点。添加后childNodes的新增节点,父节点及以前的最后一个节点的关系指针会更新。完成更新后返回值是新增节点。

如果传入appendChild中的节点已经是文档的一部分了,那么结果就是将该节点从原来的位置移到新的位置。

InsertBefore ()

InsertBefore ()接受两个参数:要插入的节点和作为参照的节点。插入节点后,被插入的节点回变成参照节点的前一个同胞节点,同时被返回。如果参照节点为null,则和appendChild没有区别

ReplaceChild()

ReplaceChild()接收两个参数:要插入的节点和要替换的节点。要替换的节点将由这个方法返回并且删除,同时要插入的节点占据它的位置 

RemoveChild()

删除一个节点,参数是要移除的节点

 注意:

  1. 被删除和替换的节点仍然为文档所有,只不过在文档中已经没有了位置。

  2. 以上的几种方法的操作,都是某个节点的子节点。也就是说要使用这些方法,需要先获得父节点

cloneNode()

拷贝一个节点,接受一个参数,true=深复制(也就是复制节点以及整个子节点树);false=浅复制(只复制当前节点)

总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。更多相关教程请访问JavaScript视频教程

相关推荐:

php公益培训视频教程

JavaScript图文教程

JavaScript在线手册

以上就是js关于Dom的childNodes和childrens以及相关节点的获取的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:CSDN网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号