介绍
在了解DOM系列的前两期中,我们学习了如何访问DOM和如何遍历DOM。 使用这些知识,开发人员可以使用类、标签、id 和选择器来查找 DOM 中的任何节点,并使用父、子和兄弟属性来查找相关节点。
更加精通 DOM 的下一步是学习如何添加、更改、替换和删除节点。 待办事项列表应用程序是 JavaScript 程序的一个实际示例,您需要能够在其中创建、修改和删除 DOM 中的元素。
在本教程中,我们将介绍如何创建新节点并将它们插入 DOM、替换现有节点和删除节点。
创建新节点
在静态网站中,通过在 .html
文件中直接写入 HTML 来将元素添加到页面中。 在动态 Web 应用程序中,元素和文本通常使用 JavaScript 添加。 createElement()
和 createTextNode()
方法用于在 DOM 中创建新节点。
属性/方法 | 描述 |
---|---|
createElement()
|
创建一个新的元素节点 |
createTextNode()
|
创建一个新的文本节点 |
node.textContent
|
获取或设置元素节点的文本内容 |
node.innerHTML
|
获取或设置元素的 HTML 内容 |
首先,让我们创建一个 index.html
文件并将其保存在新的项目目录中。
索引.html
<!DOCTYPE html> <html lang="en"> <head> <title>Learning the DOM</title> </head> <body> <h1>Document Object Model</h1> </body> </html>
右键单击页面上的任意位置并选择“检查”以打开开发者工具,然后导航到 控制台。
我们将在 document
对象上使用 createElement()
来创建一个新的 p
元素。
const paragraph = document.createElement('p');
我们创建了一个新的 p
元素,我们可以在 Console 中对其进行测试。
console.log(paragraph)
Output<p></p>
paragraph
变量输出一个空的 p
元素,如果没有任何文本,这不是很有用。 为了向元素添加文本,我们将设置 textContent
属性。
paragraph.textContent = "I'm a brand new paragraph."; console.log(paragraph)
Output<p>I'm a brand new paragraph.</p>
createElement()
和 textContent
的组合创建一个完整的元素节点。
设置元素内容的另一种方法是使用 innerHTML
属性,它允许您向元素添加 HTML 和文本。
paragraph.innerHTML = "I'm a paragraph with <strong>bold</strong> text.";
注意: 虽然这可行并且是向元素添加内容的常用方法,但使用 可能存在跨站点脚本 (XSS) 风险X183X] 方法,因为可以将内联 JavaScript 添加到元素。 因此,建议使用 textContent
代替,它会去除 HTML 标签。
也可以使用 createTextNode()
方法创建文本节点。
const text = document.createTextNode("I'm a new text node."); console.log(text)
Output"I'm a new text node."
使用这些方法,我们创建了新的元素和文本节点,但在将它们插入文档之前,它们在网站的前端是不可见的。
将节点插入 DOM
为了查看我们在前端创建的新文本节点和元素,我们需要将它们插入到 document
中。 appendChild()
和 insertBefore()
方法用于在父元素的开头、中间或结尾添加项目,replaceChild()
用于将旧节点替换为新节点节点。
属性/方法 | 描述 |
---|---|
node.appendChild()
|
添加一个节点作为父元素的最后一个子元素 |
node.insertBefore()
|
在指定的兄弟节点之前插入一个节点到父元素中 |
node.replaceChild()
|
用新节点替换现有节点 |
为了练习这些方法,让我们在 HTML 中创建一个待办事项列表:
todo.html
<ul> <li>Buy groceries</li> <li>Feed the cat</li> <li>Do laundry</li> </ul>
当您在浏览器中加载页面时,它将如下所示:
为了将新项目添加到待办事项列表的末尾,我们必须首先创建元素并向其添加文本,就像我们在上面的“创建新节点”部分中所做的那样。
// To-do list ul element const todoList = document.querySelector('ul'); // Create new to-do const newTodo = document.createElement('li'); newTodo.textContent = 'Do homework';
现在我们有了新的待办事项的完整元素,我们可以用 appendChild()
将它添加到列表的末尾。
// Add new todo to the end of the list todoList.appendChild(newTodo);
您可以看到新的 li
元素已附加到 ul
的末尾。
todo.html
<ul> <li>Buy groceries</li> <li>Feed the cat</li> <li>Do laundry</li> <li>Do homework</li> </ul>
也许我们有更高优先级的任务要做,我们想将它添加到列表的开头。 我们必须创建另一个元素,因为 createElement()
只创建一个元素并且不能重复使用。
// Create new to-do const anotherTodo = document.createElement('li'); anotherTodo.textContent = 'Pay bills';
我们可以使用 insertBefore()
将它添加到列表的开头。 这个方法有两个参数——第一个是要添加的新子节点,第二个是紧跟新节点的兄弟节点。 换句话说,您在下一个兄弟节点之前插入新节点。 这将类似于以下伪代码:
parentNode.insertBefore(newNode, nextSibling);
对于我们的待办事项列表示例,我们将在列表的第一个子元素之前添加新的 anotherTodo
元素,该子元素当前是 Buy groceries
列表项。
// Add new to-do to the beginning of the list todoList.insertBefore(anotherTodo, todoList.firstElementChild);
todo.html
<ul> <li>Pay bills</li> <li>Buy groceries</li> <li>Feed the cat</li> <li>Do laundry</li> <li>Do homework</li> </ul>
新节点已成功添加到列表的开头。 现在我们知道如何将节点添加到父元素。 我们可能想做的下一件事是用新节点替换现有节点。
我们将修改现有的待办事项以演示如何替换节点。 创建新元素的第一步保持不变。
const modifiedTodo = document.createElement('li'); modifiedTodo.textContent = 'Feed the dog';
与 insertBefore()
一样,replaceChild()
有两个参数——新节点和要替换的节点,如下面的伪代码所示。
parentNode.replaceChild(newNode, oldNode);
我们将用修改后的待办事项替换列表的第三个子元素。
// Replace existing to-do with modified to-do todoList.replaceChild(modifiedTodo, todoList.children[2]);
todo.html
<ul> <li>Pay bills</li> <li>Buy groceries</li> <li>Feed the dog</li> <li>Do laundry</li> <li>Do homework</li> </ul>
通过 appendChild()
、insertBefore()
和 replaceChild()
的组合,您可以在 DOM 中的任何位置插入节点和元素。
从 DOM 中移除节点
现在我们知道如何创建元素、将它们添加到 DOM 以及修改现有元素。 最后一步是学习从 DOM 中删除现有节点。 可以使用 removeChild()
从父节点中删除子节点,并且可以使用 remove()
删除节点本身。
方法 | 描述 |
---|---|
node.removeChild()
|
移除子节点 |
node.remove()
|
删除节点 |
使用上面的待办事项示例,我们希望在项目完成后删除它们。 如果您完成了作业,您可以使用 removeChild()
删除恰好是列表的最后一个子项的 Do homework
项。
todoList.removeChild(todoList.lastElementChild);
todo.html
<ul> <li>Pay bills</li> <li>Buy groceries</li> <li>Feed the dog</li> <li>Do laundry</li> </ul>
另一种方法是删除节点本身,直接在节点上使用 remove()
方法。
// Remove second element child from todoList todoList.children[1].remove();
todo.html
<ul> <li>Pay bills</li> <li>Feed the dog</li> <li>Do laundry</li> </ul>
在 removeChild()
和 remove()
之间,您可以从 DOM 中删除任何节点。 您可能会看到从 DOM 中删除子元素的另一种方法是将父元素的 innerHTML
属性设置为空字符串 (""
)。 这不是首选方法,因为它不太明确,但您可能会在现有代码中看到它。
结论
在本教程中,我们学习了如何使用 JavaScript 创建新的节点和元素并将它们插入到 DOM 中,以及替换和删除现有的节点和元素。
到了【X21X】了解DOM系列【X53X】你知道了如何访问DOM中的任意元素,遍历DOM中的任意节点,修改DOM本身。 您现在可以自信地使用 JavaScript 创建基本的前端 Web 应用程序。