JS DOM操作 – JavaScript教程

上一章JavaScript教程请查看：JS DOM属性操作

在本教程中，你将学习如何在JavaScript中操作元素。

在JavaScript中操作DOM元素

现在你已经了解了如何选择和样式HTML DOM元素。在本章中，我们将学习如何动态地添加或删除DOM元素，获取它们的内容，等等。

向DOM添加新元素

可以使用document. createelement()方法显式地在HTML文档中创建新元素。该方法创建一个新元素，但不将其添加到DOM；你必须在一个单独的步骤，如下面的例子所示:

<div id="main">
    <h1 id="title">Hello World!</h1>
    <p id="hint">段落文本</p>
</div>
 
<script>
// 创建一个新的div元素
var newDiv = document.createElement("div");
 
// 创建一个文本节点
var newContent = document.createTextNode("Hi, how are you doing?");
 
// 将文本节点添加到新创建的div中
newDiv.appendChild(newContent);
 
// 将新创建的元素及其内容添加到DOM中
var currentDiv = document.getElementById("main"); 
document.body.appendChild(newDiv, currentDiv);
</script>

方法的作用是：在指定父节点的任何其他子节点的末尾添加新元素。但是，如果希望在任何其他子元素的开头添加新元素，可以使用insertBefore()方法，如下面的示例所示

<div id="main">
    <h1 id="title">Hello World!</h1>
    <p id="hint">文本段落</p>
</div>
 
<script>
// 创建一个新的div元素
var newDiv = document.createElement("div");
 
// 创建一个文本节点
var newContent = document.createTextNode("Hi, how are you doing?");
 
// 将文本节点添加到新创建的div中
newDiv.appendChild(newContent);
 
// 将新创建的元素及其内容添加到DOM中
var currentDiv = document.getElementById("main"); 
document.body.insertBefore(newDiv, currentDiv);
</script>

获取或设置HTML内容到DOM

还可以使用innerHTML属性轻松获取或设置HTML元素的内容，此属性设置或获取元素中包含的HTML标记，即元素的开始和结束标记之间的内容，检查下面的例子，看看它是如何工作的:

<div id="main">
    <h1 id="title">Hello World!</h1>
    <p id="hint">文本段落</p>
</div>
 
<script>
// 获取内部HTML内容
var contents = document.getElementById("main").innerHTML;
alert(contents); 
 
// 设置内部HTML内容
var mainDiv = document.getElementById("main");
mainDiv.innerHTML = "<p>这是 <em>新插入</em> 的文本.</p>";
</script>

可以看到，使用innerHTML属性可以很容易地将新元素插入DOM，但是有一个问题，innerHTML属性替换了元素的所有现有内容。因此，如果希望在不替换元素现有内容的情况下将HTML插入到文档中，可以使用insertAdjacentHTML()方法。

该方法接受两个参数:要插入的位置和要插入的HTML文本。位置必须是以下值之一:“beforebegin”、“afterbegin”、“beforeend”和“afterend”。所有主流浏览器都支持此方法。

下面的示例显示了职位名称的可视化及其工作方式。

<!-- beforebegin -->
<div id="main">
    <!-- afterbegin -->
    <h1 id="title">Hello World!</h1>
    <!-- beforeend -->
</div>
<!-- afterend -->
 
<script>
// 选择目标元素
var mainDiv = document.getElementById("main");
 
// 在元素本身之前插入HTML，作为前面的兄弟元素
mainDiv.insertAdjacentHTML('beforebegin', '<p>文本1.</p>');
 
// 在元素的第一个子元素之前插入HTML
mainDiv.insertAdjacentHTML('afterbegin', '<p>文本2.</p>');
 
// 在元素的最后一个子元素之后插入HTML
mainDiv.insertAdjacentHTML('beforeend', '<p>文本3.</p>');
 
// 在元素本身之后插入HTML，作为下一个兄弟
mainDiv.insertAdjacentHTML('afterend', '<p>文本4.</p>');
</script>

注意: 只有当节点在DOM树中并且具有父元素时，before和afterend位置才有效。另外，在将HTML插入页面时，要注意不要使用没有转义的用户输入，以防止XSS攻击。

从DOM中删除现有元素

类似地，可以使用removeChild()方法从DOM中删除一个子节点，此方法还返回删除的节点。这里有一个例子:

<div id="main">
    <h1 id="title">Hello World!</h1>
    <p id="hint">文本段落.</p>
</div>

<script>
var parentElem = document.getElementById("main");
var childElem = document.getElementById("hint");
parentElem.removeChild(childElem);
</script>

也可以在不知道父元素的情况下删除子元素，只需找到子元素并使用parentNode属性找到其父元素即可，此属性返回DOM树中指定节点的父节点。这里有一个例子:

<div id="main">
    <h1 id="title">Hello World!</h1>
    <p id="hint">文本段落.</p>
</div>
 
<script>
var childElem = document.getElementById("hint");
childElem.parentNode.removeChild(childElem);
</script>

替换DOM中的现有元素

还可以使用replaceChild()方法将HTML DOM中的一个元素替换为另一个元素。该方法接受两个参数：要插入的节点和要替换的节点，它的语法类似于parentNode.replaceChild(newChild oldChild);。这里有一个例子:

<div id="main">
    <h1 id="title">Hello World!</h1>
    <p id="hint">文本段落.</p>
</div>
 
<script>
var parentElem = document.getElementById("main");
var oldPara = document.getElementById("hint");
 
// 创建新元素
var newPara = document.createElement("p");
var newContent = document.createTextNode("新文本.");
newPara.appendChild(newContent);
 
// 用新创建的段落替换旧的段落
parentElem.replaceChild(newPara, oldPara);
</script>