DOM
全称：
document object model (文档对象模型)
作用：
使JavaScript有能力与“文档”交互：
查找文档中的元素、添加、修改、删除、克隆节点…
查找元素节点：
注意点：HTML标签中的class属性名，在js代码中使用className属性来调用。
//根据元素的Id查找。
//如果存在指定id的元素，则返回该元素的DOM对象，如果不存在，则返回null。
document.getElementById()
//根据标签名查找
//返回HTMLCollection集合（类似于数组的对象）
document.getElementsByTagName()
//根据类名查找，ES5中新增的方法
//返回集合，集合中包含查找到的DOM元素
document.getElementsByClassName()
//根据元素的name属性值查找
document.getElementsByName()
//在指定的element元素后代中根据标签/类名查找
element.getElementsByTagName()
element.getElementsByClassName()
//查找满足条件的第一个选择器
document.querySelector(selector)
//查找满足条件的所有选择器
document.querySelectorAll(selector)
创建、添加元素以及设置获取元素属性
//创建元素节点
let element = document.createElement('tagName');
//创建文本节点
let txt = document.createTextNode(text);
//属性：
//设置attrName属性
element.setAttribute(attrName, attrValue);
element.<attrName> = attrValue;
//获取attrName属性
let attrValue = element.getAttribute(attrName);
let attrValue = element.<attrName>;
//注意：元素的标签使用class类名，element.className与element.setAttribute('class', 'xxx')
//获取/设置元素内部的HTML文本
element.innerHTML
//获取/设置元素内部的纯文本
element.innerText
//添加到父元素中：
//将element添加到parentElement内部末尾
parentElement.appendChild(element);
//将element添加到parentElement内部oldNode节点之前，如果oldNode不存在，则追加到parentElement内部末尾
parentElement.insertBefore(element, oldNode);
//注意：如果待添加到父容器中的element是页面中已存在元素，则appendChild()和insertBefore()也是实现元素移动的操作
appendChild的注意点:
- appendChild()会把dom之前所在的位置移除掉
删除元素：
parentElement.removeChild(child)
替换元素：
// replaceChild方法用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。
parentElement.replaceChild(newChild, oldChild);
参数注意点：
newChild
用来替换 oldChild 的新节点。如果该节点已经存在于 DOM 树中，则它首先会被从原始位置删除。
oldChild
被替换掉的原始节点。
克隆元素
//boolean表示是否克隆后代节点
//true表示克隆后代，false不克隆后代，默认为false
node.cloneNode(boolean)
节点筛选
//查找父节点：
node.parentNode
//查找子节点：
//会包括所有的孩子文本节点与元素节点
element.childNodes
//只包括所有孩子元素节点
element.children
//元素的第一个孩子节点，回车换行也会被算为文本节点
element.firstChild
//元素的最后一个孩子节点，回车换行也会被算为文本节点
element.lastChild
//兄弟节点：
previousSibling
nextSibling
节点属性
//节点名称：
node.nodeName
//文本节点：
#text
//元素节点：
//标签名大写状态，例如：DIV
//节点类型：
node.nodeType
//返回数字：
//1 --元素节点
//3 -- 文本节点
//节点值：
node.nodeValue
//文本节点：文本值
//元素节点：null
