如何遍历DOM

时间 2021-01-12

标签 html 前端 vue node git github 面试浏览器微信 dom 栏目 HTML 繁體版

原文原文链接

做者： Tania Rascia
译者：前端小智
来源：Taniarcia

点赞再看，微信搜索 【大迁世界】,B站关注【前端小智】这个没有大厂背景，但有着一股向上积极心态人。本文 GitHub https://github.com/qq44924588... 上已经收录，文章的已分类，也整理了不少个人文档，和教程资料。

最近开源了一个 Vue 组件，还不够完善，欢迎你们来一块儿完善它，也但愿你们能给个 star 支持一下，谢谢各位了。html

github 地址：https://github.com/qq44924588...前端

简介

咱们知道可使用document对象的内置方法经过ID，类，标签名和查询选择器来访问HTML元素。 DOM 是由节点树构成的，document
节点位于根，其余每一个节点（包括元素，注释和文本节点）都做为各个分支的节点。vue

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

HTML术语

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

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

这里咱们有一个锚元素，它是一个到index.html的连接。github

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

开头和结尾标记之间的全部内容组合在一块儿构成了整个HTML元素。面试

<!DOCTYPE html>
<html lang="en">
  <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('nav');

输出：dom

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

咱们能够经过更改href属性来更改连接的地址：

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

咱们还能够经过textContent属性来更改文本内容:

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

接着，直接在控制台输入 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 上查看。下面是咱们比较常见节点类型。

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

在 Developer Tools 的Elements选项卡中，你可能会注意到，每当单击并突出显示DOM中的任何一行时，它旁边就会出现== $0的值。经过输入$0，这是访问开发人员工具中当选中元素的一种很是方便的方法。

经过 F12 选中一个元素，如咱们选中 h1 标签：

在控制台中，使用nodeType属性获取当前选定节点的节点类型。

$0.nodeType;
// 1

选择h1元素后，能够看到控制台输出 1，它与ELEMENT_NODE相关。对文本和注释执行相同的操做，分别输出3和8。

除了nodeType以外，还可使用nodeValue属性获取文本或注释节点的值，并使用nodeName获取元素的标签名。

使用事件修改DOM

到目前为止，咱们只看到了如何在控制台中修改DOM，接着咱们经过事件的方式来跟 Dom 玩玩。

回到index.html文件，添加一个带有id的button元素，并新建 script.js 引入其中。

JS 中的事件是用户所作的动做。当用户将鼠标悬停在一个元素上，或单击一个元素，或按下键盘上的一个特定键时，这些都是事件类型。在这个特殊的例子中，咱们但愿咱们的按钮侦听并准备在用户单击它时执行操做。咱们能够经过向按钮添加一个事件监听器来作到这一点。

在 scripts.js中首先找到 button 元素，并监听一个 click 事件，在点击事件里面咱们去更网页的背景颜色：

let button = document.getElementById('changeBackground')

button.addEventListener('click', () => {
  document.body.style.backgroundColor = 'fuchsia'
})

存该文件后，在浏览器中刷新index.html。单击按钮，事件将触发。

总结

在本文中，咱们了解了DOM 是如何构形成节点树的，节点树一般是HTML元素、文本或注释，咱们建立了一个脚本，容许用户修改网站，而没必要手动在开发人员控制台中输入代码。

我是小智，咱们下期见。

原文：https://www.taniascia.com/how...

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

交流

文章每周持续更新，能够微信搜索「大迁世界」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录，整理了不少个人文档，欢迎Star和完善，你们面试能够参照考点复习，另外关注公众号，后台回复福利，便可看到福利，你懂的。