1.parentNode获取父节点

 

2.childNodes子节点：包含了文本节点 元素节点

  childNodes.length 子节点个数

  firstChild 第一个子节点   lastChild 最后一个子节点

 

nextSibling:下一个兄弟节点

 

previousSibling:上一个兄弟节点

 

 

 

nextSibling:下一个兄弟节点

previousSibling:上一个兄弟节点

 

 

 

 

 

 

  attributes返回元素节点的属性集合

 

3.  元素节点操作：基于节点树来操作元素节点，除了children,其余 IE9及以下都不兼容

children是所有子元素节点

 

 

自定义获取所有元素节点的方法：

单独定义 child 与 len 是为了不用每次循环都要去获取一次，节约性能，加快查询速度

 

 

 

 

 

4.新增创建节点：只能在document上使用

 

 

 

 

 

5.添加节点

 

m.appendChild(n),将n 节点添加到m里的节点最后，如果n已经存在，会把原来位置的n剪切到m节点的最后，返回新添加的节点

 

 

 

m.insertBefore(a,b) 在m里将a插入到b的前面

 

 

 

插入到最前面 b为children[0]

 

 

 

 

 

6.删除节点 removeChild(n)  返回被删除的节点,父节点删除指定字节点会返回子节点，因此用appendChild可以重新添加

 子节点自己 remove()自己删除无法找回，因为不反悔被删除的自己

 

 

 

 

7.替换  replaceChild(a,b) 用a来替换b，返回被替换的b

 

 

8.判断有无子节点 hasChildNodes():即使有个空格也算text节点

 

 

9.节点的属性

1.innerHTML 获取内部标签

利用innerHTML来添加标签

 

 

 

 

2.innerText  获取内部标签里的文本内容

 

 

 

利用innerText来添加文本内容·，不会解析标签

 

outHTML 把自己的标签也算上

outText  没啥变化 相当于innerText