javascript之DOM技术(一)

豆豆网   技术应用频道   2008年01月18日  【字号: 收藏本文

本文详细介绍javascript之DOM技术(一)

  首先需要理解的一点是,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

作者:killme2008    责编:豆豆技术应用

正在加载评论...