JS DOM操作 – JavaScript教程 JSDOM操作|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>

【JS DOM操作 – JavaScript教程】也可以在不知道父元素的情况下删除子元素，只需找到子元素并使用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>