Home >Web Front-end >JS Tutorial >How to traverse the DOM

How to traverse the DOM

青灯夜游forward: 2021-01-19 10:06:321559browse

Related recommendations: "javascript video tutorial"

We know that we can use the built-in method of the document object to pass the ID. Classes, tag names and query selectors to access HTML elements. The DOM is composed of a node tree, with the document node at the root and each other node (including elements, comments and text nodes) serving as nodes for each branch.

In this tutorial, we review some HTML terminology that is important when working with JS and the DOM. We will introduce the DOM tree, nodes, and how to identify the most common node types. Finally, create a JS program to interactively modify the DOM.

HTML terminology

First, let’s take a look at this HTML element.

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

Here we have an anchor element, which is a link to index.html.

a is the tag
href is the attribute
index.html is the attribute value
Home is the text

Everything between the opening and closing tags combined together make up the entire HTML element.

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

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

The easiest way to access an element using JS is through the id attribute, then add an id to for the a tag above nav value.

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

We can get the a tag through the getElementById() method. Enter in the console:

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

Output:

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

We can change the address of the link by changing the href attribute:

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

We can also pass textContent property to change the text content:

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

Then, enter navLink directly in the console to see the updated content of our a tag :

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

At this point, we should understand how to access elements using the document method, how to assign elements to variables and how to modify attributes and values in elements.

DOM trees and nodes

All elements in the DOM are defined as nodes. There are many types of nodes, but the three most commonly used are:

Element node
Text node
Comment node

When an HTML element is an item in the DOM, it is called an element node. Any individual text outside the element is a Text Node, and an HTML comment is a Comment Section point. In addition to these three node types, document itself is also a document node, which is the root of all other nodes.

DOM consists of a tree structure of nested nodes, often called DOM tree. We know the family tree of our ancestors, which consists of parents, children, and siblings. Nodes in the DOM are also called parents, children, and siblings, depending on their relationship to other nodes.

To demonstrate, create a nodes.html file and add text, comments and element nodes.

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

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

htmlThe element node is the parent node. head and body are sibling nodes, they are the child nodes of html. body contains three child nodes, which are all sibling nodes. The type of the node will not change its nesting level.

Note: When using the HTML-generated DOM, the indentation of the HTML source code will create many empty text nodes that are not visible in the DevTools Elements tab. To learn more about whitespace in DOM, please visit https://developer.mozilla.org...

Identifying Node Type

Each node in the document has a node type, This type can be accessed through the nodeType attribute. You can view more node types on MDN. The following are our more common node types.

# #TEXT_NODE3COMMENT_NODE8Comment node, such as

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

通过 F12 选中一个元素，如我们选中 h1 标签：

How to traverse the DOM

在控制台中，使用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(&#39;changeBackground&#39;)

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

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

How to traverse the DOM

总结

在本文中，我们了解了DOM 是如何构造成节点树的，节点树通常是HTML元素、文本或注释，我们创建了一个脚本，允许用户修改网站，而不必手动在开发人员控制台中输入代码。

原文地址：https://www.taniascia.com/how-to-traverse-the-dom/

作者： Tania Rascia

译文地址：https://segmentfault.com/a/1190000038466474

更多编程相关知识，请访问：编程视频！！

Node Type	Value	Description
ELEMENT_NODE	1	An element node, such as `<p></p>` and `<p></p>`
		Element `or the actual` text in `Attr`

The above is the detailed content of How to traverse the DOM. For more information, please follow other related articles on the PHP Chinese website!

Statement：

This article is reproduced at:segmentfault.com. If there is any infringement, please contact admin@php.cn delete

Previous article：Can react be used in windows?Next article：Can react be used in windows?

See more

How to traverse the DOM

HTML terminology

DOM trees and nodes

Identifying Node Type

使用事件修改DOM

总结

Related articles