一、Node
1.节点关系
每个节点都有一个 childNodes 属性，其中包含一个 NodeList 实例。
const $app = document.getElementsByClassName('app')[0]
console.log($app.childNodes)
- previousSibling
- nextSibling
- firstChild
- lastChild
- childNodes[n] / childNodes.item(n)
- parentNode
2.操纵节点
加入节点
appendChild（）
insertBefore（要插入的节点，参照节点）
let returnNode = someNode.appendChild(someNode.firstChild)
returnNode = someNode.insertBefore(newNode,null)
代替节点
replaceChild（插入的节点，要替换的节点）
// 代替第一个节点
let returnNode = someNode.replaceChild(newNode,someNode.firstChild)
删除节点
removeChild（）
someNode.removeChild(someNode.firstChild)
克隆节点
cloneNode(bool)
true: 深复制，复制节点及整个子DOM树。
false：浅复制，只复制调用该方法的节点。
二、document类型
文档信息：
- document.title // 读取文档标题
- document.URL // 读取完整URL
- document.domain // 取得域名
- document.referrer // 取得来源
特殊集合：
- document.anchors // 获取带name属性的a标签
- document.forms // 获取文档中所有form元素
- document.images
- document.links // 获取带href属性的a元素
文档写入：
- document.wirte（）
- document.open（）
- doxument.close（）
三、Element类型
属性：
- getAttribute
- setAttribute（属性名，属性值）
- removeAttribute
四、操作表格
- caption
- tBodies
- tFoot
- tHead
- rows
- createTHead
- createTFoot
- insertRow
- rows
- cells
- insertCell
let table = document.createElement('table')
table.border = 1
table.width = "100%"
let tbody = document.createElement('tbody')
table.appendChild(tbody)
tbody.insertRow(0)
tbody.rows[0].insertCell(0)
tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1, 1"))
tbody.rows[0].insertCell(1)
tbody.rows[0].cells[1].appendChild(document.createTextNode("celll 2, 1"))
五、搜索
querySelector（CSS选择符） // 匹配该模式的第一个后代元素
let $app = document.querySelector(".app") // 取得类名为app的第一个元素
querySelectorAll（） // 返回所有匹配的项
六、元素遍历
- childElementCount
- firstElementChild
- lastElementChild
- previousElementSibling
- nextElementSibling