Javascript DOM基礎－互聯網 - 大數據

文檔對象模型很重要，對文檔結構，樣式等等的改變就要靠它了，今天還算比較清閑，繼續更新。不過有的程序調試的好糾結，fuck.由于這個編輯器有點問題，代碼塊展示不出來所以把代碼全部顯示出來了，請諒解。

DOM——文件對象模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴展置標語言的標準編程接口。Document Object Model的歷史可以追溯至1990年代后期微軟與NETscape的“瀏覽器大戰”，雙方為了在Javascript與JSscript一決生死，于是大規模的賦予瀏覽器強大的功能。微軟在網頁技術上加入了不少專屬事物，計有VBScript、ActiveX控件、以及微軟自家的DHTML格式等，使不少網頁使用非微軟平臺及瀏覽器無法正常顯示。DOM即是當時蘊釀出來的杰作。這一段往事了解就行了。

DOM分級——根據W3C DOM規范，DOM是HTML與XML的應用編程接口（API），DOM將整個頁面映射為一個由層次節點組成的文件。有1級、2級、3級共3個級別。

DOM節點——父元素和子元素的關系。一個父元素只有一層的隸屬關系。例如UL和Li,如果li下面還有諸如strong的標簽，那么他就不是UL的子節點（元素）。

childNodes()

 1 <script>
 2     window.onload=function(){
 3         var oUl=document.getElementById('ul1');
 4         alert(oUl.childNodes.length);
 5     };
 6 </script>
 7 <body>
 8 <ul id="ul1">
 9     <li>1</li>
10     <li>2</li>
11     <li>3</li>
12 </ul>
13 </body>

在火狐和谷歌下彈出7，在IE9彈出3，瀏覽器之間的不兼容問題。當然你可以使用childern來代替childNodes，就不會出現兼容性的問題了。

1 <script>
2     window.onload=function(){
3         var oUl=document.getElementById('ul1');
4         oUl.childNodes[0].style.background='red';
5     };
6 </script>

上面這段代碼，本來是給li添加一個紅色背景，但是沒有成功，不知哪出問題了。原因在于火狐會把li與li之間的空格，也就是空的文本節點算作是一個節點。

nodeType節點類型，1代表元素節點，2代表attr屬性，3代表文本節點；

offsetParent表示某個定位元素的父元素，獲取元素在頁面上的絕對坐標；

首尾子節點firstChild和firstElementChild分別在IE和火狐下有效果，可以通過一個判斷語句來實現兼容或者通過“或”語句復制給一個變量，然后來實現。同樣的還有lastChild和lastElementChild

兄弟子節點nextSibling和nextElementSibling。previousSibling和nextElementSiling

DOM方式操縱元素——setAttribute，getAttribute，removeAttribute

 1 <script>
 2     window.onload=function(){
 3         var otxt=document.getElementById('txt1');
 4         //otxt.value='123';
 5         //otxt['value']="12"
 6         //otxt.setAttribute('value','1');
 7         alert(otxt.getAttribute('id'));
 8     };
 9 </script>
10 <body>
11 <input type="text" id="txt1" />
12 </body>

用className獲取元素

封裝函數來多次運用，獲取類名通常使用很頻繁，下面是封裝函數的代碼：

 1 <script type="text/javascript">
 2 function getByClass(oParent, sClass)//第一個參數是父級元素，第二個參數是你要獲取的類的名稱
 3 {
 4     var aEle=oParent.getElementsByTagName('*');//獲取所有父級元素下的元素名
 5     var aResult=[];
 6     var i=0;
 7     
 8     for(i=0;i<aEle.length;i++)
 9     {
10         if(aEle[i].className==sClass)//如果類名等于你想要的那個類名，就不斷的堆積
11         {
12             aResult.push(aEle[i]);
13         }
14     }
15     
16     return aResult;//返回整個數組，數組里面六是你想要的全部類名
17 }
18 
19 window.onload=function ()
20 {
21     var oUl=document.getElementById('ul1');
22     var aBox=getByClass(oUl, 'box');
23     var i=0;
24     
25     for(i=0;i<aBox.length;i++)
26     {
27         aBox[i].style.background='yellow';
28     }
29 }
30 </script>

創建元素createElement()

下面是一個通過點擊“單擊創建li”這個按鈕來創建li，并且在文本框內輸入內容的時候，就會創建相應名稱的li，但是程序不能執行，大家幫忙找找哪里寫錯了。程序應該沒問題的，firebug也沒有提示錯誤。下面是具體的代碼：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>創建Li</title>
 6 <script>
 7     window.onload=function(){
 8         var otxt=document.getElementById('txt1');
 9         var obtn=document.getElementById('btn');
10         var oul=document.getElementById('ul1');
11 
12         obtn.onclick=function(){
13             var oli=document.createElement('li');
14             oli.innerHTML=otxt.value;
15             oul.appendChild('oli');
16 
17         };
18     };
19 
20 
21 </script>
22 </head>
23 <body>
24 <input id="txt1" type="text"  />
25 <input id="btn" type="button" value="單擊創建li" />
26 <ul id="ul1">
27     <li>123</li>
28 </ul>
29 </body>
30 </html>

