乔

节点概述

网页中所有的内容都是节点（标签、属性、文本、注释等），再DOM中，节点使用node来表示
HTML DOM树中的所有节点均可通过JavaScript进行访问，所有HTML元素（节点）均可被修改，也可以创建或删除

节点至少拥有nodeType（节点类型）、nodeName（节点名称）、nodeValue（节点值）这三个基本属性
节点操作主要操作的是元素节点

元素节点（所有的标签比如div，html是根节点） nodeType 为 1
属性节点（所有的属性比如class） nodeType 为 2
文本节点（所有的文本） nodeType 为 3 （文本节点包含文字、空格、换行等）

节点层级

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

子元素.parentNode

parentNode 属性可以返回某节点的父节点，是最近的一个父节点
如果指定的节点没有父节点则返回null

查找子级节点

// 标准
父元素.childNodes

// 如果只想要里面的元素节点，则需要专门处理 一般不提倡使用childNodes
let ul = document.querySelector('ul')
for(let i = 0; i < ul.childNodes.length; i++) {
    if (ul.childNodes[i].nodeType === 1) {
        // ul.childNodes[i] 是元素节点
        console.log(ul.childNodes[i])
    }
}

父元素.childNodes 返回包含指定节点的集合，该集合为即时更新的集合
返回的节点里面包含了所有的子节点，包括元素节点，文本节点等

常用

// 非标准
父元素.children

父元素.children是一个只读属性，返回所有的子元素节点，其他节点不返回
虽然children是个非标准，但是得到了各个浏览器的支持，因此可以放心使用

父元素.firstChild

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

父元素.lastChild

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

常用

父元素.firstElementChild

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

父元素.lastElementChild

lastElementChild 返回最后一个子元素节点，找不到则返回null
这两个方法有兼容性问题，IE9以上才支持
解决方法：如果想要第一个或最后一个子元素节点，可以使用

// 第一个子元素节点
父元素.chilren[0]
// 最后一个子元素节点
父元素.chilren[父元素.chilren.length - 1]

查找兄弟节点

父元素.nextSibling

nextSibling 返回当前元素的下一个兄弟节点（包含所有的节点），找不到则返回null

父元素.previousSibling

previousSibling 返回当前元素的上一个兄弟节点（包含所有的节点），找不到则返回null

常用

父元素.nextElementSibling

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

父元素.previousElementSibling

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

这两个方法有兼容性问题，IE9以上才支持解决方法：

funciton getElenemtSibling(element) {
    let el = element;
    while (el = el.nextSibling) {
        if (el.nodeType === 1) {
            return el;
        }
    }
    return null;
}

创建节点

document.createElement('标签名')

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

追加节点

父元素.appendChild(要添加的元素)

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

父元素.insertBefore(要添加的元素, 在那个元素前面)

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

删除节点

父元素.removeChild(要删除的元素)

父元素.removeChild(要删除的元素) 方法从DOM中删除父元素的一个节点，返回删除的节点
再JavaScript原生DOM操作中，要删除元素必须通过父元素删除
如不存在父子级关系则删除不成功

克隆节点（复制节点）

元素.cloneNode(布尔值)

元素.cloneNode(布尔值) 方法返回调用该方法的节点的一个副本
如果括号参数为true，则是深拷贝，即克隆复制节点本身，克隆里面的子节点
如果括号参数为空或false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点

三种动态创建元素区别

1) document.write() 是直接将内容写入页面的内容流，但是文档流执行完毕，则他回导致页面全部重绘
2) element.innerHTML 是将内容写入某个DOM节点，不会导致页面全部重绘，创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
3) document.createElement() 创建多个元素效率稍低一些，但是结构更清晰

JS-DOM节点操作