开发学院网页设计 JavaScript javascript之DOM技术(一) 阅读

javascript之DOM技术(一)

　2010-09-14 13:06:53　来源：WEB开发网　　　

核心提示：首先需要理解的一点是，DOM是针对XML的基于树的API，javascript之DOM技术(一)，它的实现有很多（各语言基本都有自己的实现），我们讨论的是javascript中或者说xhtml(html)对DOM的实现，一、使用DOM考虑一个html文件：<html><head><titl

首先需要理解的一点是，DOM是针对XML的基于树的API，它的实现有很多（各语言基本都有自己的实现），我们讨论的是javascript中或者说xhtml(html)对DOM的实现。

一、使用DOM

考虑一个html文件：

<html> <head><title>测试</title></head> <body> <p>测试</p> </body> </html>

1.访问节点：

访问html元素：var oHtml=document.documentElement;

获取head元素：var oHead=oHtml.firstChild;

获取body元素：var oBody=oHtml.lastChild; 或者 var oBody=document.body;

也可以通过childNodes来做同样的工作：

var oHead=oHtml.childNodes[0] 或者 oHtml.childNodes.item(0);

var oBody=oHtml.childNodes[1] 或者 oHtml.childNodes.item(1);

判断节点间关系：

alert(oHead.parentNode==oHtml);　 alert(oBody.previousSibling==oHead); alert(oHead.nextSibling==oBody); alert(oHead.ownerDocument==document);

2.检测节点类型：

通过节点的nodeType属性来检验节点类型：

alert(document.nodeType);　//输出9

需要注意的是，DOM兼容的浏览器（以FF2.0为例），拥有Node.DOCUMENT_NODE、Node.ELEMENT_NODE等常量。各常量名称与数值对照表如下：

ELEMENT_NODE　　　　　　　　　　　　　　　　 1 ATTRIBUTE_NODE　　　　　　　　　　　　　　2 TEXT_NODE　　　　　　　　　　　　　　　　　　　　 3 CDATA_SECTION_NODE　　　　　　　　 4 ENTITY_REFERENCE_NODE　　　　　　5 ENTITY_NODE　　　　　　　　　　　　　　　　　　 6 PROCESSING_INSTRCTION_NODE　　　 7 COMMENT_NODE　　　　　　　　　　　　　　　8 DOCUMENT_NODE　　　　　　　　　　　　　　9 DOCUMENT_TYPE_NODE　　　　　　　 10 DOCUMENT_FRAGMENT_NODE　 11 NOTATION_NODE　　　　　　　　　　　　　　　12