首页 > 代码库 > javascript--- HTML DOM
javascript--- HTML DOM
看了这个题目,不知聪明的读者会有什么样的感觉?这篇文章将要讲javascript和DOM的关系呢?还是要讲javascript的DOM?在这里我首先就讲明文章的主旨有两点:什么是DOM?它和javascript的关系是什么?
一 什么是DOM?
官方解释:Document Object Model 是一种用于HTML和XML文档的编程接口。它给文档提供一个结构化的表示方法,可以改变文档的内容和呈现方式。
看了这个官方解释觉得,还是那样没有什么感觉,那好请跟随我继续,等读完本文相信你对上面的官方解释会有了共同的认知。
不同的类型的网页文档有不同的DOM,本文将从HTML DOM 入手。DOM中的D可以理解为WEB加载的文档,当创建一个网页并把它加载到浏览器时,DOM就在幕后悄然而生,它将根据你编写的网页文档创建一个文档对象。O指的是对象,document对象。DOM为html网页中的每一元素都封装为对象。M是模型,但是我更喜欢说是结构,这个模型体现了html各个元素之间的结构关系。将封装的对象以节点的形式构成单性繁殖家族图谱树,每个网页元素都可以被确切的定位。
二 html与 DOM
下面的一张图,解释了他们两个的关系。
从图中我们不难看出,他们两个的关系。html网页中的标签和DOM结构图中的节点是一一对应的。DOM中的节点是对网页中标签的映射。我们通过对节点的操作就可以实现对元素的操作,外界可通过DOM提供的对象、方法和属性,访问所有 HTML元素,连同他们包含的文本和属性,可以对其中的内容进行修改和删除,同时也可以创建新的元素。这样解除了html页面内容和动态实现之间的耦合,同时有利于保护原有html页面的结构。
三 javascript与DOM
DOM是一套规范、标准。DOM不是javascript的一部分,它为javascript提供对象方法,它是网页对被“外界”使用的通道或者说是接口。今天流行的语言是javascript,通过它可以实现动态页面等各种功能。也许明天就会有另一种语言的诞生,这种语言也可以通过DOM提供的对象方法,对网页进行查询和操作。DOM有一种“以不变应万变的情怀”。DOM解除了网页内容与动态实现之间的耦合。
总结:
DOM就是一套标准规范,它也是web文档对外提供的接口。DOM实现了页面内容和实现的分离,使网页有了更高的灵活性。javascript可以实现html页面的动态功能,而DOM就是连接二者的桥梁。