云和安全管理服务专家新钛云服林泓辉翻译

如果您刚刚开始学习 JavaScript，您可能听说过 DOM。但它究竟是什么？

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

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

什么是DOM？

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

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

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

<htmllang=”en”>

<metacharset=”UTF-8″>

<metaname=”viewport”content=”width=device-width, initial-scale=1.0″>

=”X-UA-Compatible”content=”ie=edge”>

DOM tree structure

Learn about the DOM

我们的文档称为根节点，包含一个子节点，即元素。该元素包含两个子元素，它们是和元素。

the和element 都有自己的子元素。

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

dom是什么意思啊，JavaScript中的DOM属性

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

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

如何选择文档中的元素

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

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

• getElementById()

• querySelector()

• querySelectorAll()

getElementById():

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

这是不正确的：

<pid=”para”>This is my first paragraph.

<pid=”para”>This is my second paragraph.

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

<pid=”para1″>This is my first paragraph.

<pid=”para2″>This is my second paragraph.

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

document.getElementById(“id name goes here”)

此代码告诉计算机使用id=para1获取元素

并将元素打印到控制台。

constparagraph1 =document.getElementById(“para1”);

console.log(paragraph1);

dom是什么意思啊，JavaScript中的DOM属性

如果我们想知道刚才段落的内容，那么我们就可以使用textContent里面的属性console.log()。

constparagraph1 =document.getElementById(“para1”);

console.log(paragraph1.textContent);

dom是什么意思啊，JavaScript中的DOM属性

querySelector():

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

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

Favorite TV shows

<ulclass=”list”>

Golden Girls

Archer

Rick and Morty

The Crown

如果我想查找h1元素并将其打印到控制台，那么我可以在querySelector().

consth1Element =document.querySelector(“h1”);

console.log(h1Element);

dom是什么意思啊，JavaScript中的DOM属性

如果我想将无序列表打印到控制台，那么我会.list在 querySelector().

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

constlist =document.querySelector(“.list”);

console.log(list);

dom是什么意思啊，JavaScript中的DOM属性

querySelectorAll():

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

如果我想

在我们的例子中找到所有的项目，我可以使用>子组合器来找到
constlistItems =document.querySelectorAll(“ul > li”);
console.log(listItems);
如果我们想打印出
- 电视节目的实际项目，我们可以使用 forEach()循环遍历 NodeList 并打印出每个项目。constlistItems =document.querySelectorAll(“ul > li”);listItems.forEach((item) =>{
  console.log(item);
  });
  如何向文档添加新元素
  我们可以使用document.createElement()向 DOM 树添加新元素。
  让我们看一下这个例子：
  Reasons why I love freeCodeCamp:
  现在，我
  在页面上只有一个标签。但是我想在
  使用 JavaScript 的标签下添加一个我喜欢 freeCodeCamp 的原因列表。
  我们可以首先使用document.createElement(‘ul’). 我将把它分配给一个名为unorderedList.
  letunorderedList =document.createElement(“ul”);
  然后我们需要使用该appendChild(‘ul’)方法将该元素添加到文档中。
  document.body.appendChild(unorderedList);
  接下来为
  - 元素。letlistItem1 =document.createElement(“li”);letlistItem2 =document.createElement(“li”);
    然后我们可以使用该 textContent属性为我们的列表项添加文本。
    letlistItem1 =document.createElement(“li”);
    listItem1.textContent=”It’s free”;
    letlistItem2 =document.createElement(“li”);
    listItem2.textContent=”It’s awesome”;
    最后一部分是使用该appendChild()方法将列表项添加到无序列表中。
    letlistItem1 =document.createElement(“li”);
    listItem1.textContent=”It’s free”;
    unorderedList.appendChild(listItem1);
    letlistItem2 =document.createElement(“li”);
    listItem2.textContent=”It’s awesome”;
    unorderedList.appendChild(listItem2);
    这就是代码的样子。
    letunorderedList =document.createElement(“ul”);
    document.body.appendChild(unorderedList);
    letlistItem1 =document.createElement(“li”);
    listItem1.textContent=”It’s free”;
    unorderedList.appendChild(listItem1);
    letlistItem2 =document.createElement(“li”);
    listItem2.textContent=”It’s awesome”;
    unorderedList.appendChild(listItem2);
    这是页面上的输出：
    如何使用 Style 属性更改内联 CSS 样式
    该style属性使您能够更改 HTML 文档中的 CSS。
    在本例中，我们将h1使用style属性将文本从黑色更改为蓝色。
    这是我们的 HTML。
    I was changed to blue using JavaScript
    我们首先需要使用querySelector(‘h1’)方法获取标签。
    consth1 =document.querySelector(“h1”);
    然后我们使用h1.style.color将h1文本从黑色更改为蓝色。
    consth1 =document.querySelector(“h1”);
    h1.style.color=”blue”;
    这是在浏览器中的结果：
    您可以使用此style属性来更改一些CSS内联样式，包括background-color，border-style，font-size和更多。
    如何使用addEventListener() 监听页面上的事件
    此方法允许您将事件附加到 HTML 元素（如按钮）。
    在这个例子中，当用户点击按钮时，会弹出一条警告消息。
    在我们的 HTML 中，我们有一个带有idof的按钮元素btn。
    <buttonid=”btn”>Show alert
    我们可以使用getElementById()方法在 JavaScript 中定位该元素并将其分配给名为的变量button。
    constbutton =document.getElementById(“btn”);
    addEventListener()的参数为事件类型和触发时的函数。事件类型将是一个click事件，该函数将触发警报消息。
    这是将事件侦听器添加到button变量的代码。
    button.addEventListener(“click”,() =>{
    alert(“Thank you for clicking me”);
    });
    这是您可以单击按钮并弹出警报消息的完整代码：
    constbutton =document.getElementById(“btn”);
    button.addEventListener(“click”,() =>{
    alert(“Thank you for clicking me”);
    });
    结论
    DOM 代表文档对象模型，是一种编程接口，允许我们从文档中创建、更改或删除元素。我们还可以向这些元素添加事件，使我们的页面更加动态。
    您可以使用getElementById(), querySelector()、和等方法在 JavaScript 中选择元素querySelectorAll()。
    如果要将新元素添加到文档中，可以使用document.createElement().
    您还可以使用该style属性更改元素的内联 CSS 样式。
    如果要将事件添加到按钮等元素，则可以使用addEventListener().