DOM을 탐색하는 방법-JS 튜토리얼-php.cn

우리는 document 객체의 내장 메소드를 사용하여 ID, 클래스, 태그 이름 및 태그를 통해 HTML 요소에 액세스할 수 있다는 것을 알고 있습니다. 쿼리 선택기. DOM은 루트에 document 노드가 있는 노드 트리와 각 분기의 노드 역할을 하는 다른 노드(요소, 주석 및 텍스트 노드 포함)로 구성됩니다. document对象的内置方法通过ID，类，标签名和查询选择器来访问HTML元素。 DOM 是由节点树构成的，document 节点位于根，其他每个节点（包括元素，注释和文本节点）都作为各个分支的节点。

在本教程中，我们回顾一些HTML术语，这对使用 JS 和DOM非常重要，我们会介绍一下DOM树，节点，以及如何识别最常见的节点类型。最后，创建一个 JS 程序来交互式地修改DOM。

HTML术语

首先，我们看一下这个HTML元素。

<a href="index.html">Home</a>

로그인 후 복사

这里我们有一个锚元素，它是一个到index.html的链接。

a 是标签
href 是属性
index.html 是属性值
Home 是文本

开头和结尾标记之间的所有内容组合在一起构成了整个HTML元素。

<!DOCTYPE html>
<html>
  <head>
    <title>Learning the DOM</title>
  </head>

  <body>
    <h1>Document Object Model</h1>
  </body>
</html>

로그인 후 복사

使用 JS 访问元素的最简单方法是通过id属性，接着为上面的 a 标签添加一个id为nav值。

<a id="nav" href="index.html">Home</a>

로그인 후 복사

我们可以通过getElementById()方法来获取 a 标签。在控制台输入：

let navLink = document.getElementById(&#39;nav&#39;);

로그인 후 복사

输出：

<a id="nav" href="index.html">Home</a>

로그인 후 복사

我们可以通过更改href属性来更改链接的地址：

navLink.href = &#39;https://github.com/qq449245884/xiaozhi&#39;;

로그인 후 복사

我们还可以通过textContent属性来更改文本内容:

navLink.textContent = &#39;跳转取前端小智 Github&#39;;

로그인 후 복사

接着，直接在控制台输入 navLink 就可以看到我们 a 标签更新后的内容：

<a id="nav" href="https://github.com/qq449245884/xiaozhi">跳转取前端小智 Github</a>

로그인 후 복사

到这里，我们应该了解如何使用document 方法访问元素，如何将元素分配给变量以及如何修改元素中的属性和值。

DOM 树和节点

DOM中的所有元素都被定义为节点。节点的类型有很多种，但我们最常用的主要有三种：

元素节点
文本节点
注释节点

当HTML元素是DOM中的一个项时，它被称为元素节点。元素之外的任何单独文本都是一个文本节点，HTML 注释是一个注释节点。除了这三种节点类型之外，document 本身也是一个document 节点，它是所有其他节点的根。

DOM由嵌套节点的树结构组成，通常称为DOM树。我们知道祖先的家谱，该谱系由父母，孩子和兄弟姐妹组成。 DOM中的节点也称为父级，子级和同级，具体取决于它们与其他节点的关系。

为了演示，创建一个nodes.html文件，添加文本，注释和元素节点。

<!DOCTYPE html>
<html>
  <head>
    <title>Learning About Nodes</title>
  </head>

  <body>
    <h1>An element node</h1>
    <!-- a comment node -->
    A text node.
  </body>
</html>

로그인 후 복사

html元素节点是父节点。head和body是兄弟节点，它们是 html 的子节点。body包含三个子节点，它们都是兄弟节点，节点的类型不会改变其嵌套的级别。

注意:当使用HTML生成的DOM时，HTML源代码的缩进将创建许多空文本节点，这些节点在DevTools Elements选项卡中是不可见的。了解DOM中的空白符更多知识请访问 https://developer.mozilla.org...

识别节点类型

文档中的每个节点都有一个节点类型，可以通过nodeType属性访问该类型，更多节点类型大家可以到 MDN 上查看。下面是我们比较常见节点类型。

이 튜토리얼에서는 JS 및 DOM으로 작업할 때 매우 중요한 몇 가지 HTML 용어를 검토하고 DOM 트리, 노드 및 가장 일반적인 노드 유형을 식별하는 방법을 소개합니다. 마지막으로 DOM을 대화형으로 수정하는 JS 프로그램을 만듭니다.

HTML 용어

먼저 HTML 요소를 살펴보겠습니다.

Node Type	值	描述
ELEMENT_NODE	1	一个元素节点，例如 `<p>` 和 `<p>`
TEXT_NODE	3	`Element` 或者 `Attr` 中实际的 `文字`
COMMENT_NODE	8	注释节点，如`<!-- an HTML comment -->`

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">let button = document.getElementById(&#39;changeBackground&#39;)

button.addEventListener(&#39;click&#39;, () => {
  document.body.style.backgroundColor = &#39;fuchsia&#39;
})

로그인 후 복사