第二天：js结点操作的总结汇总

在这里插入代码片

前言

在学习结点操作前我们需要了解什么是js中的结点：javascript节点是指页面中所有的内容，包括标签、属性、文本。
为什么要学习对结点的操作呢：后续在学习中，我们需要设置按钮或者链接对结点进行动态操作，而结点的操作方法，就显得尤为重要。

一，对结点的基本操作

1.1 对父结点的操作

规定子元素用e代替，则操作其父元素的表示方法是：

e.parentNode

我们可以再次基础上对e的父亲进行js操作，操作方法与一般js元素的DOM操作是一样的。如果说没有找到e的parentNode,则返回值为空。

1.2 对子结点的标准操作

规定父元素用e代替，则操作子元素的表示方法是：

e.childNodes

这样获取到的是全部的子元素，所以childNode后面有一个复数s标志。childNodes包括所有的子节点，包含元素结点，文本结点等等请牢牢记住这句话。
请看如下代码：

        <ul>
            <li>我是li</li>
            <li>我是li</li>
            <li>我是li</li>
            <li>我是li</li>
        </ul>

            //Dom提供的方法
            var ul = document.querySelector('ul');
            var lis = ul.querySelectorAll('li');
            //子节点 childNodes 所有的子节点，包含元素结点，文本结点等等
            console.log(ul.childNodes);
            // console.log(ul.childNodes[0].nodeType);

读者朋友们可以把此结构拿到编译器上运行，可以看到：

结果是这样。因为，上文说过，childNodes得到的子元素包括元素结点，也包括文本结点。如下图，li是元素结点，li后面的换行符同样也是结点，只不过是文本结点，也算作结点，所以最后显示长度为7，并且，获取到的数组索引是从0开始的：

1.3 最常用的非标准获取子结点方法

刚刚我们交代了childNodes的用法，平时我们在应用中不常使用，但是它其实是获取子元素的标准方法。程序员使用最多的是非标准方法，可以有效地规避childNodes获取到文本结点这一弊端，使用起来会方便很多，同样，另父元素为e，则子元素的非标准获取方法：

e.children

还是上述代码结构，大家在浏览器调试器中查看可知，children只获取到了父元素的所有元素结点，不包括文本结点，更加方便，大部分情况下更提倡这种用法。

1.4 对子结点中的单个结点操作

对子元素的操作同样有两种情况，一种是操作所有的结点（文本结点，元素结点），另一种则是只操作元素结点，下面我们分别来了解，请看以下代码结构：

    <ol>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
    </ol>

我们的需求是：操作ol元素的第一个孩子和最后一一个孩子。
先看第一种能够获取所有结点的方式：

        console.log(ol.firstChild);//文本结点换行
        console.log(ol.lastChild);//文本结点换行  

这两种方式打印出来的都是文本的换行符。
而另一种方式则可以获取所有的元素结点：

        console.log(ol.firstElementChild);//返回第一个子元素结点
        console.log(ol.lastElementChild);//兼容性问题IE9以上才可以

注意，后面两种方式不能用于古早浏览器，比如ie，会有兼容性问题。

其余操作单个孩子的方式（使用children），通过刚刚的学习，我们能看出，children获取的所有子元素是以数组的方式呈现，并且索引从0开始。所以我们在调用的时候也以数组的方式来调用。比如有三个孩子，我们需要调用第一个孩子，则代码是：

e.children[0]

1.5 对兄弟结点的操作

这里也介绍两种方式，一种是获取所有结点（元素结点，文本结点），另一种是只获取文本结点
先看获取所有结点：
获取上一个兄弟结点：

e.nextSibling

获取下一个兄弟结点：

e.previousSbiling

注意，这两种方法只兼容ie9以上的浏览器
获取上一个兄弟元素结点：

e.nextElementSbiling

获取下一个兄弟元素结点：

node.previousElementSibling

二，结点的添加，删除与拷贝

2.1 结点的添加

结点的添加有一个固定的顺序：先获取父结点，再定义子结点，最后把子结点放入父结点中：
结构如下

    <ul>
        <li>123</li>
    </ul>

现在想在ul中添加结点：

        //第一步，获取父结点
        var ul = document.querySelector('ul');
        //第二步，定义子结点
        var li = document.createElement('li');
        //第三步，把子节点添加到父结点中
        ul.appendChild(li);
        //如果想要在固定位置添加结点,这表示在某个结点前添加结点
        ul.insertBefore(lili, ul.children[0]);

2.2 删除结点

请看

    <ul>
        <li>熊大</li>
        <li>熊二</li>
        <li>光头强</li>
    </ul>

删除某个孩子，加上索引即可。

       ul.removeChild(ul.children[0]);

2.3 结点的拷贝

这里涉及到深拷贝与浅拷贝的概念。深拷贝与浅拷贝这里只需要浅浅理解，后面会出详细介绍深拷贝与浅拷贝的博客，可以关注。

在结点的拷贝中，浅拷贝可以拷贝到元素的标签，但是不复制内容，而深拷贝不光拷贝到元素的标签，还能够拷贝到元素的内容

结点的拷贝方式：

        var lili = ul.children[0].cloneNode();

默认是浅拷贝。如果是深拷贝，则在括号中加上true

        var lili = ul.children[0].cloneNode(true);