由于HTML与XML的相似性及差异,JavaScript不仅实现了标准的DOM方法和属性(即由W3C制定的),而且还实现了HTML特有的DOM方法和属性,前者称为DOM Core,并不专属于JavaScript,后者称为HTML-DOM。不管是DOM Core还是HTML-DOM,我们在使用JavaScript的时候要注意浏览器之间的兼容性,因为不同的浏览器对这两类方法和属性的支持可能不一样。
一般来说,DOM操作分为3个方面,即DOM Core(核心)、HTML-DOM和CSS-DOM。
DOM Core
JavaScript中的getElmentByld()、getElementsByTagName()、getAttribute()和setAttribute()等方法,这些都是DOM Core的组成部分。
例如:
使用DOM Core来获取表单对象的方法:
1 |
document.getElementsByTagName( "form" ); |
使用DOM Core来获取某元素的src属性的方法:
1 |
element.getAttribute( "src" ); |
HTML-DOM
在使用JavaScript和DOM为HTML文件编写脚本时,有许多专属于HTML-DOM的属性。HTML-DOM的出现甚至比DOM Core还要早,它提供了一些更简明的记号来描述各种HTML元素的属性。
例如:
使用HTML-DOM来获取表单对象的方法:
1 |
document.forms //HTML-DOM提供了一个forms对象 |
使用HTML-DOM来获取某元素的src属性的方法:
1 |
element.src; |
通过上面所说的方法,可以发现获取某些对象、属性既可以用DOM Core来实现,也可以使用HTML-DOM实现。相比较而言HTML-DOM的代码通常比较简短,不过它只能用来处理Web文档。
CSS-DOM
CSS-DOM是针对CSS的操作。在JavaScript中,CSS-DOM技术的主要作用是获取和设置style对象的各种属性。通过改变style对象的各种属性,可以使网页呈现出各种不同的效果。
例如:设置某元素style对象字体颜色的方法:
1 |
element.style.color = "blue" ; |
jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象的操作的特性,使开发人员能方便地操作DOM对象。