原文： What is the DOM? Document Object Model Meaning in JavaScript

如果你刚开始学习 JavaScript，那么你可能听说过 DOM。但它到底是什么？

在本文中，我将解释 DOM 是什么，并提供一些 JavaScript 代码示例。

我们将了解如何从 HTML 文档中选择元素、如何创建元素、如何更改内联 CSS 样式以及如何监听事件。

DOM 是什么

DOM 代表文档对象模型。它是一个编程接口，允许我们从文档中创建、更改或删除元素。我们还可以为这些元素添加事件以使我们的页面更​​加动态。

DOM 将 HTML 文档视为节点树。一个节点代表一个 HTML 元素。

让我们看一下这段 HTML 代码，以更好地理解 DOM 树结构。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DOM tree structure</title>
  </head>
  <body>
    <h1>DOM tree structure</h1>
	<h2>Learn about the DOM</h2>
  </body>
</html>

我们的文档称为根节点，其中包含一个子节点，即 <html> 元素。 <head> 元素包含两个子元素，即 <head> 和 <body> 元素。

<head> 和 <body> 元素都有自己的子元素。

这是可视化此节点树的另一种方法。

Document

我们可以访问文档中的这些元素并使用 JavaScript 对它们进行更改。

让我们看几个示例，了解如何使用 JavaScript 处理 DOM。

如何选择文档中的元素

在 HTML 文档中选择元素有几种不同的方法。

在本文中，我们将重点介绍其中三种方法：

  • getElementById()
  • querySelector()
  • querySelectorAll()

getElementById()

在 HTML 中，id 被用作 HTML 元素的唯一标识符。这意味着你不能为两个不同的元素使用相同的 id 名称。

这是不正确的：

<p id="para">This is my first paragraph.</p>
<p id="para">This is my second paragraph.</p>

你必须确保这些 id 是唯一的，如下所示：

<p id="para1">This is my first paragraph.</p>
<p id="para2">This is my second paragraph.</p>

在 JavaScript 中，我们可以通过引用 id 名称来获取 HTML 标签。

document.getElementById("id name goes here")

此代码告诉计算机获取 id 为 para1 的 <p> 元素并将该元素打印到控制台。

const paragraph1 = document.getElementById("para1");
console.log(paragraph1);
Screen-Shot-2021-09-26-at-2.25.49-PM

如果我们只想读取段落的内容，那么我们可以使用 console.log() 中的 textContent 属性。

const paragraph1 = document.getElementById("para1");
console.log(paragraph1.textContent);
Screen-Shot-2021-09-26-at-2.35.31-PM

querySelector()

你可以使用此方法查找具有一个或多个 CSS 选择器的元素。

我已经为我最喜欢的电视节目创建了这个 HTML 示例：

<h1>Favorite TV shows</h1>
<ul class="list">
  <li>Golden Girls</li>
  <li>Archer</li>
  <li>Rick and Morty</li>
  <li>The Crown</li>
</ul>

如果我想找到 h1 元素并将其打印到控制台，那么我可以在 querySelector() 中使用该标签名称。

const h1Element = document.querySelector("h1");
console.log(h1Element);
Screen-Shot-2021-09-26-at-3.15.59-PM

如果我想以 class="list" 为目标以将无序列表打印到控制台，那么我将在 querySelector() 中使用 .list。

在 list 前面的 . 告诉计算机以一个类名为目标。如果你想定位一个 id，那么你可以在名称前使用 # 符号。

const list = document.querySelector(".list");
console.log(list);
Screen-Shot-2021-09-26-at-3.22.45-PM

querySelectorAll()

此方法查找与 CSS 选择器匹配的所有元素并返回所有这些节点的列表。

如果我想在我们的列表中查找所有 <li> 项目，我将使用 > 查找 <ul> 的所有子级。

const listItems = document.querySelectorAll("ul > li");
console.log(listItems);
Screen-Shot-2021-09-26-at-3.30.46-PM

If we wanted to print out the actual如果我们想打印出所有电视节目 <li> 项目，我们可以使用 forEach() 遍历 NodeList 并打印出每个项目。

const listItems = document.querySelectorAll("ul > li");

listItems.forEach((item) => {
  console.log(item);
});
Screen-Shot-2021-09-26-at-3.42.13-PM

