节点操作

• 节点概述​
• 节点层级
• • 父级节点
  • 子节点
  • • 所有子节点
    • 子元素节点
    • 第一个子节点
    • 最后一个子节点
    • 第一个元素节点
    • 最后一个元素节点
    • 常用
  • 兄弟节点
  • • 下一个兄弟节点
    • 上一个兄弟节点
• 创建节点
• 添加节点
• 删除节点
• 克隆节点
• 创建元素的三种方式
• • document.write()
  • innerHTML
  • creatElement（）

节点概述​

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

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

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

节点层级

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

父级节点

node.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>

子节点

所有子节点

parentNode.childNodes(标准)

parentNode.childNodes 返回包含指定节点的子节点的集合
该集合是即时更新的集合
注意 ： 返回值里面包含了所有的子节点 包括元素节点 文本节点等等；
如果只想要获取里面的元素节点 则需要专门的处理 所以我们一般不提倡使用childNodes

子元素节点

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>

第一个子节点

parentNode.firstChild

返回的是第一个子节点 找不到就返回null
同样也是包含了所有节点

最后一个子节点

parentNode.lastChild

返回的是最后一个子节点 找不到就返回null
同样也是包含了所有节点

第一个元素节点

parentNode.firstElementChild

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

最后一个元素节点

parentNode.lastElementChild

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

常用

实际开发中，firstChild 和 lastChild 包含其他节点，操作不方便，而 firstElementChild 和 lastElementChild 又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢？
解决方案
如果想要第一个子元素节点
可以使用 parentNode.children[0];
如果想要最后一个子元素节点
可以使用 parentNode.children[parentNode.children.length-1];

兄弟节点

下一个兄弟节点

 node. nextslibling 得到下一个兄弟元素节点 没有则返回null
``

```javascript
 node.nextElementSibling 得到下一个兄弟元素节点 没有则返回null

上一个兄弟节点

node.previousElementSibling 

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

创建节点

documen.createElement(创建的节点名字')

documen.createElement（）方法创建由tagName指定的HTML元素 因为这些元素原先是不存在 是根据我们的需求动态生成的 所以我们也称为 动态创建元素节点

添加节点

node.appendChild(child)

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

node.insertBefore(child,指定元素)

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

删除节点

node.removeChild() 

node.removeChild() 方法从node节点中删除一个子节点
返回删除的节点

<button>删除</button>
<ul>
    <li>熊大</li>
    <li>熊二</li>
    <li>光头强</li>
</ul>
<script>
    // 1.获取元素
    var ul = document.querySelector('ul');
    var btn = document.querySelector('button');
    // 2. 删除元素  node.removeChild(child)
    // ul.removeChild(ul.children[0]);
    // 3. 点击按钮依次删除里面的孩子
    btn.onclick = function() {
        if (ul.children.length == 0) {
            this.disabled = true;
        } else {
            ul.removeChild(ul.children[0]);
        }
    }
</script>

克隆节点

node.cloneNode()方法返回调用该方法的节点的一个副本
也被称为克隆节点/拷贝节点
需要注意的是
如果括号参数为空或者flase，则是浅拷贝 ，即只克隆复制节点本身 不克隆里面的子节点

如果括号参数为true , 则是深度拷贝 会复制节点本身以及里面的所有子节点

创建元素的三种方式

document.write()

document.write() 创建元素 如果页面文档流加载完毕，再调用这句话会导致页面重绘
可以理解为覆盖

innerHTML

效率低
将内容写入某个DOM节点 不会导致页面全部重绘
innerHTML 创建多个元素效率更 结构稍微复杂
innerHTML数组方式（效率高）

creatElement（）

效率一般
creatElement（） 创建多个元素效率稍低一点点 但是结构更加清晰