如何掌握 JavaScript DOM：初学者指南

介绍

JavaScript 具有一种功能，即 DOM。Dom 是 JavaScript 编程的一个重要方面，不容忽视。就我而言，如果不了解 DOM 是什么，就无法在 JavaScript 中取得很多成就。JavaScript 正在广泛发展并变得多才多艺，DOM 的使用变得更加必要和强烈需要。

在本教程中，我将向您介绍您应该了解的有关 DOM 的知识。我向你保证，如果你坚持到最后并练习我所写的所有内容，那么整个 DOM 问题将不再是你的问题。

不浪费你太多时间，让我们直接进入。

DOM 定义和基本原则

DOM 是一个首字母缩写词，代表文档对象模型。文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口。它将文档的结构表示为对象树，每个对象表示文档的一部分，例如元素、属性或文本节点。

JavaScript 可用于与 DOM 交互，允许开发人员创建可以更新和响应用户输入的动态网页。JavaScript DOM 允许您操作和访问 HTML 或 XML 文档的元素、属性和内容，无需重新加载网页即可更改网页的结构、布局和内容。

下图解释了 DOM 树的样子。

文档对象显示在这里。这是 DOM 的基础和核心。您必须首先获得对文档对象的访问权限才能执行任何类型的 DOM 修改。

接下来HTML是根元素，文档对象的子类。

接下来列出了body和head元素，它们是该元素的表亲和后代。HTML

您可能同意位于 head 元素下方的 title 元素是文本节点“my text”的父元素和 head 元素的子元素。

body 元素的兄弟姐妹和子元素的两个组件（atag 和 an h1tag）位于 body 元素的正下方。

最后但同样重要的是，标签的后代包括href属性和文本节点“我的链接”。h1文本节点“My header”以完全相同的方式属于该元素。

如果您刚刚开始，这可能看起来有点困难，但它总是会变得更容易（当然要多加练习）。

如何选择 DOM 中的元素

您必须先在 DOM 中选择该特定元素，然后才能对其进行更改。我们有四种主要的组件选择方法，这对我们来说是幸运的。

如何使用 getElementById 方法选择 DOM 元素

使用元素的 id 是访问 HTML 元素最常用的方法。

下面示例中的 getElementById() 函数使用参数 id="master" 来定位元素。

<p id="controller">i'm a javascript lover</p>
 <script>
const controllerEl = document.getElementById('controller')
console.log(controllerEl) //<p id="controller">i'm a javascript lover</p> 
 </script>
复制代码

ID 会考虑大小写。例如，ids"master"和"Master"是完全不同的。

选择一个元素后，您可以修改其属性，将样式应用到该元素，并导航到其父元素和子元素。

使用 getElementsByClassName() 技术在 DOM 中选择元素。

此函数返回属于给定类的所有文档组件的集合。

例如，我们下面的 HTML 页面包含三个具有class="master2``"属性的组件，我选择了 id 为 的按钮btn。

单击该按钮时，将master2选择所有具有类名的元素，并更改第三个元素的 innerHTML。

<p class="master2">i'm a javascript lover</p>
      <p class="master2">i love react too well</p>
      <h1 class="master2">i want a remote job</h1>
        <button id="btn">click me</button>
 <script>
 const btn = document.getElementById('btn')
        btn.addEventListener('click', function master(){
            var master = document.getElementsByClassName("master2");
            master[2].innerHTML = 'i need a remote job';
        })
</script>
复制代码

单击按钮之前，您会看到以下内容：

单击按钮会产生以下结果：

使用 getElementsByTagName() 方法选择 DOM 元素

此函数将标记名称作为输入，并按照给定标记名称的每个元素在文档中出现的顺序返回它们。

以下代码检索p页面上的所有元素并修改第二个元素的内容以演示getElementsByTagName()函数的语法。

<p>GitHub</p>
<p>Firebase</p>
<p>HTML</p>
<button id="btn">click me</button>
  const btn = document.getElementById("btn");
btn.addEventListener("click", function master() {
  let master = document.getElementsByTagName("p");
  let masterEl = (master[1].innerHTML = "Code editors");
  console.log(masterEl); //Code editors
});
复制代码

如何使用 CSS 选择器选择 DOM 元素

。querySelector()

这将返回与指定选择匹配的第一个值。通过接受所有 CSS 样式选择器，这种方法可以通过标签、类或 ID 进行选择。

