【JavaScript】DOM节点树操作总结

最新推荐文章于 2024-08-15 23:54:05 发布

汪小穆

最新推荐文章于 2024-08-15 23:54:05 发布

阅读量4.2k

点赞数 5

分类专栏： JavaScript 文章标签：节点操作添加节点insertBefore 移除节点removeChild 替换节点replaceChild 在元素前面插入节点

本文链接：https://blog.csdn.net/w390058785/article/details/80534328

版权

本文总结了DOM节点操作，包括获取子节点、节点类型、添加节点、替换节点、移除节点等。通过实际示例，解释了如何处理文本节点、元素节点，以及使用克隆节点解决添加节点的限制。还介绍了如何检测节点是否存在及其名字、内容等信息。

摘要由CSDN通过智能技术生成

前言：打开一个页面，加载完html文件后，浏览器首先做的就是解析html代码并开始绘制节点树，也就是说，我们删除标签元素，添加标签元素，改变标签元素的大小，改变标签元素的内容，其实就是在删除DOM节点，添加DOM节点，改变DOM节点的大小，也就是说在DOM节点树上进行操作。

一、节点树

（画工技术一般般，哈哈..儿童节快乐）

这是一个很简单的节点树，<!DOCTYPE html>相当于这棵节点说的根，也称为文档节点，文档节点有且只有一个。文档节点下也只有一个子节点，那就是<html>标签，我喜欢把它比作这棵节点树的主干，而<head>,<body>标签是<html>标签的子节点，就是主干上的两条分支。在<head>,<body>下又有更多的子节点，更多分支。

二、获取子节点（childNodes）

可以通过childNodes获取到该节点下的所有子节点类数组(NodeList类数组)，NodeList类数组与我们以前见到的arguments类数组不同的是，Nodelist类数组有length属性。

<body>
    <ul id="myList">
        hello ChildNodes
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <script>
        var element = document.getElementById('myList');
        alert(element.childNodes.length);
    </script>
<body>

猜一下输出结果吧。我相信没有接触过的朋友可能会说有3个li标签，那就是有3个子节点。或者是说4个节点，文字也算一个节点。

但是输出结果其实是7.

但是在iE8及IE8以下浏览器输出的是4

总结：其实在li标签之间还存在空白符，而空白符也被算是一个节点。我们试着不换行就行了。（文本节点前后不会产生空白符，因为空白符也是文本节点）

<body>
    <ul id="myList">
    	hello ChildNodes
        <li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>
    <script>
        var element = document.getElementById('myList');
        alert(element.childNodes.length);
    </script>
<body>