原生js一些操作DOM的方法

一、获取子节点

1、childNodes  获取子节点  可以获取到文本节点如空格。

2、children   只获取子元素节点（即html标签） 常用。

3、firstChild   获取第一个子节点。

4、firstElementChild   获取第一个子元素节点  常用。

二、获取父节点

parentNode   获取一个父节点

三、获取兄弟节点

1、nextSibling   下一个兄弟节点  高级浏览器可以获取到文本节点

2、nextElementSIbling   获取下一个兄元素节点  常用

3、previousSibling     上一个兄弟节点  高级浏览器可以获取到文本节点

4、previousElementSibling   获取上一个兄弟元素节点  常用

四、创建元素节点

1、innerHTML 

例：父节点.innerHTML = '<li></li>'

2、createElement    只有document才能创建元素

例：oLi = document.creatElement('li')

五、插入

1、appendChild   追加    剪切式插入，向父元素里添加   添在已有子元素的后面。

例：父节点.appendChild(oLi)

2、insertBefore()   剪切式插入，向父元素里添加   添在特定子元素的前面。

例：父节点.insertBefore(a,b)

把a插到b前面  如果b为null默认执行appendChild()

六、删除元素

父节点.removeChild()

七、替换元素

replaceChild(新节点，旧节点)

八、DOM方法

document.querySelector(‘选择器’);             css选择器 获取的是一个元素

document.querySelectorAll(‘选择器’);           css选择器 获取的是一组元素