简述HTML DOM及其节点分类

在JavaScript中，document这个对象大家一定很熟悉，哪怕是刚刚开始学习的新人，也会很快接触到这个对象。而document对象不仅仅是一个普通的JavaScript内置对象，它还是一个巨大API的核心对象，这个巨大的API就是DOM（Document Object Model），它将文档的内容呈现在JS面前，并赋予了JS操作文档的能力。

在这里不得不提的概念则是DOM树，DOM树体现着HTML页面的层级结构，学习中经常提到的父元素子元素的说法也是建立在树这种数据结构的基础之上的。而DOM树有DOM文档树和DOM元素树两种，上图就是一颗DOM元素树，它只包含元素节点，而DOM文档树则包含文档中所有内容。

一颗DOM元素树

一篇HTML文档及其DOM文档树。

HTML页面中的所有内容都会体现在DOM文档树中，要理解这种结构，对构成它的每个节点就要先有了解。下面是DOM节点的基本类别，以及各自类别基本属性的值及简单介绍：

节点类型	nodeType	nodeName	nodeValue
元素节点	1	标签名（大写）	null
属性节点	2	属性名	属性值
文本节点	3	#text	文本内容
CDTAT节点	4	#cdata-section	CDATA区域的内容
实体引用名称节点	5	引用名称	null
实体名称节点	6	实体名称	null
处理指令节点	7	target	entire content cluding the target
注释节点	8	#comment	注释内容
文档节点	9	#document	null
文档类型节点	10	doctype的名称	null
文档片段节点	11	#document-fragment	null
DTD声明节点	12	符号名称	null

注：1、在以上的节点分类中，nodeType为4、5、6、7、12的四种节点，是针对XML文档而言的，在HTML中并未出现，在这里就不详细介绍了。

2、在以下演示中，默认已经定义了此方法：

一、元素节点

每一个HTML标签都是一个元素节点：

运行及结果：

二、属性节点

元素的属性在DOM中以属性节点来表示。

运行及结果：

这里需要特殊说明下，一般获取属性节点都会直接想到使用DOM中的getAttribute（）方法或者直接根据属性名用‘.’去访问，然而在操作过程中，JavaScript会直接将获得的值转换成字符串，而不是以属性节点的方式呈现，就无法访问它的nodeType等属性了，如下：

关于属性节点，还有一个重点：属性节点不是HTML DOM树中的一部分 如下：

没有办法通过DOM遍历方法获取属性节点，只能通过attributes属性、getAttributes（）方法以及‘.’来访问属性节点。

三、文本节点

直观理解，文本节点即是指向文本的节点~

运行及结果：

以上三种节点是在日常使用中最常见的三种节点了，另外几种节点使用并不多：

四、注释节点

别以为代码注释是只能在开发环境中看到的~在浏览器内HTML文档中，同样包含着注释节点，我们可以对其进行各种DOM操作，只不过注释节点不会渲染在页面中而已。

运行及结果：

五、文档节点：

文档节点表示整个文档，也是DOM文档树的根节点。

六、文档类型节点

运行及结果：

七、文档片段节点

文档片段节点是我在写本篇博客的时候还几乎一无所知的一种节点，在这里学习了这篇博客：深入理解DOM节点类型第四篇——文档片段节点DocumentFragment

以下是现学现卖：

DocumentFragment，文档片段节点，是唯一在HTML文档中没有对应标记的节点，也就是说它不会在我们编写HTML代码的时候出现在我们的视野中。文档片段是一种轻量级的文档，可以包含很多DOM节点。在前端操作中，常常需要对文档树中的DOM节点做各种各样的操作，这个时候，对应的操作就会造成页面重绘。如果DOM操作非常多的话，就会不断地进行页面重绘，带来沉重的浏览器负担，拖慢运行速度。

如果将节点加入文档片段之中，这些节点就会脱离文档树，这个时候进行DOM操作的话就不会造成页面重绘。等大量DOM操作都执行完成之后，再将文档片段添加到页面中，这时完成操作的节点会一次性渲染完毕，避免了多次渲染带来的性能拖慢。

