JS结点操作

1，获取父节点

node.parentNode

获取离元素最近的一个父节点，若没有则返回null。
2，获取子结点

node.childNodes

返回值里面包含了所有结点，包括元素节点，文本节点等
例如：

<div>//这里的换行是一个文本节点nodeType为3
    <p>hello</p>//这里是一个元素节点nodeType为1，p之后又是一个换行，为文本节点
</div>
</body>
<script>
    var a = document.querySelector('div');
    console.log(a.childNodes);
</script>

node.children

此方法只返回元素节点且各个版本浏览器都支持，在其后加入数组索引号可以获取对应的子节点如node.children[0]获取第一个子节点。

3，获取兄弟节点

node.nextSibling

获取元素的下一个兄弟节点，此方法包含文本节点或元素节点等等。

node.previousSbiling

获取元素的上一个兄弟节点，此方法包含文本节点或元素节点等等。

node.nextElementSbiling

获取元素的下一个兄弟节点，此方法只返回元素节点但只支持i9以上版本

node.previousElementSibling

获取元素的上一个兄弟节点，此方法只返回元素节点但只支持i9以上版本

解决兼容性问题并只获取元素节点的方法

function getNext(element){
        var el = element;
        while (el = el.nextSibling){
            if (el.nodeType === 1){
                return el;
            }
        }
        return null;
    }

4，创建节点

document.creatElement('tagName')

该方法创建由tagName指定的元素，创建完节点之后并不能在页面上显示，还需要在页面上添加节点。

5，添加节点

node.appendChild(child)

将一个节点添加到指定的父节点的子节点末尾。node（父级），child（子级即刚创建的节点）

node.insterBefore(child,指定元素）

该方法将一个节点添加到父节点的指定子节点前面。

6，删除节点

node.removeChild(child)

从DOM中删除一个子节点，并返回删除的子节点

7，复制节点

node.cloneNode();

括号里面为空或者为false时为浅拷贝，只复制标签不复制里面的内容。
括号里面为true时为深拷贝，不仅复制标签也复制里面的内容。
克隆节点之后需要进行添加节点操作才能显示。