创建和插入元素
创建DOM元素
Document.createElement()
在一个HTML文档中, Document.createElement()方法用于创建指定的HTML元素
当指定未定义的元素时， 创建一个HTMLUnknownElement
var div = document.createElement('div');
Node.appendChild()
将一个节点插入到指定的父节点的最末尾处(也就是成为了这个父节点的最后一个子节点).
语法
var child = node.appendChild(child);
- node 是要插入子节点的父节点.
- child 即是参数又是这个方法的返回值.
示例
// 创建一个新的段落p元素,然后添加到body的最尾部
var p = document.createElement("p");
document.body.appendChild(p);
例子：留言板插入内容
插入元素
Node.insertBefore()
在当前节点的某个子节点之前再插入一个子节点
语法
var insertedElement = parentElement.insertBefore(newElement, referenceElement);
如果referenceElement为null则newElement将被插入到子节点的末尾。
如果newElement已经在DOM树中，newElement首先会从DOM树中移除
- insertedElement 是被插入的节点，即 newElement
- parentElement 是新插入节点的父节点
- newElement 是被插入的节点
- referenceElement 在插入newElement之前的那个节点
示例 1
<div id="parentElement">
<span id="childElement">foo bar</span>
</div>
<script>
var sp1 = document.createElement("span");
var sp2 = document.getElementById("childElement");
var parentDiv = sp2.parentNode;
// Insert the new element into the DOM before sp2
parentDiv.insertBefore(sp1, sp2);
</script>
没有 insertAfter 方法。可以使用 insertBefore 方法和 nextSibling 来模拟它。
在前一个例子中，可使用下面代码将 sp1 插入到 sp2 后面：
parentDiv.insertBefore(sp1, sp2.nextSibling);
如果 sp2 没有下一个节点，则它肯定是最后一个节点，则 sp2.nextSibling 返回 null，且 sp1 被插入到子节点列表的最后面（即 sp2 后面）。
示例 2
在第一个子元素的前面插入一个元素，可使用 firstChild 属性。
var parentElement = document.getElementById('parentElement');
var theFirstChild = parentElement.firstChild;
var newElement = document.createElement("div");
parentElement.insertBefore(newElement, theFirstChild);
当元素没有首节点时，firstChild 返回 null。该元素仍然会被插入到父元素中，位于最后一个节点后面。又由于父元素没有第一个子节点，也没有最后一个子节点。 最终，新元素成为唯一的子元素。
例子：倒序留言板插入内容
删除和替换元素
删除DOM元素
Node.removeChild
语法
从某个父节点中移除指定的子节点,并返回那个子节点.
var oldChild = node.removeChild(child);
- child 是要移除的那个子节点.
- node 是child的父节点.
- oldChild 和child指向同一个节点,即oldChild === child.
被移除的这个子节点仍然存在于内存中,只是没有添加到当前文档的DOM树中,因此,你还可以把这个节点重新添加回文档中,当然,实现要用另外一个变量比如上例中的oldChild来保存这个节点的引用.
如果上例中的child节点不是node节点的子节点,则该方法会抛出异常.
示例
<!--示例HTML代码-->
<div id="top" align="center">
<div id="nested"></div>
</div>
<script>
// 先定位父节点,然后删除其子节点
var d = document.getElementById("top");
var d_nested = document.getElementById("nested");
var throwawayNode = d.removeChild(d_nested);
// 无须定位父节点,通过parentNode属性直接删除自身
var node = document.getElementById("nested");
if (node.parentNode) {
node.parentNode.removeChild(node);
}
// 移除一个元素节点的所有子节点
var element = document.getElementById("top");
while (element.firstChild) {
element.removeChild(element.firstChild);
}
</script>
替换DOM元素
Node.replaceChild
用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。
语法
replacedNode = parentNode.replaceChild(newChild, oldChild);
- newChild 用来替换 oldChild 的新节点。如果该节点已经存在于DOM树中，则它会被从原始位置删除。
- oldChild 被替换掉的原始节点。
- replacedNode 和oldChild相等。
例子
// <div>
// <span id="childSpan">foo bar</span>
// </div>
// 创建一个空的span元素节点
// 没有id,没有任何属性和内容
var sp1 = document.createElement("span");
// 添加一个id属性,值为'newSpan'
sp1.setAttribute("id", "newSpan");
// 创建一个文本节点
var sp1_content = document.createTextNode("新的span元素的内容.");
// 将文本节点插入到span元素中
sp1.appendChild(sp1_content);
// 获得被替换节点和其父节点的引用.
var sp2 = document.getElementById("childSpan");
var parentDiv = sp2.parentNode;
// 用新的span元素sp1来替换掉sp2
parentDiv.replaceChild(sp1, sp2);
// 结果:
// <div>
// <span id="newSpan">新的span元素的内容.</span>
// </div>
其他
Node.hasChildNodes()
Node.hasChildNodes方法返回一个布尔值，表示当前节点是否有子节点。
var foo = document.getElementById("foo");
if (foo.hasChildNodes()) {
foo.removeChild(foo.childNodes[0]);
}
一个例子： 遍历当前节点的所有后代节点
function DOMComb(parent, callback){
if( parent.hasChildNodes() ){
for(var node=parent.firstChild; node; node=node.nextSibling){
DOMComb(node, callback);
}
}
callback(parent);
}
Node.cloneNode()
Node.cloneNode方法用于克隆一个节点。它接受一个布尔值作为参数，表示是否同时克隆子节点，默认是false，即不克隆子节点。
var cloneUL = document.getElementsByTagName('ul')[0].cloneNode(true);
需要注意的是，克隆一个节点，会拷贝该节点的所有属性，但是会丧失addEventListener方法和on-属性（即node.onclick = fn），添加在这个节点上的事件回调函数。
克隆一个节点之后，DOM树有可能出现两个有相同ID属性（即id="xxx"）的HTML元素，这时应该修改其中一个HTML元素的ID属性。
Node.remove()
Element.remove方法用于将当前元素节点从DOM树删除。
var el = document.getElementById('div-01');
el.remove();
网友评论