最近在学习JavaScript，写下人生第一篇随笔总结一下DOM的相关操作。
一、查找节点
getElementById：根据ID查找元素
var element = element.getElementById(id)
// id：目标元素ID的字符串
// 返回一个元素对象
getElementsByClassName：根据类名查找元素
var elements = element.getElementsByClassName(classNames)
// classNames：目标元素类名的字符串，多个类名用空格分开
// 返回一组元素对象（HTMLCollection）
getElementsByTagName ：根据标签查找元素
var elements = element.getElementsByTagName(tagName)
// tagName：目标元素标签名的字符串
// 返回一组元素对象（HTMLCollection）
getElementsByName ：根据元素的name属性查找
var elements = element.getElementsByName(name)
// name：目标元素name属性的值
// 返回一组元素对象（NodeList）
querySelector ：使用选择器查找单个元素
var element = element.querySelector(selectors)
// selectors：目标元素的CSS选择器字符串
// 返回第一个满足指定选择器组的元素
querySelectorAll ：使用选择器查找一组元素
var elementList = element.querySelectorAll(selectors)
// selectors：目标元素的CSS选择器字符串
// 返回一组满足指定选择器组的元素（non-live的NodeList）
二、创建节点
document.write：向文档流写入
document.write(text)
// text: 要写入文档的文本的字符串
document.write需要向文档流中写入内容，所以在已完成加载的文档上调用此方法会清空该文档的内容。
createElement：创建元素节点
var element = document.createElement(tagName)
// tagName: 要创建元素的类型的字符串
// 返回创建的元素对象
MDN文档上介绍此方法还有一个可选参数options，了解不多就不写上了。
createTextNode：创建文本节点
var text = document.createTextNode(text)
// text：要放入文本节点的内容
// 返回创建的文本节点
cloneNode：克隆一个节点
var dupNode = node.cloneNode(deep)
// node：将要被克隆的节点
// deep：可选。是否采用深度克隆
// 返回调用该方法的节点的一个副本
deep参数可传入true或false。如果为true，则该节点的所有后代节点也都会被克隆；如果为false，则只克隆该节点本身。
三、插入和删除节点
appendChild：在父节点末尾插入新节点
parentNode.appendChild(newNode)
// parentNode: 新插入节点的父节点
// newNode: 要追加给父节点（通常为一个元素）的节点
insertBefore：在某个子节点前插入新节点
parentNode.insertBefore(newNode, referNode)
// parentNode: 新插入节点的父节点
// newNode: 用于插入的节点
// referNode: 新节点将要插在这个节点之前
removeChild：删除子节点
parentNode.removeChild(childNode)
// parentNode: 要移除节点的父节点
// childNode: 要移除的子节点
四、修改节点属性
setAttribute：设置元素的属性值
element.setAttribute(name, value)
// name：属性名的字符串
// value：属性的值
getAttribute：获取元素的属性值
var attribute = element.getAttribute(name)
// name：目标属性名的字符串
// 返回目标属性值的字符串
removeAttribute：删除元素某个属性
element.removeAttribute(name)
// name：要删除的属性名的字符串
element.attribute：读写HTML元素的属性
element.style.property：读写HTML元素的样式
element.className：读写元素的类名
五、修改节点内容
element.innerHTML：读写元素的HTML内容，包括HTML标签，保留空格和换行
element.innerText：读写元素的文本，去除HTML标签、空格和换行
六、节点间关系
1.父子关系
node.parentNode：返回指定的节点在DOM树中的最近的父节点
node.childNodes：返回指定节点的子节点的集合（NodeList），包含元素节点和文本节点等
node.children：返回指定节点的子元素节点的集合（HTMLCollection）
node.firstChild：返回指定节点的第一个子节点，可能为元素节点或文本节点等
node.lastChild：返回指定节点的最后一个子节点，可能为元素节点或文本节点等
node.firstElementChild：返回指定节点的第一个子元素节点
node.lastElementChild：返回指定节点的最后一个子元素节点
2.兄弟关系
node.previousSibling：返回指定节点的前一个兄弟节点，可能为元素节点或文本节点等
node.nextSibling：返回指定节点的下一个兄弟节点，可能为元素节点或文本节点等
node.previousElementSibling：返回指定节点的前一个兄弟元素节点
node.nextElementSibling：返回指定节点的下一个兄弟元素节点