什么是DOM对象
DOM对象是文档对象模型,是基于浏览器编程一套API接口,通过它,我们可以访问HTML文档对象属性、方法、事件,还可以对其进行操作。
JavaScript操作DOM
分为三类
- DOM Core
- HTML-DOM
- CSS-DOM
节点关系
父节点:parentNode
文本关系如下:
<div id="div1">
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
</div>
parentNode是指定节点的父节点.一个元素节点的父节点可能是一个元素节点,也可能是一个文档节点,或者是个文档碎片节点.
每一个节点都有一个parentNode属性。
子节点:childNodes
childNodes 返回包含指定节点的子节点的集合,该集合为即时更新的集合。
即时更新就是对节点元素的任意修改都会立即反映到结果里。
兄弟节点:nextSibling,previousSibling
nextSibling返回某节点的下一个兄弟节点,previousSibling返回某节点的上一个兄弟节点,没有的话返回null。
可能因为元素换行的原因返回的是text节点。
节点元素关系
只算元素,不算文本节点。
children: 返回所有元素子节点
nextElementSibling:返回元素的下一个兄弟元素节点
previousElementSibling: 返回元素的上一个兄弟元素节点
节点操作
appendChild()
appendChild()用于向childNodes列表的末尾添加一个节点,并且返回这个新增的节点。
如果传入到appendChild()里的节点已经是文档的一部分了,那结果就是将节点从原来的位置转移到新位置,任何一个节点不能同时出现在文档中的多个位置。
var returnNode = someNode.appendChild(someNode.firstChild); // 返回第一个节点
console.log(returnNode === someNode.firstChild); // false
console.log(returnNode === someNode.lastChild); // true
替换节点: replaceChild()
replaceChild()接受两个参数:要插入的节点和要被替换的节点。被替换的节点将由这个方法返回并从文档中被移除,同时由要插入的节点占据其位置。
// 替换第一个子节点
var returnNode = someNode.replaceChild(newNode, someNode.firstChild);
使用replaceChild()后,被替换的节点的所有关系指针都会被复制到插入的节点上面。
删除节点:removeChild()
该方法移除节点,接受一个参数,即要移除的节点,同时该方法返回被移除的节点。只能是一个节点,不能是一组节点。
// 移除第一个子节点
var returnNode = someNode.removeChild(newNode, someNode.firstChild);
克隆节点:cloneNode(true/false)
返回调用该方法的节点的一个副本。参数表示是否采用深度克隆,如果为true,则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身,文本或者换行、空格这些不会复制,因为他们都是一个textNode。