如何更改DOM

来自菜鸟教程
跳转至：导航、​搜索

介绍

在了解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 应用程序。

取自“https://cainiaojiaocheng.com/index.php?title=如何更改DOM&oldid=26543”
Powered by MediaWiki