要使用文档片段，JavaScript提供了document.createDocumentFragment()方法。关于文档片段的具体使用和性能提升，会在另外的博文中另行研究，这里看一下文档片段节点的信息：

八、DTD声明节点

DTD为Document Type Definition，为文档类型定义。实际上DTD节点也是主要针对XML文档而言的，在HTML中也不直接含有DTD声明节点，只有包含着DTD声明的文档类型节点（10）。

我们都知道HTML有HTML4.01，XHTML等等，每种版本的标记语言中还有三种细分的定义：Strict（严格）、Transitional（过渡）、Frameset（框架集）。如果没写DTD，浏览器就不知道正在处理的文档是用哪种标记语言来写的，就造成了解析结果的不同，最常见的错误就是用XHTML较为严格的规范来解析以HTML这种宽松标准所构建的文本，自然会出现很多问题。w3c给出的解释是：由于HTML4.01基于SGML，DTD规定了标记语言的规则，故需要在HTML声明中引用DTD。在如今的HTML5时代，由于HTML5不基于SGML，故我们也不再需要在文档声明中包含DTD信息，使用<!DOCTYPE HTML>即可。

以上就是HTML DOM节点的分类以及简单介绍了，关于节点的各种属性以及方法请点击：

转载于:https://www.cnblogs.com/zhuwq585/p/6075119.html

简述HTML DOM及其节点分类相关推荐

GraphSAGE节点分类
GraphSAGE 节点分类简介 GCN(Graph Convolutional Network)的出现带动了将神经网络技术用于图数据的学习任务中去,并产生了大量的方法,这类方法我们统称为图神经网络 ...
【CS224W】(task7)标签传播与节点分类（semi-supervised）
note 对某一节点的标签进行预测,需要其本身特征.邻居的标签和特征.message passing的假设是图中相似的节点之间会存在链接,也就是相邻节点有标签相同的倾向.这种现象可以用homophil ...
pytorch 训练过程acc_【图节点分类】10分钟就学会的图节点分类教程，基于pytorch和dgl...
图神经网络中最流行和广泛采用的任务之一就是节点分类,其中训练集/验证集/测试集中的每个节点从一组预定义的类别中分配一个真实类别. 为了对节点进行分类,图神经网络利用节点自身的特征,以及相邻节点和边的特 ...
XML DOM – 导航节点概述
通过节点间的关系访问节点树中的节点,通常称为导航节点("navigating nodes").可通过使用节点间的关系对节点进行导航. 导航 DOM 节点通过节点间的关系访问节点树 ...
“不传递消息、不使用邻接矩阵、在边集上训练”：从对比链接中蒸馏自知识：非消息传递的图节点分类...
来源:深度学习与图网络本文约800字,建议阅读5分钟本文从图网络的边中蒸馏知识,使 MLP 在图节点分类任务上达到了 GNN 的表现. 这篇文章从图网络的边中蒸馏知识,使 MLP 在图节点分类任务上 ...
html dom 替换节点,从javascript dom文本节点替换
我正在使用javascript处理xhtml.我通过连接nodeType == Node.TEXT_NODE的所有子节点的nodeValue来获取div节点的文本内容.从javascript dom文 ...
PYG教程【四】Node2Vec节点分类及其可视化
本文主要是介绍如何用PyTorch Geometric快速实现Node2Vec节点分类,并对其结果进行可视化. 整个过程包含四个步骤: 导入图数据(这里以Cora为例) 创建Node2Vec模型训练 ...
PYG教程【三】对Cora数据集进行半监督节点分类
Cora数据集 PyG包含有大量的基准数据集.初始化数据集非常简单,数据集初始化会自动下载原始数据文件,并且会将它们处理成Data格式. 如下图所示,Cora数据集中只有一个图,该图包含2708个节点 ...
图卷积节点分类_在节点分类任务上训练图卷积网络
图卷积节点分类 This article goes through the implementation of Graph Convolution Networks (GCN) using Spek ...

简述HTML DOM及其节点分类

简述HTML DOM及其节点分类相关推荐

最新文章

热门文章