HTML DOM(一)：认识DOM
分类：
版权声明：本文为博主原创文章，转载请注明出处http://blog.csdn.net/ghsau。
什么是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> 节点作为先辈节点。
HTML DOM(一)：认识DOM的更多相关文章
- Dom Animator – 提供 Dom 注释动画的 JS 库
DOM 动画是一个极好的 JavaScript 库,用来在页面的 DOM 注释中显示小的 ASCII 动画.这对于那些检查你的代码的人是一个小彩蛋,仅此而已.它是一个独立的库,不依赖 jQuery 或 ...
- DOM – (w3school)1.DOM 方法 + 2.DOM属性 + 3.DOM 元素
1.DOM 方法 一些 DOM 对象方法 这里提供一些您将在本教程中学到的常用方法: 方法 描述 getElementById() 返回带有指定 ID 的元素. getElementsByTa ...
- dom core,html dom,css dom,jquery 中的dom操作
前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...
- 【DOM】1.DOM优化
1.JS include :DOM BOM ECMA 2.Browser 分别独立实现dom & JS as if two isolated islands 3.JS操作DOM from th ...
- 什么是BOM?,什么是DOM? BOM跟DOM之间的关系
什么是BOM? BOM是browser object model的缩写,简称浏览器对象模型.是用来获取或设置浏览器的属性.行为,例如:新建窗口.获取屏幕分辨率.浏览器版本号等. 比如 alert(); ...
- 什么是虚拟DOM?为啥虚拟DOM可以提升性能？
现在流行的框架无论是React还是vue,都采用的是虚拟DOM 采用虚拟DOM的好处是,当数据变化的时候,无需像Backbone那样整体重新渲染,而是局部刷新变化部分 所谓虚拟DOM,其实就说用Jav ...
- DOM扩展：DOM API的进一步增强[总结篇-下]
本文承接<DOM扩展:DOM API的进一步增强[总结篇-上]>,继续总结DOM扩展相关的功能和API. 3.6 插入标记 DOM1级中的接口已经提供了向文档中插入内容的接口,但是在给文档 ...
- 走进DOM：HTML DOM
DOM(Document Object Model)即文档对象模型.针对HTML和XML 文档的API(应用程序接口). DOM描绘了一个层次化的节点树,执行开发者加入.移除和改动页面的某一部分.当然 ...
- 深入浅出DOM基础——《DOM探索之基础详解篇》学习笔记
来源于:https://github.com/jawil/blog/issues/9 之前通过深入学习DOM的相关知识,看了慕课网DOM探索之基础详解篇这个视频(在最近看第三遍的时候,准备记录一点东西 ...
- 虚拟dom和真实dom的转化和class解析的顺序
昨天出去溜了一圈,被问到几个问题回来整理了一下,当被特意问到一看感觉就会的问题,千万要不要急于回答,先想想,因为这往往是一个被忽略的坑(例如class解析顺序)!!! 1.写出虚拟dom和真实dom之 ...
随机推荐
- SpringMVC存取Session的两种方法 转
方法一:使用servlet-api @Controller public class ManagerController { @Resource private ManagerService mana ...
- Python基础知识--列表和集合
列表:有序性,可以存放任意类型的对象,通过索引访问,可以分片操作 >>> L = ['id', 1000, 'scd', 1000, 'scd'] >>> L [' ...
- PDF模板报表导出（Java+Acrobat+itext）
1. 首先要安装Adobe Acrobat,装好之后用Acrobat从一个word,excel或者pdf中转换一个pdf模板,我做的模板很简单,直接写一个简单的word再生成一个pdf表单,之后编辑文 ...
- hibernate之自定义持久化实现
- [Javascript] Querying an Immutable.js Map()
Learn how to query an Immutable.Map() using get, getIn, has, includes, find, first and last. These a ...
- 清理yum源
最近想在美国VPS上装个Wine 可是在执行yum install wine时却遇到了意想不到的错误 系统提示: You could try using –skip-broken to work ar ...
- java文件处理工具类
import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io.BufferedRead ...
- AndroidStudio工程文件导入Jar包和So第三方库
AndroidStudio 导入Jar包和第三方So库 在android开发中,需要导入许多第三方的jar包和so库来支持,包括像许多第三方的支持平台--友盟,环信.融云.极光推送.微博.腾讯等第三方 ...
- 零基础学习云计算及大数据DBA集群架构师【预科2015年12月14日周一】
1.第一天比较轻松,上午填表格,录指纹,拍照片,做自我介绍. 2.下午老师简单介绍了一下PC\交换机\路由器\塔式服务器\机架式服务器(1U\2U)\刀片服务器\磁带机 3.班主任陈老师朱老师,预科秦 ...
- jquery实现很简单的DIV拖动
今天用jquery实现了一个很简单的拖动...实现思路很简单 如下: 在thickbox 弹出层内实现拖拽DIV,那么得进行一下相对宽高的运算:必须加上相对于可见窗口宽高和弹出层宽高之间的差: ...