什么是DOM？

通过 JavaScript，您可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项目。要改变页面的某个东西，JavaScript就需要对HTML文档中所有元素进行访问的入口。这个入口，连同对HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。在 1998 年，W3C 发布了第一级的 DOM 规范。

这个规范允许访问和操作 HTML 页面中的每一个单独的元素。所有的浏览器都执行了这个标准，因此，DOM 的兼容性问题也几乎难觅踪影了。DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。

DOM 被分为不同的部分（核心、XML及HTML）和级别（DOM Level 1/2/3）：

Core DOM               定义了一套标准的针对任何结构化文档的对象

XML DOM               定义了一套标准的针对 XML 文档的对象

HTML DOM               定义了一套标准的针对 HTML 文档的对象。

节点

根据 DOM，HTML 文档中的每个成分都是一个节点。

DOM 是这样规定的：

  • 整个文档是一个文档节点
  • 每个 HTML 标签是一个元素节点
  • 包含在 HTML 元素中的文本是文本节点
  • 每一个 HTML 属性是一个属性节点
  • 注释属于注释节点

Node 层次

节点彼此都有等级关系。HTML 文档中的所有节点组成了一个文档树（或节点树）。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。

下面这个图片表示一个文档树（节点树）：

文档树（节点数）        请看下面这个HTML文档：

<html>

  <head>

    <title>DOM Tutorial</title>

  </head>

  <body>

    <h1>DOM Lesson one</h1>

    <p>Hello world!</p>

  </body>

</html>

上面所有的节点彼此间都存在关系。除文档节点之外的每个节点都有父节点。举例，<head> 和 <body> 的父节点是 <html> 节点，文本节点 "Hello world!" 的父节点是 <p> 节点。大部分元素节点都有子节点。比方说，<head> 节点有一个子节点：<title> 节点。<title> 节点也有一个子节点：文本节点 "DOM Tutorial"。当节点分享同一个父节点时，它们就是同辈（同级节点）。比方说，<h1> 和 <p>是同辈，因为它们的父节点均是 <body> 节点。节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点，以此类推。比方说，所有的文本节点都是 <html>节点的后代，而第一个文本节点是 <head> 节点的后代。节点也可以拥有先辈。先辈是某个节点的父节点，或者父节点的父节点，以此类推。比方说，所有的文本节点都可把 <html> 节点作为先辈节点。

DOM的概念（1）的更多相关文章

  1. JavaScript---网络编程(5)-自定义对象Json、Dom模型概念讲解

    这节博客主要讲解Dom模型概念~和JSON的简单介绍 首先,还是先上out.js的代码: function println(param){ document.write(param+"< ...

  2. DOM基本概念和操作

    1.基本概念 DOM是文档对象模型(TEXT),对象是指文档中的每一个元素. 2.Window对象操作 打开方式: _blank  在新窗口还是自身窗口. Window.open 也有返回值,返回值为 ...

  3. 从零开始学 Web 之 DOM（一）DOM的概念，对标签操作

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  4. DOM的概念和简单应用：使用DOM解析XML数据

    概念:DOM是Document Object Model的简称,即文档数据模型. Oracle公司提供了JAXP(Java API for XML Processing)来解析XML.JAXP会把XM ...

  5. DOM的概念及子节点类型

    前言 DOM的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组 ...

  6. DOM的概念及子节点类型【转】

    前言 DOM的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组 ...

  7. js中BOM与DOM的概念与区别

    1.BOM 浏览器对象模型 提供了独立于内容而与浏览器窗口进行交互的对象.描述了与浏览器进行交互的方法和接口,可以对浏览器窗口进行访问和操作,譬如可以弹出新的窗口,改变状态栏中的文本,对Cookie的 ...

  8. [妙味DOM]第一课：DOM基础概念、操作

    知识点总结 childNodes.children子节点列表集合.nodeType节点类型.nodeName.nodeValue.attributes属性列表集合 childNodes和childre ...

  9. Javascript DOM基础（一）概念

    Dom基础概念: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...

随机推荐

  1. InstallShield Limited Edition制作安装文件

    由于InstallShield Limited Edition for Visual Studio的教程.资料太少,所以我今天才决定写这个文章,专门针对C#项目打包,包括打包集成Microsoft . ...

  2. 一个获取指定目录下一定格式的文件名称和文件修改时间并保存为文件的python脚本

    摘自:http://blog.csdn.net/forandever/article/details/5711319 一个获取指定目录下一定格式的文件名称和文件修改时间并保存为文件的python脚本 ...

  3. HDU 2243 考研路茫茫——单词情结(AC自动机+DP+快速幂）

    题目链接 错的上头了... 这题是DNA的加强版,26^1 +26^2... - A^1-A^2... 先去学了矩阵的等比数列求和,学的是第二种方法,扩大矩阵的方法.剩下就是各种模板,各种套. #in ...

  4. db2 import export load

    DB2中所谓的数据移动,包括: 1. 数据的导入(Import) 2. 数据的导出(Export) 3. 数据的装入(Load) 导入和装入都是利用DB2的相关命令把某种格式的文件中的数据保存到数据库 ...

  5. ZeroMQ接口函数之 ：zmq_curve_keypair - 生成一个新的CURVE 密钥对

    ZeroMQ 官方地址 :http://api.zeromq.org/4-0:zmq_curve_keypair zmq_curve_keypair(3) ØMQ Manual - ØMQ/4.1.0 ...

  6. 非递归创建二叉树（ C++队列 ）

    非递归按照 层序 创建二叉树,利用 队列(即可先进先出特点)存放已访问的结点元素的地址. 初始化:front=rear= -1: 每储存一个结点元素 rear+1 ,利用 rear%2==0 来使 f ...

  7. 在C#用HttpWebRequest中发送GET/HTTP/HTTPS请求

    通用辅助类  下面是我编写的一个辅助类,在这个类中采用了HttpWebRequest中发送GET/HTTP/HTTPS请求,因为有的时候需 要获取认证信息(如Cookie),所以返回的是HttpWeb ...

  8. EmptyResultDataAccessException

    报此错误 :org.springframework.dao.EmptyResultDataAccessException: Incorrect result size: expected 1, act ...

  9. Java关键字介绍

    关键字 描述 abstract 抽象方法,抽象类的修饰符 assert 断言条件是否满足 boolean 布尔数据类型 break 跳出循环或者label代码段 byte 8-bit 有符号数据类型 ...

  10. JavaScript：Location

    读取.设置url 在url中输入:http://www.cnpiont.com:8090/index.html?user=like&pwd=123#title Console输入: docum ...