节点操作
var body = document.body; var div = document.createElement('div'); body.appendChild(div); var firstEle = body.children[0]; body.insertBefore(div,firstEle); body.removeChild(firstEle); var text = document.createElement('p'); body.replaceChild(text, div);
节点层级
重点讲父子属性,兄弟属性画图讲解
var box = document.getElementById('box'); console.log(box.parentNode); console.log(box.childNodes); console.log(box.children); console.log(box.nextSibling); console.log(box.previousSibling); console.log(box.firstChild); console.log(box.lastChild);
- 注意
childNodes和children的区别,childNodes获取的是子节点,children获取的是子元素
nextSibling和previousSibling获取的是节点,获取元素对应的属性是nextElementSibling和previousElementSibling获取的是元素
nextElementSibling和previousElementSibling有兼容性问题,IE9以后才支持
总结
节点操作,方法 appendChild() insertBefore() removeChild() replaceChild() 节点层次,属性 parentNode childNodes children nextSibling/previousSibling firstChild/lastChild