原生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选择器 获取的是一组元素