浅析Javascript Dom编程(1)

你对Javascript Dom编程是否了解，在DOM模型中，每一个元素（element）、属性（attribute）、文本（text）都可以看做是一个对象，javascript可以访问独立访问这些对象，用一些方法可以找到和改变这些对象。

Javascript Dom编程

一：Document Object Model

在DOM模型中，每一个元素（element）、属性（attribute）、文本（text）都可以看做是一个对象，javascript可以访问独立访问这些对象，用一些方法可以找到和改变这些对象。

DOM是这样规定的，每个HTML的标签是一个元素节点，包含在元素中的文本是文本节点，每一个HTML属性是一个属性节点。

二：访问DOM的节点

A：通过ID获取元素

vartarget=document.getElementById("berenger");  
 

B：通过TagName获取元素

varlistItems=document.getElementsByTagName("li");  
 

listItems是一个类似数组的对象，可以用listItems.Length来获得对象的长度。

C：通过ClassName获取元素

Javascript Dom编程中大多数情况下使用className来获取元素比tagname要简便，但是dom没有提供相应的函数，所以我们要创建一个方法。

可以分解为以下三步：

1：搜索文档中的所有元素。

2：对每一个元素，把所属的class和所要找寻的class做比较。

3：如果相同，添加到list中。

js代码如下：

VarCore={};  
 
Core.getElementsByClass=function(theClass)  
{  
varelementArray=[];  
//IE中不支持getElementsByTagName("*")，用document.All。  
if(document.all)  
{  
elementArray=document.all;  
}  
else  
{  
elementArray=document.getElementsByTagName("*");  
}  
varmatchedArray=[];  
varpattern=newRegExp("(^|)"+theClass+"(|$)");  
for(vari=0;i<elementArray.length;i++)  
{  
if(pattern.test(elementArray[i].className))  
{  
matchedArray[matchedArray.length]=elementArray[i];  
}  
}  
returnmatchedArray;  
};