在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节点的分类以及简单介绍了，关于节点的各种属性以及方法请点击：

简述HTML DOM及其节点分类的更多相关文章

  1. DOM树节点和事件

    一.前言:DOM树节点是JS的基础语句.通过节点,能够取到HTML代码中的任意标签,从而对其进行修改和添加各种视觉效果. 二.DOM树节点    DOM节点分为三大类: 元素节点,属性节点,文本节点  ...

  2. JavaScript HTML DOM 元素(节点)

    JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素 ...

  3. JavaScript之DOM创建节点

    上几篇文章中我们罗列了一些获取HTML页面DOM对象的方法,当我们获取到了这些对象之后,下一步将对这些对象进行更改,在适当的时候进行对象各属性的修改就形成了我们平时看到的动态效果.具体js中可以修改D ...

  4. dom操作节点之常用方法

    DOM:获取节点:{1. document.getElementById (元素id):通过元素id找到节点2. document.getElementsByClassName (元素类名classN ...

  5. 围绕DOM元素节点的增删改查

    HTML 文档中的所有内容都是节点: 整个文档是一个文档节点 document 每个 HTML 元素是元素节点 element HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点 注释是 ...

  6. 【cs224w】Lecture 6 - 消息传递 及 节点分类

    目录 Node Classification Probabilistic Relational Classifier Iterative Classification Belief Propagati ...

  7. jQuery 中使用 DOM 操作节点，对页面中的表格实现增、删、查、改操作

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用 DOM 操作节点,对页面中的表格实现增.删.查.改操作 点击"增加"超链接时,将表格中的第一条数据添加到表格的末尾 ...

  8. DOM 元素节点几何量与滚动几何量

    当在 Web 浏览器中查看 HTML 文档时,DOM 节点被解析,并被渲染成盒模型(如下图),有时我们需要知道一些信息,比如盒模型的大小,盒模型在浏览器中的位置等等,本文我们就来详细了解下元素节点的几 ...

  9. DOM Element节点类型详解

    上文中我们讲解了 DOM 中最重要的节点类型之一的 Document 节点类型,本文我们继续深入,谈谈另一个重要的节点类型 Element . 1.概况 Element 类型用于表现 HTML 或 X ...

随机推荐

  1. linux 安装maven

    set maven environment M2_HOME=/tool/apache-maven-3.3.9export M2_HOME  PATH=$PATH:$M2_HOME/bin  expor ...

  2. libvirt 安装篇

    1. 环境:Centos 7     python 2.7 2. 安装 sudo yum install  gcc  python-devel  libvirt libvirt-devel sudo ...

  3. PYTHON lambda表达式

    lambda相当于def定义函数     一一对应

  4. MongoDB安装

    安装 1>设置MongoDB目录 cd /home/apps      附:centOS下创建目录命令  mkdir /home/apps 2>下载mongodb curl -O http ...

  5. Entity Framework 简单查询

    前言 首先来简单的复习一下如何使用Code First. 第一步还是先建立一个控制台的应用程序,然后通过Nuget添加Entity Framework.那么同时会给packages.config和Ap ...

  6. 下载旧版本的NDK

    在官网找不到旧版本的下载地址,只能取巧了. 写该随笔的时候,NDK最新的版本是r12,见 https://developer.android.com/ndk/downloads/index.html# ...

  7. C/C++: C++变量和基本类型

    1. 如何选择类型的准则 当明确知晓数值不可能为负的时候,应该选择无符号类型. 使用int执行整数运算的时候,在实际应用中,short常常显得太小而long一般和int有一样的尺寸,如果数值超过了in ...

  8. 第三天--html列表

    <!Doctype html><html>    <head>        <meta charset="utf-8">      ...

  9. Centos7无法上网

    详情参照步骤:http://www.cnblogs.com/yxyht/p/5063505.html

  10. CISCO VLAN ACL

    对于cisco VLAN ACL 首先得定义 standard ACL或 extented ACL用于抓取流量 注意这里的抓取流量不是最终的对流量的操作,而是决定什么样的流量用VLAN ACL 来处理 ...