当前位置：网站首页 > 技术文章 > 正文

JavaScript中什么是DOM?

myzbx 2024-12-07 15:16 45 浏览

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

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

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

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

什么是DOM？

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

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

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

<!DOCTYPE html>

<html lang="en">

<head>

<metacharset="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>元素。该<html>元素包含两个子元素，它们是<head>和<body>元素。

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

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

我们可以访问文档中的这些元素并使用 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>

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

<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);

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

const paragraph1 = document.getElementById("para1");

console.log(paragraph1.textContent);

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);

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

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

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

console.log(list);

querySelectorAll():

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

如果我想<li>在我们的例子中找到所有的项目，我可以使用>子组合器来找到<ul>.

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

console.log(listItems);

如果我们想打印出<li>电视节目的实际项目，我们可以使用 forEach()循环遍历 NodeList 并打印出每个项目。

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

listItems.forEach((item) => {

console.log(item);

});

如何向文档添加新元素

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

让我们看一下这个例子：

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

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

我们可以首先使用document.createElement('ul'). 我将把它分配给一个名为unorderedList.

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

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

document.body.appendChild(unorderedList);

接下来为<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);

这是页面上的输出：

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

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

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

这是我们的 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";

这是在浏览器中的结果：

您可以使用此style属性来更改一些CSS内联样式，包括background-color，border-style，font-size和更多。

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

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

在这个例子中，当用户点击按钮时，会弹出一条警告消息。

在我们的 HTML 中，我们有一个带有idof的按钮元素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");

});

这是您可以单击按钮并弹出警报消息的完整代码：

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

button.addEventListener("click", () => {

alert("Thank you for clicking me");

});

结论

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

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

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

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

如果要将事件添加到按钮等元素，则可以使用addEventListener().

HTML Id

上一篇：后端动态生成word或pdf的几种常见方法
下一篇：html渲染优先级

JavaScript中什么是DOM?

什么是DOM？

如何选择文档中的元素

getElementById():

querySelectorAll():

如何向文档添加新元素

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

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

结论

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