节点操作_节点操作的四个-CSDN博客

本文链接：https://blog.csdn.net/Var521/article/details/104582289

1.父级节点

node.parentNode
1.parentNode 属性可以返回某个节点的父节点，是离节点最近的一个父节点
2.如果指定节点没有父节点，就会返回null

<body>
    <div class="box">
        <span class="erweima">我是二维码</span>

    </div>
    <script>
        var erweima = document.querySelector('.erweima');
        //父节点 parentNode
        //box使erweima的父亲节点
        console.log(erweima.parentNode);

    </script>
 </body>

结果：
在这里插入图片描述

2.子节点

1.parentNode.childNodes（标准）
2.parentNode.children(非标准）
二者之间的区别是：第一个会获取所有子节点，包括文本节点，元素节点等等，而第二种只能获取到元素节点
注：
节点：网页中所有内容都是节点，包括标签、文本、属性、注释等。
节点类型一般包括元素节点、属性节点、文本节点等，其中元素节点对应的节点值为1，属性节点的节点值为2，文本节点的节点值为3，值得注意的是文本节点包括文字，空格换行。
这就是为什么下面代码会有9个节点的原因，其中换行占5个文本节点，还有四个元素节点。

 <body>
    <div>我是div</div>
    <span>我是span</span>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>

    </ul>
    <ol>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ol>
    <script>
        var ul = document.querySelector('ul');
        var lis = ul.querySelectorAll('li');
        //1.子节点 childNodes 是拿到所有的子节点 包括元素节点 文本节点等等
        console.log(ul.childNodes);
        //2. children 是拿到所有子节点中的元素节点
        console.log(ul.children);
        
        
    </script>
 </body>

结果：
在这里插入图片描述

3.子节点的第一个子元素

firstChild 获取的是第一个子节点不管是文本节点还是元素节点
firstElementChild 返回的是第一个子元素节点(IE9以上才支持)
parentNode.children[index] 可以返回任意子元素节点，还不用担心兼容问题

4.兄弟节点

node.nextSibling 返回的是当前元素的下一个兄弟节点，包括文本节点和元素节点
node.previousSibling 返回的是当前元素的前一个兄弟节点，包括文本节点和元素节点
node.nextElementSibling 返回的是当前元素的下一个兄弟元素节点，找不到返回null （只兼容IE9 以上版本）
node.previousElementSibling 返回的是当前元素的前一个兄弟元素节点（只兼容IE9 以上版本）

5.创建和添加节点

1.node.appendChild(child) 向后追加元素节点
2.node.insertBefore 向前插入元素节点

<body>
    <ul>
        <li>王也</li>
    </ul>
    <script>
        //1.创建节点元素节点
        var li = document.createElement('li');
        //2.添加节点 node.appendChild(child)后面追加元素 node 父级 child 子级 
        var ul = document.querySelector('ul');
        ul.appendChild(li);
        //3.添加节点 node.insertBefore(child,指定元素);
        var lili = document.createElement('li');
        ul.insertBefore(lili,ul.children[0]);
    </script>
 </body>