DOM的全称为DocumentObject Model,即文档对象模型,是针对HTML和XML文档的API。它描绘了一个具有层次结构的节点树,运行开发人员添加、移除和修改页面的某一部分。DOM是由Netscape及微软公司创始的DHTML发展而来的,但是现在它已经成为了表现和操作页面的真正跨平台的、语言中立的方式。
一.对DOM的理解
DOM中的三个字母,D可以理解为整个Web加载的网页文档;O可以理解为类似window
对象之类的东西,可以调用属性和方法,这里我们所说的是document对象;M可以看做是网页文档的树形结构。
1节点
加载HTML页面时,Web浏览器生成一个树型结构,用来表示页面内部结构,DOM将这种树型结构理解为由节点组成。如下图所示
从上图的树型结构我们可以看到,html标签没有父辈,没有兄弟,所以html标签为根标签,head标签是html子标签,而meta和title标签之间是兄弟关系。如果把每个标签当作一个节点的话,那么这些节点组合成了一棵节点树。
2节点种类
DOM中的节点大概分为:元素节点、文本节点和属性节点
二.查找元素
W3提供了比较方便简单的定位节点的方法和属性,以便我们快速的对节点进行操作,
列举如下:
我们通过getElementById()获取到特定元素节点时,这个节点对象就被我们获取到了,而通过这个节点对象,我们可以访问他的一系列属性。
那么这些属性值如何取出来呢?
我们来看一个简单的小例子:
<span style="font-size:18px;"><body> <div id="box" title="测试页面" class="cla" style="color:blue;" > 学好JS,前台都不怕! </div > </body> window.onload=function(){ var obj= document.getElementById('box'); alert(obj.tagName); alert(obj.innerHTML); alert(obj.id); alert(obj.title); alert(obj.style.color); alert(obj.className); };</span>
至于其他方法就不再一一说明了,想了解的可以去查相关的资料。
三.DOM节点
1 node节点属性
节点可分为三种,上文提到了,而这些节点又有三个非常有用的属性,分别为:nodeName、
nodeType、和nodeValue。如下是他们的说明:
2层次节点属性
节点的层次结构可以划分为:父节点与子节点、兄弟节点这两种。当我们获取其中一个元素节点的时候,就可以使用层次节点属性来获取它相关层次的节点。
四.节点操作
DOM不单单可以查找节点,也可以创建节点、复制节点、插入节点、删除节点和替换节点。