节点操作
节点的三个基本属性
节点类型nodeType
● 元素节点nodeType为1
● 属性节点nodeType为2
● 文本节点nodeType为3。(文本节点包括文字、空格、换行等)
节点名称nodeName
节点值nodeValue
节点层级
父级节点node.parentNode，获得的是最近的一级的父节点；若找不到则返回空null（要先获取子元素）
● 子节点parentNode.childNodes，返回包含指定节点的 子节点 的集合，注意是包含了元素节点，文本节点等（要先获取父元素）。若只想得到元素节点，则需要专门处理，所以一般不提倡使用childNodes
● 子节点parentNode.children，这是一个只读属性，返回所有的子元素节点(伪数组的形式)。他只返回子元素节点，其余类型的节点不返回
● 获取元素的第一个子节点parentNode.firstChild，找不到则返回null,注意是返回所有的子节点，包含元素节点，文本节点
● 获取第一个子元素节点parentNode.firstElementChild (有兼容性问题，IE9以上才支持)
● 获取元素的最后一个子节点parentNode.lastChild，找不到返回null
● 获取最后一个子元素节点parentNode.lastElementChild (有兼容性问题)
获取兄弟节点
node.nextSibling
● 返回当前元素的下一个兄弟节点，找不到就返回null。返回的节点包含所有类型的节点
node.previousSibling
● 返回当前元素的上一个兄弟节点
node.nextElementSibling
● 返回当前元素的下一个兄弟元素节点(兼容性问题，IE9以上才支持)
● node.previousElementSibling
● 返回当前元素的上一个兄弟元素节点
● parentNode.firstElementChild和parentNode.lastElementChild有兼容性问题，ie9以上才支持
动态创建元素节点
● document.createElement('tagName')，只创建是不能够看见的，还需要添加节点
添加节点
● node.appendChild(child)将一个节点添加到指定父节点的子节点集合的末尾(类似于css的after伪元素)
● node.insertBefore(child,指定元素) 将一个节点添加到父节点的指定子节点的前面(类似于css的before伪元素)
删除节点
● node.removeChild(child)，删除父节点node中的某个子节点，返回删除的节点
复制节点
node.cloneNode()返回调用该方法的节点的一个副本
● 括号内无参数或者参数为false，则为浅拷贝，只克隆节点本身，不会克隆里面的子节点(只复制标签不复制内容)
● node.cloneNode(true)为深拷贝，复制节点本身及里面所有子节点(既复制标签也复制内容)
创建和添加节点-->element.insertAdjacentHTML(position, text)
● element.insertAdjacentHTML - Web API 接口参考 | MDN (mozilla.org)
● position插入位置
● text插入的内容(要以字符串的形式)
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
