DOM是为了方便处理层次型文档(如XML、HTML)的一种技术。DOM还提供了一套API,使开发人员可以用面向对象的方式来处理这些文档。对于XML文档来说,有专门的处理XML文档是XML DOM,一般用的都是处理HTML文档 的HTML DOM 。
DOM 主要的功能是获得HTML语言中的各个元素(如div、form),从而可以很容易地获得这些元素的信息,或动态向这些元素中添加新的元素。操作DOM的对象实际上也需要使用JavaScript,也就是,调用DOM API也要编写JavaSscript代码。在JavaScript中描述DOM的对象是docment,其实document不仅是HTML DOM ,也是XML DOM,如果是直接操作HTML文档,可以使用documentElement属性,
var oHtml = document.documentElement ;
oHtml对象表示当前的整个HTML文档。在HTML文档的下一层有两个元素,head和body,这两个元素可以使用firstChild属性和lastChild属性获得,
var oHead = oHtml.firstChild ; var oBody = oHtml.lastChild ;
还可以使用childNodes属性来获得上面两个对象,
var oHead = oHtml.childNodes[0] ; var oBody = oHtml.childNodes[1] ;
通过HTML元素对象的outerHTML和innerHTML属性,可以分别获得当前元素的包括元素本身的和不包括元素本身的HTML代码,
alert(oHead.outerHTML) ; // 显示包括head标签本身的内容 alert(oBody.innerHTML) ; // 显示不包括body标签本身的内容
在DOM 中有3中方法可以获得当前HTML文档中的任意一个HTML元素,这3个方法也就是HTML document 的3 个方法,分别是getElementById、getElementsByClassName、getElementsByTagName。
1.getElementById方法
getElementById方法是最简单的一个,这个方法可以根据HTML元素的id属性值得到HTML元素。在HTML文档中,id属性值是唯一的。
2、getElementsByClassName方法
这个方法通过HTML的class属性获得对应的HTML元素集合。由于HTML元素的class属性值并不唯一,因此,使用getElementsByClassName方法可以得到多个相同class属性值的HTML元素。
3、getElementsByTagName
getElementsByTagName方法获得的HTML元素的范围最大,他可以根据HTML元素的标签类型来获得一个相同HTML元素的数组。