JavaScript DOM节点操作

目录

父节点、子节点、兄弟节点

创建元素

删除标签

父节点、子节点、兄弟节点

子节点

childNodes： 获取当前节点的所有子节点（包括元素节点和文本节点）。

children： 获取当前节点的所有元素子节点（不包含文本节点）。

firstChild： 获取第一个子节点，包括回车等文本节点；

firstElementChild： 获取第一个元素节点。 不含文本节点；

lastChild： 获取最后一个子节点，包括回车等文本节点；

lastElementChild： 获取最后一个子节点，不含文本节点；

父节点

parentNode: 获取当前节点的父节点。

兄弟节点

previousSibling： 获取当前节点的前一个兄弟节点，包括文本节点；

previousElementSibling： 获取当前节点的前一个元素兄弟节点；

nextSibling：获取当前节点的后一个兄弟节点，包括文本节点；

nextElementSibling：获取当前节点的后一个元素兄弟节点；

创建新HTML元素

如需向HTML DOM 添加新元素，你必须首先创建这个元素，然后将其追加到已有元素。

案例：

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("这是新文本。");
para.appendChild(node);

var element = document.getElementById("div1");
element.appendChild(para);
</script>

案例说明：

1. 下面代码创建了一个新的<p>元素

var para = document.createElement("p");　

2. 如需向<p>元素添加文本，则必须首先创建文本节点。下面代码创建文本节点

var node = document.createTextNode("这是一个新段落。");

　　然后需要向<p>元素追加新文本节点

para.appendChild(node);

3. 最后向已有的元素中添加该元素

　　获取一个已有元素

var element = document.getElementById("div1");

　　向已有元素中添加新的元素

element.appendChild(para);

删除已有HTML元素

删除某个HTML元素，你需要知晓该元素的父元素。

案例：

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>