什么是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. 首师大附中互测题：50229234海岛帝国：独立之战【C002】

    [C002]50229234海岛帝国:独立之战[难度C]———————————————————————————————————————————————————————————————————————— ...

  2. 【BZOJ1672】[Usaco2005 Dec]Cleaning Shifts 清理牛棚 动态规划

    [BZOJ1672][Usaco2005 Dec]Cleaning Shifts Description Farmer John's cows, pampered since birth, have ...

  3. 点 击 直 接加我QQ的功能

    <a target="_blank" href="tencent://message/?uin=2814920598&Site=&Menu=yes& ...

  4. HDU 1556 线段树或树状数组，插段求点

    1.HDU 1556  Color the ball   区间更新,单点查询 2.题意:n个气球,每次给(a,b)区间的气球涂一次色,问最后每个气球各涂了几次. (1)树状数组 总结:树状数组是一个查 ...

  5. First step to Signal —— in Linux C Programing

    1. What's signal 信号是软件中断,提供了一种处理异步事件的方法.(见<Unix环境高级编程>)一般使用时需包含 signal.h 库. 每个信号命名由SIG开头,实际值为正 ...

  6. RMQ 数据结构

    RMQ 常用的数据结构之一 直接上代码 马克好来 是个好板子 #include <stdio.h> #define min(a,b) a<b ? a : b ],d[][]; voi ...

  7. Ubuntu 14.04 安装pdf阅读器

    1. 个人推荐 okular. 关于安装okular的原因,可以很好的做到护眼功能. Ubuntu 14.04 自带的阅读器,因为白色太刺眼,长时间使用对眼睛不好. 对于,长时间编程的朋友们习惯夜间模 ...

  8. Learn ZYNC (5)

    今天为了熟悉axiLite的自定义ip核设计, 把LED和SW的往AXI总线输入输出定义在一个ip核中, BD设计如下: ip核顶层文件(增加了LED_Out和SW_In的定义)mygpio_v1.0 ...

  9. Win7 IIS下启用ASP.NET

    问题产生的原因 先装的Win7,未启用IIS, 后启用IIS功能,即使选中开发选项只能默认打开ASP.net 中FrameWork2的支持,其它 版本的FrameWork默认IIS不支持,需要手工开启 ...

  10. 【iCore3应用开发平台】发布 iCore3 应用开发平台PID控制代码

    说明:1.本代码包包含FPGA和STM32F407两部分内容2.FPGA工程为出厂代码FPGA工程,版本为REV43.STM32F407为只含PID控制的ARM工程4.在使用风扇过程中,请勿将手伸入扇 ...