一、获取子节点
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选择器 获取的是一组元素