你對(duì)Javascript Dom編程是否了解，在DOM模型中，每一個(gè)元素（element）、屬性（attribute）、文本（text）都可以看做是一個(gè)對(duì)象，javascript可以訪問(wèn)獨(dú)立訪問(wèn)這些對(duì)象，用一些方法可以找到和改變這些對(duì)象。

Javascript Dom編程

一：Document Object Model

在DOM模型中，每一個(gè)元素（element）、屬性（attribute）、文本（text）都可以看做是一個(gè)對(duì)象，javascript可以訪問(wèn)獨(dú)立訪問(wèn)這些對(duì)象，用一些方法可以找到和改變這些對(duì)象。

DOM是這樣規(guī)定的，每個(gè)HTML的標(biāo)簽是一個(gè)元素節(jié)點(diǎn)，包含在元素中的文本是文本節(jié)點(diǎn)，每一個(gè)HTML屬性是一個(gè)屬性節(jié)點(diǎn)。

二：訪問(wèn)DOM的節(jié)點(diǎn)

A：通過(guò)ID獲取元素

vartarget=document.getElementById("berenger");  
 

B：通過(guò)TagName獲取元素

varlistItems=document.getElementsByTagName("li");  
 

listItems是一個(gè)類似數(shù)組的對(duì)象，可以用listItems.Length來(lái)獲得對(duì)象的長(zhǎng)度。

C：通過(guò)ClassName獲取元素

Javascript Dom編程中大多數(shù)情況下使用className來(lái)獲取元素比tagname要簡(jiǎn)便，但是dom沒(méi)有提供相應(yīng)的函數(shù)，所以我們要?jiǎng)?chuàng)建一個(gè)方法。

可以分解為以下三步：

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

2：對(duì)每一個(gè)元素，把所屬的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;  
};  
 

 #p#三：操縱DOM樹(shù)

parentNode：父元素。

childNodes：子元素。

firstChild：***個(gè)節(jié)點(diǎn)。

lastChild：***一個(gè)節(jié)點(diǎn)。

nextSibling：下一個(gè)同級(jí)節(jié)點(diǎn)。

previousSinbling：上一個(gè)同級(jí)節(jié)點(diǎn)。下面看一下Javascript Dom編程中的屬性用法。

四：屬性

A：獲得屬性值（getAttribute）

<aidaid="koko"href="http://www.163.com">163</a> 
 
//js  
 
varkoko=document.getElementById("koko");  
 
varkokoHref=koko.getAttribute("href");  
 

 注：getAttribute不能用document對(duì)象調(diào)用。

B：設(shè)置屬性值（setAttribute）

setAttribute不但可以修改現(xiàn)有屬性的值，而且可以添加新的屬性，類似getAttribute，它不能通過(guò)document調(diào)用，只能通過(guò)元素節(jié)點(diǎn)來(lái)調(diào)用。需要傳遞兩個(gè)參數(shù)：

obiect.setAttribute(attribute,value)

例子

varkoko=document.GetElementById("koko");  
 
koko.setAttribute("title","websiteinchina");  

#p#五：javascript與樣式

A：style.style

Javascript Dom編程中中每一個(gè)元素節(jié)點(diǎn)都包含一個(gè)style.style，來(lái)改變此元素的呈現(xiàn)。

例：改變?cè)匚谋镜念伾胹tyle.Color

Varscarlet=document.getElementById("scarlet");  
 
scarlet.style.Color="#FF0000";  

B：使用class改變樣式

在css中，內(nèi)嵌的樣式表被看做是不好的習(xí)慣，那么***的改變?cè)爻尸F(xiàn)的方法就是使用javascript改變?cè)氐腸lass。

首先我們判斷是否含有要改變的class。

Core.hasClass=function(target,theClass)  
{  
varpattern=newRegExp("(^|)"+theClass+"(|$)");  
 
if(pattern.test(target.className))  
{  
returntrue;  
}  
returnfalse;  
};  
 

 1：添加class

Core.addClass=function(target,theClass)  
{  
if(!Core.hasClass(target,theClass))  
{  
if(target.className=="")  
{  
target.className=theClass;  
}  
else  
{  
target.className+=""+theClass;  
}  
}  
};  
 

 2：清除class

Core.removeClass=function(target,theClass)  
{  
varpattern=newRegExp("(^|)"+theClass+"(|$)");  
targettarget.className=target.className.replace(pattern,"$1");  
targettarget.className=target.className.replace(/$/,"");  
};  
 

【編輯推薦】

1. 技術(shù)分享 如何獲取Dom元素的X/Y坐標(biāo)
2. JQuery創(chuàng)建DOM元素方法解析
3. JavaScript獲取HTML DOM節(jié)點(diǎn)元素詳解
4. JavaScript和DOM輕松實(shí)現(xiàn)數(shù)據(jù)訪問(wèn)
5. HTML DOM與XML DOM的區(qū)別與聯(lián)系探究