<div id=master>i am a frontend developer</div>
<script>
const master = document.querySelector("#master") 
</script>
复制代码

上面的方法返回第一个匹配CSS选择器的元素，它只接受一个输入，一个选择。

.querySelectorAll()

与前面的方法类似，这个方法也提供了所有匹配项的节点列表集合。

<p class="director">Coffee Script</p>
     <p class="director">Typescript</p>
     <p class="director">Next.js</p>
<script>
const director = document.querySelectorAll(".director") 
console.log(director[1])  //<p class="master">Typescript</p>
</script>
复制代码

如何选择 DOM 元素概述

当您需要选择 DOM 元素时，有四种替代方法可以完成特定任务（选择一个或多个元素）。

因此，如果您不记得第一个，则使用第二个。如果您以某种方式忘记了两者，您仍然有备选方案 3 和 4。JavaScript 真的让我们的生活更简单了吗？

就个人而言，我建议坚持使用选项 1 或选项 4a（带有 Id 的 querySelector）。当你刚开始学习 HTML 时，你可能意识到元素不应该有相同的 id；元素的 id 是页面中的唯一标识符。

鉴于此，根据其 id 选择一个元素是一个“安全的赌注”，因为您不能同时对多个项目应用相同的“修改”（除非这可能是您想要做的，在这种情况下可以随意使用其他可能性）。

绕过文档

希望此时您已经意识到 HTML 文档中的每个节点都是一个节点。此外，文本节点构成了 HTML 组件的文本。

使用 HTML DOM，您可以使用我们之前讨论的节点关系（父节点、子节点、兄弟节点等）访问树中的节点并浏览节点树。

一点回顾

除了顶级节点，每个节点都有一个父节点（没有父节点）。

一个节点可以生多个孩子。

兄弟姐妹是共享同一个父节点的节点。

本节将演示如何获取元素的父元素、兄弟元素和后代元素。为了实现这些目标，我将使用以下节点属性：

• 父母
• 节点年轻人
• firstElementChild 最后一个节点
• 下一个 ElementChild
• 之前的 ElementSibling
• 元素兄弟

此外，我将简单地利用下面的 HTML 页面来演示如何使用这些节点功能中的每一个。我还将演示如何使用上面第 4 部分中的信息更改 DOM。

本文的目标是教读者如何更改 DOM。如果您不知道如何控制 DOM，那么是否可以选择元素并在其中导航并不重要。了解如何添加 CSS 样式、制作和添加元素、设置 innerHTML 以及管理事件至关重要。

请坚持我的观点，因为这是本文的重点。我们继续。

