一.遍历节点树（非方法类操作）

1.parentNode  获取父节点；

2.childNodes  子节点们 类数组； 包括文本节点，元素节点，注释节点，属性节点；

    通过nodeType区分

3.firstChild/lastChild  第一个子节点/最后一个子节点

4.nextSibling/previousSibling 后一个兄弟节点/前一个兄弟节点

二.遍历元素节点树

1.parentNode 父节点；

2.children   元素子节点

3.childElementCount === children.length 元素子节点的个数

4.firstElementChild/lastElementChild 第一个元素子节点/最后一个元素子节

5.nextElementSibling/previousElementSibling 后一个兄弟元素节点/前一个兄 弟元素节点

备注：以上遍历节点树的方法所有浏览器都兼容，但是遍历元素节点树的方法除 children 以外，ie9 及以下的浏览器都不兼容

三.节点四个属性

1..nodeName 元素的标签 只读;

2.nodeValue text 节点或 comment 节点的文本内容，可读写;

3.nodeType 该节点的类型，只读;

4.attributes 元素节点的属性集;

5.判断是有子节点 Node.hasChildNodes()；

四.dom 结构树

1.DOM 基本操作 

增：

1）创建元素节点（即创建标签）：document.createElement()；

2）创建文本节点：document.createTextNode()；

3）创建注释节点：document.createComment()；

4）创建文档碎片节点：document.createDocumentFragment()

插：

1）appendChild() ；类似push 还有剪切功能；

2）父级.insertBefore(a, b)  （insert a before b）；

删：

1）父级.removeChild() 父级删除自己的子节点；

2）e.remove 自杀 删除自己

替换

1）父级.replaceChild(new, origin)  ；

元素的一些属性：innerHTML innerText

例子：封装inserBefore方法 

Element.prototype.insertAfter = (newEle,targrtEle)=>{    let targetbefore = targrtEle.nextElementSibling;    targetbefore?this.appendChild(newEle):this.insertBefore(newEle,targetbefore);}