DOM的概念
DOM= Document Object Model,文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。就是HTML页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。比如通过操作文本框的DOM对象,就可以读取文本框中的值、设置文本框中的值。DOM对象树
DOM将每一个HTML或XML的文档都看待成内存中的一个对象树浏览器中的一个页面对应一个HTML文档,因此有一颗与之对应的HTML的DOM树。
浏览器中一个页面可能处理很多个XML的文档,因此可能有很多颗XML的DOM树。
DOM对象树种的常用节点
在DOM树种文档内容对应了很多不同类型的节点,他们都是一个NODE对象。DOM 代码中最常用的任务就是在页面的DOM树中导航。比方说,可以通过其“id”属性定位一个form,然后开始处理那个form中内嵌的元素和文本。其中可能包含文字说明、输入字段的标签、真正的input 元素,以及其他HTML 元素(如img)和链接(a元素)。如果元素和文本是完全不同的类型,就必须为每种类型编写完全不同的代码。如果使用一种通用节点类型情况就不同了。这时候只需要从一个节点移动到另一个节点,只有当需要对元素或文本作某种特殊处理时才需要考虑节点的类型。如果仅仅在DOM树中移动,就可以与其他节点类型一样用同样的操作移动到元素的父节点或者子节点。只有当需要某种节点类型的特殊性质时,如元素的属性,才需要对节点类型作专门处理。将DOM树中的所有对象都看作节点可以简化操作。
NODE对象有一个nodeType的属性可用于判断节点类型
接口 |
nodeType常量(IE不支持) |
nodeType值 |
备注 |
Element |
Node.ELEMENT_NODE |
1 |
元素节点(标签) |
Atrr |
Node.ATTRIBUTE_NODE |
2 |
|
Text |
Node.TEXT_NODE |
3 |
文本节点(文本) |
Comment |
Node.COMMENT_NODE |
8 |
注释节点(注释) |
Document |
Node.DOCUMENT_NODE |
9 |
文本根节点 |
文本根节点
元素节点是文档中最常见的节点,HTML或XML文档中的标签<body>,<input>,<div>都对应DOM树中的元素节点。属性节点表示的是一个元素节点上定义的某个属性,例如<input>中定义的value属性就对应DOM树种的一个属性节点。
文本节点表示文档中的一段文字信息,例如HTML文档中定义<div>abcdef</div>其中的“abcdef”就是一个文本节点。