日期:2014-05-17  浏览次数:20607 次

拿下AJAX(三)——DOM基础及DOM操纵HTML

DOM的概念

DOM= Document Object Model,文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说,这是表示和处理一个HTMLXML文档的常用方法。有一点  DOM很重要,DOM的设计是以对象管理组织(OMG)的规约为基础的,因此可以用于任何编程语言。最初人们把它认为是一种让JavaScript在浏览器间可移植的方法,不过DOM的应用已经远远超出这个范围。Dom技术使得用户页面可以动态地变化,如可以动态地显示或隐藏一个元素,改变它们的属性,增加一个元素等,Dom技术使得页面的交互性大大地增强。[

JavascriptDOM实现可以使得我们在AJAX中通过Javascript代码对HTMLXML数据进行DOM方式的操作,从而做到页面的动态修改更新和数据的提取处理。

DOM对象树

DOM将每一个HTMLXML的文档都看待成内存中的一个对象树

浏览器中的一个页面对应一个HTML文档,因此有一颗与之对应的HTMLDOM树。

浏览器中一个页面可能处理很多个XML的文档,因此可能有很多颗XMLDOM树。

DOM对象树种的常用节点

DOM树种文档内容对应了很多不同类型的节点,他们都是一个NODE对象。

DOM 代码中最常用的任务就是在页面的DOM树中导航。比方说,可以通过其“id”属性定位一个form,然后开始处理那个form中内嵌的元素和文本。其中可能包含文字说明、输入字段的标签、真正的input 元素,以及其他HTML 元素(如img)和链接(a元素)。如果元素和文本是完全不同的类型,就必须为每种类型编写完全不同的代码。如果使用一种通用节点类型情况就不同了。这时候只需要从一个节点移动到另一个节点,只有当需要对元素或文本作某种特殊处理时才需要考虑节点的类型。如果仅仅在DOM树中移动,就可以与其他节点类型一样用同样的操作移动到元素的父节点或者子节点。只有当需要某种节点类型的特殊性质时,如元素的属性,才需要对节点类型作专门处理。将DOM树中的所有对象都看作节点可以简化操作。记住这一点之后,接下来我们将具体看看DOM节点构造应该提供什么,首先从属性和方法开始。

NODE对象有一个nodeType的属性可用于判断节点类型

接口

nodeType常量(IE不支持)

nodeType

备注

Element

Node.ELEMENT_NODE