So durchqueren Sie das DOM-js-Tutorial-php.cn

Verwandte Empfehlungen: „Javascript-Video-Tutorial“

Wir wissen, dass wir die integrierten Methoden des document-Objekts verwenden können, um über ID, Klasse, Tag-Name usw. auf HTML-Elemente zuzugreifen Abfrageselektor. Das DOM besteht aus einem Knotenbaum, wobei sich der Knoten document an der Wurzel befindet und jeder andere Knoten (einschließlich Elemente, Kommentare und Textknoten) als Knoten für jeden Zweig dient. document对象的内置方法通过ID，类，标签名和查询选择器来访问HTML元素。 DOM 是由节点树构成的，document 节点位于根，其他每个节点（包括元素，注释和文本节点）都作为各个分支的节点。

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

HTML术语

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

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

Nach dem Login kopieren

这里我们有一个锚元素，它是一个到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>

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

输出：

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

到这里，我们应该了解如何使用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>

Nach dem Login kopieren

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

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

识别节点类型

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

In diesem Tutorial gehen wir auf einige HTML-Terminologie ein, die für die Arbeit mit JS und dem DOM sehr wichtig ist. Wir stellen den DOM-Baum und die Knoten vor und zeigen, wie man die häufigsten Knotentypen identifiziert. Erstellen Sie abschließend ein JS-Programm, um das DOM interaktiv zu ändern.

HTML-Terminologie

Werfen wir zunächst einen Blick auf dieses HTML-Element.

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;
})

Nach dem Login kopieren

So durchqueren Sie das DOM

HTML术语

DOM 树和节点

识别节点类型

HTML-Terminologie

DOM-Baum und Knoten

Knotentypen identifizieren

使用事件修改DOM

总结