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之 ...
随机推荐
- ASP.NET中的文件上传大小限制的问题
一.文件大小限制的问题 首先我们来说一下如何解决ASP.NET中的文件上传大小限制的问题,我们知道在默认情况下ASP.NET的文件上传大小限制为2M,一般情况下,我们可以采用更改WEB.Config文 ...
- BA/PM Competency Module
No Competency Description BA Weight% PM Weight% 1 Business Analysis:BA Track Maps process flows, ...
- The Six Types of Rails Association
翻译整理自:http://guides.rubyonrails.org/v3.2.13/association_basics.html 想吐槽一句,http://guides.ruby-china.o ...
- HDU3336-Count the string（KMP）
Count the string Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- The Arduino IDE(compiler)'s float bug
1.通常直接使用串口的print函数就ok Serial.println(DHT.humidity); //assuming DHT.humidity is float 2.但是习惯问题,还是偏好s ...
- Apache让一台虚拟主机接受多域名解析(转)
之前写了一篇文章关于linux下apache虚拟主机配置,配置那是相当简单: <VirtualHost *:80> ServerAdmin admin@example.com Docume ...
- 清理yum源
最近想在美国VPS上装个Wine 可是在执行yum install wine时却遇到了意想不到的错误 系统提示: You could try using –skip-broken to work ar ...
- [转] 学习使用：before和：after伪元素
http://www.w3cplus.com/css3/learning-to-use-the-before-and-after-pseudo-elements-in-css.html 如果你一直密切 ...
- iOS UIKit：App
1.App生命周期 IOS架构是由许多设计模式实现,如model-view-controller 和 delegation模式. 1.1 main函数 与其它框架类似,IOS框架的入口也是从main函 ...
- PHP中的循环while、do...while、for、foreach四种循环。
php中的while循环,循环执行代码块制定的次数,或者当指定的条件为真时循环执行代码块. 在我们编写代码是时候,我们经常需要一块代码块重复执行多次.我们就可以使用while循环语句来完成这个任务. ...