js 节点基础

获取节点

1、获取子节点 childNodes属性会获取包括文本节点在内的所有节点

DOM标准，标签间的空白也会被当成文本节点

<ul>

        <li></li>

</ul>

<script>

        var ul = document.querySelector('ul')

        console.log(ul.childNodes);  // [text, li, text]

</script>

2、获取子元素 children属性可以获取当前元素的所有子元素，不包括空白文档了

<ul>

        <li></li>

</ul>

<script>

        var ul = document.querySelector('ul')

        console.log(ul.children);  // [ li ]

</script>

3、获取第一个子节点 firstChild 第一个子节点(包括空白的文本节点)

<ul>

        <li class="li1"></li>

        <li class="li2"></li>

        <li class="li3"></li>

</ul>

<script>

        var ul = document.querySelector('ul')

        console.log(ul.firstChild);  // #text

</script>

注：因为ul后面第一个子节点时空白内容，所text，如果li标签紧挨着ul就会返回第一个li标签

4、获取第一个子元素 firstElementChild 获取当前元素的第一个子元素

<ul>

        <li class="li1"></li>

        <li class="li2"></li>

        <li class="li3"></li>

</ul>

<script>

        var ul = document.querySelector('ul')

        console.log(ul.firstElementChild);  // <li class="li1"></li>

</script>

5、获取父节点 parentNode 返回元素的父节点

<ul>

        <li class="li1"></li>

        <li class="li2"></li>

        <li class="li3"></li>

</ul>

<script>

        var li = document.querySelector('.li1')

        console.log(li.parentNode);  // <ul></ul>

</script>

6、获取父元素 parentElement 返回元素的父元素

<ul>

        <li class="li1"></li>

        <li class="li2"></li>

        <li class="li3"></li>

</ul>

<script>

        var li = document.querySelector('.li1')

        console.log(li.parentElement);  // <ul></ul>

</script>

7、获取兄弟节点 previousSibling 返回前一个兄弟节点 也有可能获取到空白的文本

<ul>

        <li class="li1"></li>

        <li class="li2"></li>

        <li class="li3"></li>

</ul>

<script>

        var li = document.querySelector('.li2')

        console.log(li.previousSibling);  // #text

</script>

8、获取兄弟元素 previousElementSibling 返回前一个兄弟元素，不包括空白文本，注意：不支持ie8及以下的浏览器

<ul>

        <li class="li1"></li>

        <li class="li2"></li>

        <li class="li3"></li>

</ul>

<script>

        var li = document.querySelector('.li2')

        console.log(li.previousElementSibling);  //  <li class="li1"></li>

</script>

9、获取后一个兄弟节点 nextSibling 返回后·一个兄弟节点 也有可能获取到空白的文本

<ul>

        <li class="li1"></li>

        <li class="li2"></li>

        <li class="li3"></li>

</ul>

<script>

        var li = document.querySelector('.li2')

        console.log(li.nextSibling);  //  #text

</script>

10、获取后一个兄弟元素 nextElementSibling 返回后一个兄弟元素，不包括空白文本

<ul>

        <li class="li1"></li>

        <li class="li2"></li>

        <li class="li3"></li>

</ul>

<script>

        var li = document.querySelector('.li2')

        console.log(li.nextElementSibling);  //  <li class="li3"></li>

</script>

操作节点

1、创建节点     docment.createElement('节点')

<ul>

        <li class="li1"></li>

</ul>

<script>

        var li = document.createElement('li')

        console.log(li);  //  <li></li>

</script>

2、创建文本   document.createTextNode()可以用来创建一个文本节点对象

<ul>

        <li class="li1"></li>

</ul>

<script>

        var litext = document.createTextNode('li文本')

        console.log(litext);  //  'li文本'

</script>

3、添加节点

father.appendChild(child)  追加元素  

在父元素里的子元素最后添加一个节点

<ul>

        <li class="li1"></li>

</ul>

<script>

        var ul = document.querySelector('ul')

        var li = document.createElement('li')

        ul.appendChild(li)

        console.log(ul);  

    </script>

father.insertBefore(child,指定元素)

在父元素里的指定节点前添加一个节点

<ul>

        <li class="li1"></li>

</ul>

<script>

        var ul = document.querySelector('ul')

        var li1 = document.querySelector('.li1')

        var li = document.createElement('li')

        ul.insertBefore(li,li1)

        console.log(ul);  

</script>

4、替换节点     replaceChild()  

父节点.replaceChild(新节点，旧节点)

<ul>

        <li class="li1"></li>

</ul>

<script>

        var ul = document.querySelector('ul')

        var li1 = document.querySelector('.li1')

        var li = document.createElement('li')

        ul.replaceChild(li, li1)

        console.log(ul);  

</script>

5、删除节点    father.removeChild(child)  / child.parentNode.removeChild(child)

<ul>

        <li class="li1"></li>

        <li class="li2"></li>

</ul>

<script>

        var ul = document.querySelector('ul')

        var li1 = document.querySelector('.li1')

        // ul.removeChild(li1)

        li1.parentNode.removeChild(li1)

        console.log(ul);  

</script>

6、克隆节点  

node.cloneNode() 返回调用该方法的节点的一个副本

参数：布尔值

false  浅拷贝，只克隆节点本身，不克隆里面的子节点

true   深拷贝，拷贝节点，拷贝内容

<ul>

        <li class="li1">123</li>

</ul>

<script>

        var li1 = document.querySelector('.li1')

        console.log(li1.cloneNode(true));   //   <li class="li1">123</li>

        console.log(li1.cloneNode(false));  //  <li class="li1"></li>

</script>