添加元素appendChild()

他是在父元素的子節點的后面添加新元素。

插入元素insertBefore()

他是在父元素的子節點的前面添加新元素，他的名字也很好記，翻譯過來就是“插入前面”。具體的例子可以看下面的代碼，其中有一個判斷語句，如果長度為零，就使用appendChild來添加新的元素，注意，這里不能使用insertBefore，因為如果一個元素也沒有，insertBefore不起作用，而是用appendChild從元素后面插入元素，即使元素的個數為零，還是可以在零的基礎上添加第一個元素。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <style>
 5 </style>
 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 7 <title>無標題文檔</title>
 8 <script type="text/javascript">
 9 //父.insertBefore(子節點, 誰之前)
10 
11 window.onload=function ()
12 {
13     var oBtn=document.getElementById('btn1');
14     var oTxt=document.getElementById('txt1');
15     var oUl=document.getElementById('ul1');
16     
17     oBtn.onclick=function ()
18     {
19         var oLi=document.createElement('li');
20         var aLi=oUl.getElementsByTagName('li');
21         
22         oLi.innerHTML=oTxt.value;
23         
24         if(aLi.length==0)
25         {
26             oUl.appendChild(oLi);
27         }
28         else
29         {
30             oUl.insertBefore(oLi, aLi[0]);
31         }
32     }
33 }
34 </script>
35 </head>
36 
37 <body>
38 <input id="txt1" type="text" />
39 <input id="btn1" type="button" value="創建Li"/>
40 <ul id="ul1">
41 </ul>
42 </body>
43 </html>

刪除元素removeChild()

看下面的小實例，當單機鏈接時，就刪除一個li,運用了this獲取你即將點擊的鏈接，其次，使用parentNode來獲取父元素，當然了，還是要通過removeChild方法來刪除相應的元素。（對了，我發現了一個文本編輯器的BUG，文本的顏色有時候改不過來，要轉換兩次顏色才可以變灰黑色==！）

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <style>
 5 </style>
 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 7 <title>無標題文檔</title>
 8 <script type="text/javascript">
 9 window.onload=function ()
10 {
11     var aA=document.getElementsByTagName('a');
12     var oUl=document.getElementById('ul1');
13     var i=0;
14     
15     for(i=0;i<aA.length;i++)
16     {
17         aA[i].onclick=function ()
18         {
19             oUl.removeChild(this.parentNode);
20         }
21     }
22 }
23 </script>
24 </head>
25 
26 <body>
27 <ul id="ul1">
28     <li>sdfsdf <a href="javascript:;">刪除</a></li>
29     <li>3432 <a href="javascript:;">刪除</a></li>
30     <li>tttt <a href="javascript:;">刪除</a></li>
31     <li>ww <a href="javascript:;">刪除</a></li>
32 </ul>
33 </body>
34 </html>

文檔碎片Fragment

文檔碎片可以優化性能，親們，可以使用下面提供的兩種不同方法在同一款瀏覽器下測試，有新興趣的測試一下哦。我在chrome下測試結果卡死了，不知道什么情況，雖然循環了10萬次也不至于卡死吧。文檔碎片可以打包創建元素，而一般的方法是一個一個的創建元素，如此循環下去知道循環完畢。

文檔碎片寫法

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <style>
 5 </style>
 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 7 <title>無標題文檔</title>
 8 <script type="text/javascript">
 9 window.onload=function ()
10 {
11     var oBtn=document.getElementById('btn1');
12     var oUl=document.getElementById('ul1');
13     
14     oBtn.onclick=function ()
15     {
16         var iStart=new Date().getTime();
17         var oFrag=document.createDocumentFragment();
18         var i=0;
19         
20         for(i=0;i<100000;i++)
21         {
22             var oLi=document.createElement('li');
23             
24             oFrag.appendChild(oLi);
25         }
26         
27         oUl.appendChild(oFrag);
28         
29         alert(new Date().getTime()-iStart);
30     }
31 }
32 </script>
33 </head>
34 
35 <body>
36 <input id="btn1" type="button" value="碎片"/>
37 <ul id="ul1">
38 </ul>
39 </body>
40 </html>

普通寫法

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <style>
 5 </style>
 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 7 <title>無標題文檔</title>
 8 <script type="text/javascript">
 9 window.onload=function ()
10 {
11     var oBtn=document.getElementById('btn1');
12     var oUl=document.getElementById('ul1');
13     
14     oBtn.onclick=function ()
15     {
16         var iStart=new Date().getTime();
17         var i=0;
18         
19         for(i=0;i<100000;i++)
20         {
21             var oLi=document.createElement('li');
22             
23             oUl.appendChild(oLi);
24         }
25         
26         alert(new Date().getTime()-iStart);
27     }
28 }
29 </script>
30 </head>
31 
32 <body>
33 <input id="btn1" type="button" value="普通"/>
34 <ul id="ul1">
35 </ul>
36 </body>
37 </html>