JavaScript中什么是DOM? - 网站源码_资源分享

云和安全可靠管理工作服务项目研究者新钛云服林泓辉译者

假如您就此结束自学 JavaScript，您可能将听闻过 DOM。但它到底是甚么？

在责任编辑中，我将说明甚么是 DOM 并提供更多许多 JavaScript 标识符实例。

我们将看一看怎样从 HTML 文件格式中优先选择原素、怎样建立原素、怎样更动H55N CSS 式样和怎样窃听该事件。

甚么是DOM？

DOM 代表者文件格式第一类数学模型。它是三个程式设计USB，容许他们从文件格式中建立、更动或删掉原素。他们还能向那些原素加进该事件，使他们的网页更为静态。

DOM 将 HTML 文件格式视作结点树。三个结点代表者三个 HTML 原素。

让他们看呵呵这段 HTML 标识符，以更快地认知 DOM genomes。

<!DOCTYPEhtml><htmllang=”en”><head><metacharset=”UTF-8″><metaname=”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名称。

这是不正确的：

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

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

<pid=”para1″>This is my first paragraph.</p><pid=”para2″>This is my second paragraph.</p>

document.getElementById(“id name goes here”)

constparagraph1= document.getElementById(“para1”);console.log(paragraph1);

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

constparagraph1= document.getElementById(“para1”);console.log(paragraph1.textContent);

querySelector():

您能使用此方式查找具有三个或多个 CSS 优先选择器的原素。

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

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

假如我想查找h1原素并将其打印到控制台，那么我能在querySelector().

consth1Element= document.querySelector(“h1”);console.log(h1Element);

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

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

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

querySelectorAll():

此方式查找与 CSS 优先选择器匹配的所有原素并返回所有那些节点的列表。

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

constlistItems= document.querySelectorAll(“ul > li”);console.log(listItems);

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

constlistItems= 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.

letunorderedList= document.createElement(“ul”);

然后他们需要使用该appendChild(ul)方式将该原素加进到文件格式中。

document.body.appendChild(unorderedList);

接下来为<ul>原素加进几个<li>原素。

letlistItem1= document.createElement(“li”);letlistItem2= document.createElement(“li”);

然后他们能使用该 textContent属性为他们的列表项加进文本。

letlistItem1= document.createElement(“li”);listItem1.textContent=”Its free”;letlistItem2= document.createElement(“li”);listItem2.textContent=”Its awesome”;

最后一部分是使用该appendChild()方式将列表项加进到无序列表中。

let listItem1 = document.createElement(“li”);

listItem1.textContent=”Its free”;

unorderedList.appendChild(listItem1);

letlistItem2= document.createElement(“li”);

listItem2.textContent = “Its awesome”;

unorderedList.appendChild(listItem2);

这就是标识符的样子。

letunorderedList= document.createElement(“ul”);document.body.appendChild(unorderedList);letlistItem1= document.createElement(“li”);listItem1.textContent=”Its free”;unorderedList.appendChild(listItem1);letlistItem2= document.createElement(“li”);listItem2.textContent=”Its awesome”;unorderedList.appendChild(listItem2);

这是网页上的输出：