当前位置:  首页  >  前端开发  >  JavaScript

深入理解DOM树和节点

在本教程中,我们将回顾HTML术语,这对于使用JavaScript和DOM至关重要,我们将了解DOM树,节点是什么以及如何识别最常见的节点类型。最后,我们将超越控制台并创建一个JavaScript程序来交互式地修改DOM。

DOM通常被称为DOM树,由称为节点的对象树组成。在DOM简介中,我们讨论了文档对象模型(DOM),如何使用控制台访问document对象和修改其属性,以及HTML源代码和DOM之间的区别。

在本教程中,我们将回顾HTML术语,这对于使用JavaScript和DOM至关重要,我们将了解DOM树,节点是什么以及如何识别最常见的节点类型。最后,我们将超越控制台并创建一个JavaScript程序来交互式地修改DOM。

HTML术语

理解HTML和JavaScript术语对于理解如何使用DOM至关重要。让我们简要回顾一些HTML术语。

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

Home

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

  • a是标签

  • href是属性

  • index.html是属性值

  • Home是文字。

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

我们将与合作index.html从以前的教程:



  
    Learning the DOM
  

  
    

Document Object Model

使用JavaScript访问元素的最简单方法是使用id属性。让我们将上面的链接添加到我们的index.html文件id中nav。

Home

在浏览器窗口中加载或重新加载页面并查看DOM以确保代码已更新。

我们将使用该getElementById()方法来访问整个元素。在控制台中,键入以下内容:

document.getElementById('nav');
Home

我们使用了检索整个元素getElementById()。现在,我们不是每次想要访问nav链接时都键入该对象和方法,而是将元素放入变量中以便更轻松地使用它。

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

该navLink变量包含我们的锚元素。从这里,我们可以轻松修改属性和值。例如,我们可以通过更改href属性来更改链接的位置:

navLink.href = 'https://www.wikipedia.org';

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

navLink.textContent = 'Navigate to Wikipedia';

现在,当我们在控制台中查看元素或通过检查Elements标记时,我们可以看到元素的更新方式。

navLink;
[secondary_label Output] Navigate to Wikipedia

这也反映在网站的前端。

刷新页面将使所有内容恢复为原始值。

此时,您应该了解如何使用document方法来访问元素,如何将元素分配给变量,以及如何修改元素中的属性和值。

DOM树和节点

DOM中的所有项都定义为节点。有许多类型的节点,但我们最常使用的主要有三种:

  • 元素节点

  • 文本节点

  • 评论节点

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

DOM由嵌套节点的树结构组成,通常称为DOM树。您可能熟悉祖先的家谱,其中包括父母,孩子和兄弟姐妹。DOM中的节点也称为父节点,子节点和兄弟节点,具体取决于它们与其他节点的关系。

要演示,请创建一个nodes.html文件。我们将添加文本,注释和元素节点。



  
    Learning About Nodes
  

  
    

An element node

A text node.

所述html元素节点是父节点。head并且body是兄弟姐妹,孩子的html。body包含三个子节点,它们都是兄弟节点 - 节点的类型不会改变它嵌套的级别。

注意:使用HTML生成的DOM时,HTML源代码的缩进将创建许多空文本节点,这些节点在DevTools Elements选项卡中不可见。

识别节点类型

文档中的每个节点都有一个节点类型,可以通过该nodeType属性访问。Mozilla Developer Network具有所有节点类型常量的最新列表。下面是我们在本教程中使用的最常见节点类型的图表。

1

随着h1元件选择,你会看到1作为输出,我们可以看到关联到ELEMENT_NODE。做文字和注释是相同的,他们将输出3和8分别。

当您知道如何访问元素时,您可以在不突出显示DOM中的元素的情况下查看节点类型。

document.body.nodeType;

Console:

1

除此之外nodeType,您还可以使用该nodeValue属性获取文本或注释节点的值,并nodeName获取元素的标记名称。

使用Events修改DOM

到目前为止,我们只看到如何修改控制台中的DOM,我们看到它是暂时的; 每次刷新页面时,更改都会丢失。我们可以结合在本教程中学到的内容来创建一个交互式按钮,在单击时执行使用控制台更新了正文的背景颜色的操作。

让我们回到我们的index.html文件并添加一个button元素id。我们还将在新js目录中添加指向新文件的链接js/scripts.js。



  
    Learning the DOM
  

  
    

Document Object Model

扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | json解析格式化 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有