原文: 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>
元素都有自己的子元素。
这是可视化此节点树的另一种方法。
我们可以访问文档中的这些元素并使用 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);
如果我们只想读取段落的内容,那么我们可以使用 console.log()
中的 textContent
属性。
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"
为目标以将无序列表打印到控制台,那么我将在 querySelector()
中使用 .list
。
在 list
前面的 .
告诉计算机以一个类名为目标。如果你想定位一个 id
,那么你可以在名称前使用 #
符号。
const list = document.querySelector(".list");
console.log(list);
querySelectorAll()
此方法查找与 CSS 选择器匹配的所有元素并返回所有这些节点的列表。
如果我想在我们的列表中查找所有 <li>
项目,我将使用 >
查找 <ul>
的所有子级。
const listItems = document.querySelectorAll("ul > li");
console.log(listItems);
If we wanted to print out the actual如果我们想打印出所有电视节目 <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>
标签,但我想使用 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);
这是页面上输出的样子:
如何使用 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";
这是浏览器中的结果:
你可以使用此 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 之旅中好运。