如何向文档添加新元素

我们可以使用 document.createElement() 将新元素添加到 DOM 树中。

让我们看一下这个例子：

<h1>Reasons why I love freeCodeCamp:</h1>

现在，我在页面上只有一个 <h1> 标签，但我想使用 JavaScript 在 <h1> 标签下添加我喜欢 freeCodeCamp 的原因列表。

我们可以首先使用 document.createElement() 创建一个 <ul> 元素。我会把它赋值给变量 unorderedList。

let unorderedList = document.createElement("ul");

然后我们需要使用 appendChild() 方法将该 <ul> 元素添加到文档中。

document.body.appendChild(unorderedList);

下一部分是使用 createElement() 方法在 <ul> 元素内添加几个 <li> 元素。

let listItem1 = document.createElement("li");

let listItem2 = document.createElement("li");

然后我们可以使用 textContent 属性为我们的列表项添加文本。

let listItem1 = document.createElement("li");
listItem1.textContent = "It's free";

let listItem2 = document.createElement("li");
listItem2.textContent = "It's awesome";

最后一部分是使用 appendChild() 方法，以便可以将列表项添加到无序列表中。

let listItem1 = document.createElement("li");
listItem1.textContent = "It's free";
unorderedList.appendChild(listItem1);

let listItem2 = document.createElement("li");
listItem2.textContent = "It's awesome";
unorderedList.appendChild(listItem2);

这就是所有代码：

let unorderedList = document.createElement("ul");
document.body.appendChild(unorderedList);

let listItem1 = document.createElement("li");
listItem1.textContent = "It's free";
unorderedList.appendChild(listItem1);

let listItem2 = document.createElement("li");
listItem2.textContent = "It's awesome";
unorderedList.appendChild(listItem2);

这是页面上输出的样子：

Screen-Shot-2021-09-26-at-4.21.55-PM

如何使用 Style 属性更改内联 CSS 样式

style 属性使你能够更改 HTML 文档中的 CSS。

在此示例中，我们将使用 style 属性将 h1 文本从黑色更改为蓝色。

这是我们的 HTML。

<h1>I was changed to blue using JavaScript</h1>

我们首先需要使用 querySelector() 方法获取 h1 标签。

const h1 = document.querySelector("h1");

然后我们使用 h1.style.color 将 h1 文本从黑色更改为蓝色。

const h1 = document.querySelector("h1");
h1.style.color = "blue";

这是浏览器中的结果：

Screen-Shot-2021-09-26-at-4.33.44-PM

你可以使用此 style 属性更改许多 CSS 内联样式，包括 background-color、border-style、font-size 等。

如何使用 addEventListener() 监听页面上的事件

此方法允许你将事件附加到 HTML 元素（如按钮）。

在此示例中，当用户单击按钮时，将弹出一条警告消息。

在我们的 HTML 中，我们有一个 id 为 btn 的按钮元素。

  <button id="btn">Show alert</button>

我们可以使用 getElementById() 方法在 JavaScript 中定位该元素，并将其分配给名为 button 的变量。

const button = document.getElementById("btn");

addEventListener() 接受一个事件类型和一个函数。事件类型将是 click 事件，该函数将触发警报消息。

这是将事件侦听器添加到 button 变量的代码。

button.addEventListener("click", () => {
  alert("Thank you for clicking me");
});

这是完整的代码，你可以在其中单击按钮并弹出警报消息：

如何在实际项目中使用 DOM

以上对你可以使用的一些 DOM 方法的简要介绍，还有很多我们没有在本文中介绍的示例。

如果你想开始构建初学者 JavaScript 项目并使用 DOM，那么我建议您查看我的 40 JavaScript Projects for Beginners 文章。

总结

DOM 代表文档对象模型，是一种编程接口，允许我们从文档中创建、更改或删除元素。我们还可以为这些元素添加事件以使我们的页面更​​加动态。

你可以使用 getElementById()、querySelector() 和 querySelectorAll() 等方法在 JavaScript 中选择元素。

如果要向文档添加新元素，可以使用 document.createElement()。

你还可以使用 style 属性更改元素的内联 CSS 样式。

如果你想向按钮等元素添加事件，则可以使用 addEventListener()。

我希望你喜欢这篇文章，并祝你在 JavaScript 之旅中好运。