DOM
Js的主要组成成分：ECMAScript + DOM + BOM
(1) 这里说到的文档节点 html 不是html标签节点, 这里的文档节点 指的是 html文档节点（document）
(1) 节点：DOM将html文档中的所有内容 都抽象化为 节点
(2) 节点分类：标签节点、属性节点、注释节点、文本节点
(3) 获取子节点的方法
① childNodes
1) 用法：父节点.childNodes
2) 作用：获取到父节点中所有子节点
② children
1) 用法：父节点.children
2) 作用：获取父节点中的所有子元素节点
(1) DOM操作节点的方法
① nodeType 节点类型 可以获取到任意节点的类型
1) 用法：节点.nodeType
2) 作用：可以用来判断节点的类型
② nodeName 节点名称 可以获取到当前节点的名称
1) 用法：节点.nodeName
2) 一般多用于区分不同的标签节点 标签节点的节点名称 就是标签名(大写)
③ nodeValue 节点值 获取节点的内容
1) 用法：节点.nodeValue
2) 作用：可以获取到文本节点 和 注释节点的内容 但是 不能获取到标签节点的内容(得到的结果是null)
3) 用法：节点.nodeValue = “xxxx”
4) 作用：设置节点的内容
(1) parentNode：获取父节点
① 用法：节点.parentNode
② 可以获取到自身的直接父节点（父元素）
(2) offsetParent：获取带定位的父节点
① 用法：节点.offsetParent
② 可以获取到自身带定位的父节点（父元素）
③ 获取带定位的父元素 和 css中 定位的参考父元素 一样
(1) 获取上一个兄弟节点：previousSibling
① 用法：节点.previousSibling
② 作用：获取当前节点的上一个兄弟节点
(2) 获取下一个兄弟节点：nextSibling
① 用法：节点.nextSibling
② 作用：获取当前节点的下一个兄弟节点
(3) 获取上一个兄弟元素：previousElementSibling
① 用法：节点.previousElementSibling
② 作用：获取当前节点的 上一个 兄弟元素
(4) 获取下一个兄弟元素：nextElementSibling
① 用法：节点.nextElementSibling
② 作用：获取当前节点下一个兄弟元素
(5) previousElementSibling和nextElementSibling有兼容性问题 在ie浏览器中不能使用 但是 previousSibling 和 nextSibling可以在ie浏览器中使用
① 实现兼容 在ie中 使用 previousSibling 和 nextSibling 如果在标准浏览器中 就可以使用 previousElementSibling和nextElementSibling
② 兼容的方式：节点.previousElementSibling ||节点.previousSibling
1) 短路运算：当&& 和 || 的操作数 不是布尔值的时候 就是短路运算
2) 短路运算规则：短路运算算式的值 就是 算式中 起决定性作用的操作数的值
3) 例如：“abc” || 0
(1) 创建节点：
① createElement 创建标签节点
1) 用法：document.createElement(“要创建的标签名”)
② createTextNode 创建文本节点
1) 用法：document.createTextNode(“文本内容”)；
2) 一般 被innerText或innerHTML取代
(2) 追加节点
① appendChild 在父元素末尾追加节点
1) 用法：父节点.appendChild(要追加的子节点)
2) 如果追加的是页面上 已经存在的 元素 会产生 物理位移
② insertBefore 在指定参考元素的前面 插入节点
1) 用法：父节点.insertBefore(要插入的子节点，参考子节点)
2) 如果追加的是页面上 已经存在的 元素 会产生 物理位移
(1) remove 删除指定的元素
① 用法：节点.remove()
② 节点被删除后 无法恢复。
(2) removeChild 删除指定的子节点
① 用法：父节点.removeChild(指定的子节点)
(1) cloneNode 克隆节点
① 用法1：节点.cloneNode()
1) 注意：在克隆标签节点的时候 只能克隆标签 不能克隆内容
② 用法2：节点cloneNode(true);
1) 注意：传入true后 则可以克隆节点及内容 如果不传参和传入false是一样的
(2) replaceChild 替换节点
① 用法：父节点.replaceChild(用来替换的新节点，要被替换的旧节点);
② 作用：使用新节点替换旧节点
(1) querySelector 获取节点
① 用法：document/父元素.querySelector(“css3选择器”)
② 如果满足选择器条件的 有 多个节点 就会 获取第0个满足条件的节点
(2) querySelectorAll 获取节点的集合
① 用法：document/父元素.querySelectorAll(“css3选择器”)
② 获取所有满足选择器条件的节点 得到一个节点的集合
(3) 注意：这两个方法 在ie8- 浏览器中 不支持
(1) 操作元素属性
① 获取 ： 元素.属性名 设置 ： 元素.属性名 = “xxxx” 这种操作方式 不能操作元素非自带属性 和 自定义属性
② getAttribute 获取属性值
1) 用法：元素.getAttribute(“属性名”)；
2) 可以获取到 任意类型的属性（自定义属性 和 非自带属性）
③ setAttribute 设置属性值
1) 用法：元素.setAttribute(“属性名”,”属性值”)
(1) 获取thead：table.tHead
(2) 获取tbody: table.tbodies
① 得到的是一个伪数组 数组中 存放着所有的tbody 如果想得到某一个 需要加索引
(3) 获取tfoot：table.tFoot
(4) 获取tr: table/thead/tbody/tfoot.rows
① 得到的是一个包含所有满足条件的行的伪数组 要想得到某一行 需要加索引
(5) 获取td：tr.cells
① 注意：我们只能获取一行中的单元格
原文：https://www.cnblogs.com/wmhh/p/13728787.html