节点操作--JavaScript

1 - 概念

网页中的所有内容都是节点（标签、属性、文本、注释），在DOM中，节点使用node来表示。

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

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

元素节点 nodeType 为 1

属性节点 nodeType 为 2

文本节点 nodeType 为 3 （文本节点包含文字、空格、换行等）

我们在实际开发中，节点操作主要的操作对象是元素节点

2 - 节点层级

利用DOM树可以把节点划分为不同层级关系，常见的是父子、兄弟层级关系。

3 - 父级节点

node.parentNode

parentNode属性可以返回某节点的父节点，注意是最近的一个父节点

如果指定的节点没有父节点则返回null

 <div class="demo">

        <div class="box">

            <span class="erweima">×</span>

        </div>

    </div>

    <script>

        // 1. 父节点 parentNode

        var erweima = document.querySelector('.erweima');

        // var box = document.querySelector('.box');

        // 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null

        console.log(erweima.parentNode);

    </script>

4 - 子节点

（1）所有子节点

parentNode.childNodes (标准)

patrentNode.childNodes 返回指定节点的子节点的集合，该集合为即时更新的集合。

注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等。

如果只想要获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用childNodes。

（2）子元素节点

parentNode.children (非标准)

parentNode.children 是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回（重点）

虽然children是一个非标准，但是得到了各个浏览器的支持，因此可以放心使用。

    <ul>

        <li>我是li</li>

        <li>我是li</li>

        <li>我是li</li>

        <li>我是li</li>

    </ul>

    <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. children 获取所有的子元素节点 也是我们实际开发常用的

        console.log(ul.children);

    </script>

（3）第一个子节点

parentNode.firstChild

firstChild 返回的第一个子节点，找不到则返回null。同样，也是包含所有的节点。

（4）最后一个子节点

parentNode.lastChild

lastChild 返回最后一个子节点，找不到则返回null。同样也是包含所有的节点。

（5）第一个元素节点（兼容性问题）

parentNode.firstElementChild

firstElementChild 返回第一个子元素节点，找不到则返回null

（6）最后一个子元素节点（兼容性问题）

parentNode.lastElementChild

lastElementChild 返回最后一个子元素节点，找不到则返回null。

《！！！！！！！！！！注意兼容性问题 5、6 IE9以上才支持！！！！！！！！！》

实际开发中，firstChild 和 lastChild 包含其他节点，操作不方便，而 firstElementChild 和 lastElementChild 又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢？

解决方案：

1、如果想要第一个子元素节点，可以使用parentNode.children[0]

2、如果想要最后一个子元素节点，可以使用parentNode.children[parentNode.children.length - 1]

    <ol>

        <li>我是li1</li>

        <li>我是li2</li>

        <li>我是li3</li>

        <li>我是li4</li>

        <li>我是li5</li>

    </ol>

    <script>

        var ol = document.querySelector('ol');

        // 1. firstChild 第一个子节点 不管是文本节点还是元素节点

        console.log(ol.firstChild);

        console.log(ol.lastChild);

        // 2. firstElementChild 返回第一个子元素节点 ie9才支持

        console.log(ol.firstElementChild);

        console.log(ol.lastElementChild);

        // 3. 实际开发的写法  既没有兼容性问题又返回第一个子元素

        console.log(ol.children[0]);

        console.log(ol.children[ol.children.length - 1]);

    </script>

5 - 兄弟节点

（1）下一个兄弟节点

node.nextSibling

nextSilling 返回当前元素的下一个兄弟节点，找不到则返回null。

（2）上一个兄弟节点

node.previousSibling

previousSibling 返回当前元素上一个兄弟节点，占不到则返回null

 <div>我是div</div>

<span>我是span</span>

<script>

     var div = document.querySelector('div');

    // 1.nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等

    console.log(div.nextSibling);

    console.log(div.previousSibling);

    // 2. nextElementSibling 得到下一个兄弟元素节点

    console.log(div.nextElementSibling);

    console.log(div.previousElementSibling);

</script>

（3）下一个兄弟元素节点（有兼容性问题）IE9

node.nextElementSibling

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

（4）上一个兄弟元素节点（有兼容性问题）IE9

node.previousElementSibling

previousElementSibling 返回当前元素上一兄弟节点，找不到则返回null。

怎么解决兼容性问题呢？？

-- 自己封装一个兼容性函数（方法）

function getNextElementSibling（element）{

    var el = element;	//定义一个变量el接收传进来的element元素

    while(el = el.nextSibling){	//存在下一个兄弟节点则继续

        if(el.nodeType === 1)	//前文说到 如果是element则返回 1 所以判断nodeType返回值是否 === 1

        	return el;

    }

    return null;

}

6 - 创建节点

document.creatElement('tagName/elementName');

document.creatElement() 方法创建由tagName指定的HTML元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。

7 - 添加节点

（1）node.appendChild(child)

node.appendChild() 方法将一个节点添加到指定父节点的字节点列表末尾。类似于CSS里面的after伪元素。

（2）node.insertBefore(child, 指定元素)

node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。类似于CSS里面的before伪元素

    <ul>

        <li>123</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]);

        // 4. 我们想要页面添加一个新的元素 ： 1. 创建元素 2. 添加元素

    </script>

8 - 留言板

1、创建一个textarea button ul

2、在textarea里面输入内容，点击按钮，实现将内容添加到 ul 里面（需要创建并添加一个li）

3、新的留言在前面显示用insertBefore，在后面显示就用appendChild

<body>

    <textarea name="" id=""></textarea>

    <button>发布</button>

    <ul>

    </ul>

    <script>

        // 1. 获取元素

        var btn = document.querySelector('button');

        var text = document.querySelector('textarea');

        var ul = document.querySelector('ul');

        // 2. 注册事件

        btn.onclick = function() {

            if (text.value == '') {

                alert('您没有输入内容');

                return false;

            } else {

                // console.log(text.value);

                // (1) 创建元素

                var li = document.createElement('li');

                // 先有li 才能赋值

                li.innerHTML = text.value;

                // (2) 添加元素

                // ul.appendChild(li);

                ul.insertBefore(li, ul.children[0]);

            }

        }

    </script>

</body>