前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。
简介
在“理解 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 文件并将其保存在一个新的项目目录中。
<!DOCTYPE html>
<html lang="en">
<head>
<title>学习 DOM</title>
</head>
<body>
<h1>文档对象模型</h1>
</body>
</html>
在页面的任意位置右键单击，然后选择“检查”以打开开发者工具，然后导航到控制台。
我们将在 document 对象上使用 createElement() 来创建一个新的 p 元素。
const paragraph = document.createElement('p');
我们已经创建了一个新的 p 元素，在 控制台 中可以测试它。
console.log(paragraph)
<p></p>
paragraph 变量输出了一个空的 p 元素，没有任何文本内容，这样并不是很有用。为了向元素添加文本，我们将设置 textContent 属性。
paragraph.textContent = "我是一个全新的段
## 从 DOM 中移除节点
现在我们知道如何创建元素，将它们添加到 DOM 中，并修改现有元素。最后一步是学习如何从 DOM 中移除现有节点。可以使用 `removeChild()` 从父节点中移除子节点，也可以使用 `remove()` 来移除节点本身。
| 方法 | 描述 |
| -------------------------- | ----------------- |
| `node.removeChild()` | 移除子节点 |
| `node.remove()` | 移除节点 |
使用上面的待办事项示例，我们将希望在完成后删除项目。如果你完成了家庭作业，可以使用 `removeChild()` 来移除列表中的最后一个子节点 `Do homework`。
```custom_prefix(>)
todoList.removeChild(todoList.lastElementChild);
<ul>
<li>Pay bills</li>
<li>Buy groceries</li>
<li>Feed the dog</li>
<li>Do laundry</li>
</ul>
!DOM Screenshot 5
另一种方法是直接使用 remove() 方法从 DOM 中移除节点本身。
// 从 todoList 中直接移除第二个子节点
todoList.children[1].remove();
<ul>
<li>Pay bills</li>
<li>Feed the dog</li>
<li>Do laundry</li>
</ul>
!DOM Screenshot 6
在 removeChild() 和 remove() 之间，你可以从 DOM 中移除任何节点。另一种你可能会看到的移除子元素的方法是将父元素的 innerHTML 属性设置为空字符串 ("")。这不是首选方法，因为它不够明确，但你可能会在现有代码中看到它。
结论
在本教程中，我们学习了如何使用 JavaScript 创建新节点和元素，并将它们插入到 DOM 中，以及替换和移除现有节点和元素。
通过《理解 DOM 系列》到这一步，你已经知道如何访问 DOM 中的任何元素，遍历 DOM 中的任何节点，并修改 DOM 本身。现在你可以自信地使用 JavaScript 创建基本的前端 Web 应用程序了。
扫一扫
2402
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
