js之DOM的节点操作

什么是节点操作

页面中的所有内容都是节点(标签、属性、文本、注释等)，在dom中，节点使用node来表示。

HTML DOM树中的所有节点均可通过javaScript进行访问，所以HTML元素(节点)均可被修改，也可以创建或删除。

一般的，节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性。

元素节点 nodeType为1
属性节点 nodeType为2
文本节点 nodeType为3(文本节点包含文字、空格、换行等)
我们在实际开发中，节点操作主要操作的是元素节点

为什么学习节点操作

获取元素通常使用两种方式：
1.利用DOM 提供的方法获取元素
document.getElementById()
document.getRlementByTagName()
document.querySelector等
逻辑性不强，繁琐

2.利用节点的层次关系获取元素
利用父子兄节点关系获取元素
逻辑性强，但是兼容性稍差

这两种方式都可以获取元素节点，我们后面都会使用，但是节点操作更方便

<div>我是div</div>
    <span>我是span</span>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <div class="dome">
        <div class="box">
            <span class="erweima">x</span>
        </div>
    </div>
    <!-- <script>
        var box = document.querySelector('.box');
        console.dir(box);
    </script> -->
    <!-- <script>
        // 父节点 parentNode
        var erweima = document.querySelector('.erweima');
        // var box = document.querySelector('.box')
        // 得到的是离元素最进的父级节点。如果找不到父节点就返回为null，如果指定的节点没有父节点则返回null。
        console.log(erweima.parentNode);
    </script> -->

节点层级

利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。
1. 父级节点：
node.parentNode
2.子级节点：
parentNode.childNodes(标准)
parentNode.childNodes返回包含指定节点的子节点的集合，该集合为即时更新的集合。
注意：
返回值里面包含了所有的子节点，包括元素节点，文本节点等。
如果只想要获取里面的元素节点，则需要专门处理。所有我们一般不提倡使用childNodes
3.parentNode.children(非标准)
是一个只读属性，返回所有的子元素节点，它之返回子元素节点，其余节点不返回。
虽然children是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用

<script>
        //DOM提供的方法(API)获取
        var ul = document.querySelector('ul');
        var lis = ul.querySelectorAll('li');
        //1.子节点 childNodes所有的子节点 包含 元素节点 文本节点等等
        console.log(ul.childNodes);
        console.log(ul.childNodes[0].nodeType);
        console.log(ul.childNodes[1].nodeType);
        //2.childeren获取所有元素的子元素节点
        console.log(ul.children);
    </script>

节点操作之第一个子元素和最后一个元素

节点层级：
2.子节点
3.parentNode.firstChild
firstChild返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。
4.parentNode.lastChild
lastChild返回的是最后一个子节点。
5.parentNode.firstElementChild
返回第一个子元素节点，找不到则返回null
6.parentNode.lastElementChild
返回最后一个子元素节点，找不到则返回null

（注意这两个方法有兼容问题）

<ol>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
        <li>我是li5</li>
        <li>我是li6</li>
        <li>我是li7</li>
    </ol>
    <script>
        var ol = document.querySelector('ol');
        // firstChild第一个子节点 不管是文本节点还是元素节点
        console.log(ol.firstChild);
        console.log(ol.lastChild);
        //firstElementChild返回第一个子元素节点
        console.log(ol.firstElementChild);
        //返回最后一个子元素节点
        console.log(ol.lastElementChild);
        //实际开发中的写法 既没有兼容性问题又返回第一个子元素
        console.log(ol.children[0]);
        // console.log(ol.children[3]);
        //先把所有li的长度拿过来减1就是最后一个元素了
        console.log(ol.children[ol.children.length - 1]);
    </script>

兄弟节点

1. node.nextSibling
   返回当前元素的下一个兄弟节点，找不到则返回null.同样，也是包含所有的节点。
   2.node.previousSibling
   perviousSibling返回当前元素的上一个兄弟节点，找不到则返回null,同样，也是包含所有的节点。

   3.node.nextElementSibling
   nextElementSibling返回当前元素下一个兄弟元素节点，找不到则返回null。

   4.node.previousElementSibling
   返回当前元素上一个兄弟节点，找不到则返回null.

还是要注意兼容性问题：解决方法封装一个 兼容性函数

<!-- <div>我是div</div>
    <span>我是span</span>
    <script>
        var div = document.querySelector('div');
        //nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等
        console.log(div.nextSibling);
        console.log(div.previousSibling);
        //nextElementSibling得到下一个兄弟元素节点
        console.log(div.nextElementSibling);
        console.log(div.previousElementSibling);
    </script> -->

创建节点和添加节点

1、创建节点
document.createElement(‘tagName’)
document.createElement()方法创建由tagName指定的HTML元素。因此这些元素原先不存在
是根据我们需求动态生成的，所以我们也称为动态创建元素节点
2、添加节点
node.appendChild(child)
node.appendChild()方法将一个节点添加到指定父节点的子节点列表末尾，类似于css里面的after伪元素。
.node.insertBefore(child,指定元素)
方法将一个节点添加到父节点的指定子节点前面，类似与css里面的before伪元素

<ul>
        <li>123</li>
    </ul>
    <script>
        //1.创建节点元素节点
        var li = document.createElement('li');
        // 2.添加节点 node.appendChild(child)node父节 child子节 后面追加元素，类型于数组中的push
        var ul = document.querySelector('ul');
        ul.appendChild(li)
        // 3.添加节点node.insertBefore(child,指定元素);
        var lili = document.createElement('li')
        ul.insertBefore(lili,ul.children[0]);
        // 4.我们想要页面添加一个新的元素：1.创建元素2.添加元素
    </script>