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


IE6不支持,不过你可以自定义一个JS对象Node。

3.处理特性
处理特性可以使用标准的NameNodeMap中的方法:
getNamedItem(name) removeNamedItem(name) setNamedItem(node)    item(pos)

比如:<p id="test">测试</p>
假设变量oP是上面的p节点的引用,我们要访问oP的id属性:
var sId=oP.attributes.getNamedItem("id").nodue;

这些方法用起来很累赘,所以DOM又定义了三个方法来简化:
getAttribute(name)         ——返回名称为name的属性的值
setAttribute(name,value) ——顾名思义
removeAttribute(name)    ——顾名思义

上面的例子可以改写为:
var sId=oP.getAttribute("name");

4.访问指定节点:
熟知的getElementByTagName(name),getElementByName(name),getElementById(id)三个方法,不再展开。

5.创建和操作节点:
(1)创建新节点,一张IE(6.0)和FF对DOM Level1的创建新节点方法支持的对照表:

方法                                                                IE                                FF
createAttribute(name)                                  Y                                 Y
createCDATASection(text)                       N                                 Y
createComment(text)                                    Y                                 Y
createDocumentFragment()                         Y                                 Y
createElement(tagName)                            Y                                  Y
createEntityReference(name)                    N                                  Y
createProcessingInstruction(
target,data)                                                 N                                   Y
createTextNode(text)                               Y                                    Y

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值