JavaScript操作DOM对象

什么是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。