在本文中，您将找到用于 DOM 操作的 JavaScript 的简要介绍。您将了解为什么这是用于开发交互式 Web 应用程序的非常强大的工具，以及如果您的目标是成为前端 Web 开发人员，为什么应该学习它们。
让我们开始！✨
（更|多优质内|容：java567 点 c0m）
◼️什么是 DOM？
DOM 表示 HTML 文件的结构。
DOM是文档对象模型的缩写。它是一个允许计算机程序访问和更新文档（如 HTML 文件）的内容、结构和样式的接口。
DOM 允许 Web 开发人员使用 JavaScript 等编程语言与其网站的元素和组件进行交互。
DOM 就像一棵树
DOM 通过创建网页所有元素的表示来工作。这种表示看起来像一棵倒置的树，其中的节点和连接表示它们在文档中的层次结构。
我们在层次结构中从上到下找到的第一个对象是文档中最顶层的对象。对于 HTML，这将是根元素，它包含网页中的所有其他对象。
在第一个对象下方，该结构产生了看起来像树枝的分支。
每个对象在 DOM 中都有一个特定的位置。DOM 层次结构遵循文档中对象的层次结构。
💡 提示：标题、段落、图像或链接都是在 DOM 中表示为对象的 HTML 元素示例。
◼️为什么 DOM 很重要？
DOM 是浏览器表示文档结构的方式。多亏了 DOM，我们可以在 JavaScript 中访问网页的元素并在我们的代码中操作它们。
DOM 还有一组方法，允许开发人员访问、操作甚至从树中删除对象。我们甚至可以动态修改用户看到的内容。
例如，当我们收到用户的更新信息时，我们可以更改元素的文本或动态添加新元素。
这就是为什么 DOM 对开发人员来说非常重要。它使我们能够创建不仅仅是显示内容和信息的交互式网页。
使用 DOM，我们可以创建交互式用户体验。我们可以创建动画，更改用户看到的信息，并对用户与网页交互时发生的事件做出反应。
基本上，DOM 使 Web 成为我们如今所熟知和喜爱的神奇工具，因此它对 Web 开发人员来说非常重要。在本课程中，您将学习它的工作原理和使用方法。
◼️重要的 DOM 概念
DOM 看起来像一棵树（但倒置）。
当我们使用 DOM 时，我们经常会发现用于描述层次结构中节点之间关系的术语。
这些是开始使用 DOM 时您应该熟悉的一些最重要的术语：
- 根节点：根节点是DOM树中最顶层的节点。它是层次结构中唯一没有父节点的节点。
- 父节点：包含另一个节点的节点。
- 子节点：直接包含在另一个节点中的节点。
- 后代节点：位于另一个节点（直接或间接）内的节点。
- 兄弟节点：在 DOM 层次结构中处于同一级别且位于同一父节点内的节点。
在此示例中，我们可以使用右侧的图表来表示将为该 HTML 文件生成的 DOM。
让我们更详细地看看这个 DOM：
- 我们可以看到一个根节点 ( html)。
- 根节点有两个子节点（head和body）。
- 该head节点有一个子节点（title）。
- 该body节点有两个子节点（h1和p）。
- 和h1节点p是兄弟节点。它们在层次结构中处于同一级别，并且共享相同的父节点。
- 底部的节点没有任何子节点，因为它们代表文本。除了 HTML 元素之外，节点还可以表示文本和注释。
💡提示：在课程中，您将了解节点和元素之间的区别。这个非常重要。
◼️如何从 DOM 中选择元素
能够从 DOM 中选择 HTML 元素对于访问网站结构非常有帮助。这些元素表示为具有我们可以在 JavaScript 中使用的属性和方法的对象。
我们有五种方法从 DOM 中选择一个元素：
方法.getElementById()_
此方法用于通过其 id 获取元素。由于每个页面的元素 ID 应该是唯一的，因此这是从 DOM 层次结构中选择特定元素的完美方式，即使存在多个相似或相同的元素。
这是一个例子：
const container = document.getElementById('container');
💡提示：这只会返回一个元素，因为 id 应该是唯一的。
方法.getElementsByClassName()_
但是，如果我们的目标是获取具有特定类的所有元素，我们应该改用此方法。
const pizzaToppings = document.getElementsByClassName('topping');
这将返回一个HTMLCollection对象。这种类型的对象是一个类似数组的对象，其中包含一组 HTML 元素。
方法.getElementsByTagName()_
有时，我们可能还需要选择特定类型的所有元素，例如所有的divs或所有的ps。为此，我们有这个非常有用的方法。
const myToppings = document.getElementsByTagName('li');
此方法还返回一个HTMLCollection，因为我们可以有多个具有相同标签名称的元素。
方法.querySelect()_
我们还有一种方法可以选择与特定选择器匹配的第一个元素。使用这种方法，我们可以编写更复杂的选择器，类似于我们在 CSS 中使用的选择器，以根据更复杂的标准选择元素。
const firstNotBrownTopping = document.querySelector('ul li:not(.brown-topping)');
💡提示：此方法只返回一个元素——第一个与选择器匹配的元素，按照它们在 DOM 层次结构中出现的顺序排列。
方法.querySelectAll()_
而如果我们需要选择匹配特定选择器的所有元素，我们只需要在最后添加 All 即可。
const orangeToppings = document.querySelectorAll('.topping.orange-background');
✨太棒了。这些是我们可以用来从 DOM 中选择元素的主要 JavaScript 方法。现在让我们看看如何添加和删除元素。
◼️如何操作 DOM
DOM 如此强大的另一个关键方面是它允许我们操纵文档的初始层次结构来添加、删除和修改元素。
首先，我们可以创建一个元素。
例如：
const newTopping = document.createElement('li');
一旦我们有了新元素，我们就可以将它添加到我们现有的 DOM 层次结构中。
如果我们有对要附加它的父元素的引用，toppingsList我们可以通过调用.append()方法来添加它，如下所示：
toppingsList.append(newTopping);
我们还可以使用以下方法删除元素.remove()：
newTopping.remove();
我们可以修改元素的内容，比如它的内部 HTML 或内部文本：
newTopping.innerText = 'Extra Cheese';
newTopping.innerText = '<div class="new-topping">Extra Cheese</div>';
◼️如何分配样式
我们还可以使用点符号来访问和修改元素的样式。我们甚至可以添加和删除元素的类。
newTopping.classList.add('topping', 'brown-background');
newTopping.style.backgroundColor = 'blue';
newTopping.style.color = '#6dff00';
newTopping.style.textTransform = 'uppercase';
这非常强大，您将在我们构建项目的课程中学习如何做到这一点。
💡提示：我们还可以在 JavaScript 中检测和处理DOM 事件。事件可以由用户交互触发，例如单击鼠标按钮，或由浏览器触发，例如图像加载完成时。
（更|多优质内|容：java567 点 c0m）
