Javascript 中怎么實現(xiàn)Dom編程，相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供東蘭網(wǎng)站建設(shè)、東蘭做網(wǎng)站、東蘭網(wǎng)站設(shè)計、東蘭網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、東蘭企業(yè)網(wǎng)站模板建站服務(wù)，10年東蘭做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

Javascript Dom編程

一：Document Object Model

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

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

二：訪問DOM的節(jié)點

A：通過ID獲取元素

vartarget=document.getElementById("berenger");

B：通過TagName獲取元素

varlistItems=document.getElementsByTagName("li");

listItems是一個類似數(shù)組的對象，可以用listItems.Length來獲得對象的長度。

C：通過ClassName獲取元素

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

可以分解為以下三步：

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
三：操縱DOM樹
parentNode：父元素。
childNodes：子元素。
firstChild：***個節(jié)點。
lastChild：***一個節(jié)點。
nextSibling：下一個同級節(jié)點。
previousSinbling：上一個同級節(jié)點。下面看一下Javascript Dom編程中的屬性用法。
四：屬性
A：獲得屬性值（getAttribute）
五：javascript與樣式
A：style.style
Javascript Dom編程中中每一個元素節(jié)點都包含一個style.style，來改變此元素的呈現(xiàn)。
例：改變元素文本的顏色用style.Color
Varscarlet=document.getElementById("scarlet");   scarlet.style.Color="#FF0000";
B：使用class改變樣式
在css中，內(nèi)嵌的樣式表被看做是不好的習(xí)慣，那么***的改變元素呈現(xiàn)的方法就是使用javascript改變元素的class。
首先我們判斷是否含有要改變的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(/$/,"");  };
看完上述內(nèi)容，你們掌握J(rèn)avascript 中怎么實現(xiàn)Dom編程的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
            
            
                        

            當(dāng)前名稱：Javascript中怎么實現(xiàn)Dom編程            

            文章轉(zhuǎn)載：http://weahome.cn/article/pgdico.html