```<div id="parent">
        <div id="firstchild">i am a first child</div>
        <p id="secondchild">i am the second child</p>
        <h4>i am alive</h4>
        <h1>hello world</h1>
        <p>i am the last child</p>
    </div>
    const parent = document.getElementById('parent').lastElementChild
    console.log(parent) //<p>i am the last child</p>
    const parent2 = document.getElementById('parent').children[3]
    console.log(parent2) //<h1>hello world</h1>
    const secondchild = document.getElementById('secondchild')
    console.log(secondchild) //<p id="secondchild">i am the second child</p>
    console.log(secondchild.parentNode) //<div id="parent">...</div>
    console.log(secondchild.nextElementSibling) //<h4>i am alive</h4>
    console.log(secondchild.previousElementSibling) //<div id="firstchild">i am a first child</div>
复制代码

如何操作 DOM 中的元素

我们将在本节中检查以下内容：

• 制作组件的方法
• 如何修改元素的 innerHTML/text 内容
• 如何添加组件
• 将一个元素放在另一个元素之前：如何做
• 用这个替换子元素
• 摆脱子元素

<div id="parent">
            <div id="firstchild">i am a first child</div>
            <p id="secondchild">i am the second child</p>
            <h4>i am alive</h4>
            <h1>hello world</h1>
            <p>i am the last child</p>
        </div>  
复制代码

如何创建元素

上面的代码中显示了一个父元素和五个子元素。假设我们希望使用 JavaScript 创建另一个 div 标签。我们无疑需要使用 createElement() 函数来创建一个新元素，例如：

const createEl = document.createElement('div')
 console.log(createEl) //<div></div>
复制代码

如何设置 innerHTML

尽管我们成功构建了一个 div 元素，但它还没有文本节点。要添加其文本节点，我们将使用该.innerHTML() 属性。

const innerhtml = createEl.innerHTML = 'i am a frontend developer'
console.log(createEl) //<div>i am a frontend developer</div>
复制代码

如何使用 CSS 添加样式

我们从之前的示例中学习了如何构建元素并将其添加到指定的父元素。

因此，我们必须给元素添加一个 CSS 类，以使其具有样式。在这种情况下，将使用 JavaScript。

我将演示的不仅仅是如何添加一个类。我还将演示如何删除类和在类之间切换。

放松; 这并不难。每一步，我都在这里帮助你。

如何添加 CSS 类

目前，没有为 ID 为“master”的标准 HTML 按钮指定样式。看下图：

按钮的 CSS 样式将作为我们的第一个任务创建。

为了让 JavaScript 在您单击按钮时自动应用“按钮”类的 CSS 样式，接下来我将在我们的 JavaScript 中为按钮添加一个事件侦听器。

<style>
body {
  background-color: blue;
  display: flex;
  margin: 30%;
  justify-content: center;
  align-items: center;
}
.button {
  background-color: blueviolet;
  width: 200px;
  border: none;
  font-size: 2rem;
  padding: 0.5rem;
  border-radius: 5px;
  cursor: pointer;
}
</style>
<button id="master">Click me</button>
<script>
const buttonEl = document.getElementById('master')
buttonEl.addEventListener('click', addFunction)
 function addFunction(){
     buttonEl.classList.add('button')
  }
  </script>
复制代码

单击按钮后，您将看到以下内容。太棒了，是吧？

如何删除类

CSS 样式将使用与前面相同的示例来删除，但这次我们将使用 JavaScript 的 classList.remove() 函数。很可能，您已经知道会发生什么。

是的，按钮会恢复到原来的状态。

const buttonEl = document.getElementById('master')
buttonEl.addEventListener('click', addFunction)
function addFunction(){
    buttonEl.classList.remove('button')
 }
复制代码

如何切换类

假设您不希望完全删除 CSS 样式。您需要在风格化按钮和非风格化按钮之间切换。

您可以使用 JavaScript 函数来完成classList.toggle()。

大多数社交媒体网络，包括 Twitter，通常使用 classList.toggle() 函数。它使您可以选择始终使用相同的按钮喜欢和不喜欢帖子。

然后 JavaScript 确定按钮是否具有 CSS 类。

如果该类存在并且您单击该按钮，则它已发布。如果类缺失，当您单击该按钮时，它会被添加。

const buttonEl = document.getElementById('master')
buttonEl.addEventListener('click', addFunction)
function addFunction(){
    buttonEl.classList.toggle('button')
 }
复制代码

事件处理

什么是 HTML 事件？

HTML 事件是发生在 HTML 组件上的“事情”，比如按钮被点击，文本被输入文本框等。你可以编写 JavaScript 代码，我们称之为事件处理程序，当像上面提到的那样的事件发生了。

JavaScript 函数用作这些事件处理程序。因此，只要元素上发生事件，就会调用处理函数。

事件监听

器 到目前为止，我们已经在几乎所有给出的示例中使用了事件监听器。这应该证明事件侦听器在 DOM 操作中的重要性。

我们需要一个名为 addEventListener 的方法，以便将事件侦听器添加到元素或任何其他 DOM 对象 ()。这种方法优于前一种方法，在前一种方法中，要处理的事件包含在 HTML 标记中。

这将 JavaScript 与 HTML 标记分开，使代码更简单、更容易理解。

如果您像我一样欣赏单独的 JS、单独的 CSS 等概念，那么您会喜欢这个事件侦听器。

事件侦听器接受三个参数。

• 首先是事件的类别，比如“点击”等。
• 该函数将用作第二个参数。
• 第三个参数是一个布尔值，指示是使用事件捕获还是事件冒泡。此元素不是必需的。

结论

哇！最后，我们来到了本教程的结尾，希望您从本教程中学到了很多东西。知道如何操作 DOM 是 JavaScript 的必要组成部分，学习本教程将帮助您实现它。

如果您理解我上面提供的示例和图片，您可能能够创建小型 JS 应用程序。如果您想成为熟练的开发人员，那么开发项目的价值怎么强调都不为过。