如何遍历DOM

　　介绍

小编给大家分享一下如何遍历DOM,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!

我们知道可以使用文档<代码> 对象的内置方法通过ID、类,标签名和查询选择器来访问HTML元素,DOM是由节点树构成的,文档<代码> 节点位于根,其他每个节点(包括元素,注释和文本节点)都作为各个分支的节点。

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

HTML术语

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

& lt; a  href=https://www.yisu.com/zixun/回家" index . HTML ">

这里我们有一个锚元素,它是一个到<代码> index . HTML> <李>

<代码> 是标签

<李>

<代码> href> <李>

<代码>索引。> <李>

<代码> 回家是文本

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

& lt; ! DOCTYPE  html> 　　& lt; html> 　　& lt;才能head> 　　,,,& lt; title> Learning 从而DOM 　　& lt;才能/head> 　　 　　& lt;才能body> 　　,,,& lt; h2> Document  Object  Model 　　& lt;才能/body> 　　

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

Home

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

let navLink = document.getElementById('nav');

输出：

Home

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

navLink.href = 'https://github.com/qq449245884/xiaozhi';

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

navLink.textContent = '跳转取前端小智 Github';

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

跳转取前端小智 Github

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

DOM 树和节点

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

  • 元素节点

  • 文本节点

  • 注释节点

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

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

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

& lt; ! DOCTYPE  html> 　　& lt; html> 　　& lt;才能head> 　　,,,& lt; title> Learning  About  Nodes 　　& lt;才能/head> 　　 　　& lt;才能body> 　　,,,& lt; h2> An  element  node 　　,,,& lt; !——, a  comment  node ——比; 　　,,,A  text 节点。 　　& lt;才能/body> 　　& lt;/html>

<代码> html 元素节点是父节点。<代码> 和<代码> 身体是兄弟节点,它们是<代码> html代码的子节点。<代码> 身体包含三个子节点,它们都是兄弟节点,节点的类型不会改变其嵌套的级别。

注意:当使用html生成的DOM时,html源代码的缩进将创建许多空文本节点,这些节点在<代码>

如何遍历DOM