HTML DOM(一):认识DOM
什么是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相关推荐
- 基于Virtual DOM与Diff DOM的测试代码生成
尽管是在年末,并且也还没把书翻译完,也还没写完书的第一稿.但是,我还是觉得这是一个非常不错的话题--测试代码生成. 当我们在写一些UI测试的时候,我们总需要到浏览器去看一下一些DOM的变化.比如,我们 ...
- HTML DOM教程 14-HTML DOM Document 对象
HTML DOM教程 14-HTML DOM Document 对象 1:Document 对象 Document 对象代表整个 HTML 文档,可用来访问页面中的所有元素. Document 对象是 ...
- virtual DOM和真实DOM的区别_让虚拟DOM和DOMdiff不再成为你的绊脚石
来源 | https://juejin.im/post/5c8e5e4951882545c109ae9c Keep Moving 时至今日,前端对于知识的考量是越来越有水平了,逼格高大上了 各类框架大 ...
- html用dom显示xml,dom 编程(html和xml)
html dom与xml dom关系: 什么是 DOM? DOM 是 W3C(万维网联盟)的标准. DOM 定义了訪问 HTML 和 XML 文档的标准: "W3C 文档对象模型 (DOM) ...
- reactjs虚拟DOM与真实DOM
关于虚拟DOM: 1.本质是Object类型的对象(一般对象) 2.虚拟DOM比较"轻",真实DOM比较"重",因为虚拟DOM是React内部在用,无需真实DO ...
- HTML DOM教程 22-HTML DOM Form 对象
HTML DOM教程 22-HTML DOM Form 对象 1:Form 对象 Form 对象代表一个 HTML 表单. 在 HTML 文档中 <form> 每出现一次,Form 对象就 ...
- HTML DOM教程 21-HTML DOM Event 对象
HTML DOM教程 21-HTML DOM Event 对象 1:Event 对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与 ...
- HTML DOM教程 24-HTML DOM Frameset 对象
HTML DOM教程 24-HTML DOM Frameset 对象 1:Frameset 对象 Frameset 对象代表一个 HTML 框架集. 2:Frameset 对象的属性 属性 描述 IE ...
- 【天工Godwork精品教程】任务四:EOS正射影像DOM生成,DOM精编
无人机航测精品专栏链接:<无人机航空摄影测量精品教程> [天工Godwork精品教程]任务一:创建工程(导入相片.编辑相机参数.导入POS) [天工Godwork精品教程]任务二:导入控制 ...
- JavaScript-操作DOM对象-获得dom节点
核心 浏览器网页就是一个Dom树形结构! 更新: 更新Dom节点 遍历dom节点:得到Dom节点 删除: 删除一个Dom节点 添加: 添加一个新的节点 要操作一个Dom节点,就必须要先获得这个Dom节 ...
最新文章
- css rem 大屏开发_px和em、rem单元如何选择?
- [Contest20170910]string
- 编码和解码、调制与解调
- .NET Core,.NET Framework和Xamarin有什么区别?
- 理解RESTful架构(转)
- 微型计算机原理及应用是啥,微型计算机原理及应用技术(第3版)
- leetcode#248 中心对称数 III
- CI/DI持续集成部署
- ReclyclerView刷新数据
- 《生物信息学:导论与方法》--本体论、分子通路鉴定--听课笔记(十九)
- 盘古开源:2022年全球汽车产能仍受制于芯片短缺,中国减产量占一成
- 3、线性表的顺序存储结构(顺序表)
- 关于统信UOS操作系统版本介绍
- 全屋智能长途跑,谁能与华为一战?
- android重力传感器横竖反,Android手机在哪里设置重力传感器(转向屏幕)?
- vscode win10笔记本 蓝屏_联想拯救者Win10蓝屏0xc000000d的解决办法
- 【论文阅读】SISR综述:From Beginner to Master: A Survey for Deep Learning-based Single-Image Super-Resolution
- ios文件连接 百度网盘服务器,iOS系统教程:iphone怎么解压百度网盘文件
- 数据库关系运算:自然连接,投影,交,除,并
- 关于1byte 1KB 1MB 1GB求其所能表示的地址范围