JavaScript的 DOM操作，主要是對DOM這三個字母中D、O、M的操作。D代表的是document(文檔)，即我們可以使用javascript對文檔進行操作，O代表的是object(對象)，對象包括用戶自定義對象，內建對象和宿主對象，這裡不再贅述，M代表的是model(模型)，今天我們主要講 ...
JavaScript的 DOM操作，主要是對DOM這三個字母中D、O、M的操作。D代表的是document(文檔)，即我們可以使用javascript對文檔進行操作，O代表的是object(對象)，對象包括用戶自定義對象，內建對象和宿主對象，這裡不再贅述，M代表的是model(模型)，今天我們主要講的就是model。
model，就是把一份文檔表示成一份樹狀結構的模型(ps：實在找不到圖了，我覺得樹狀結構還是很容易腦補出來的吧！)，這個樹狀結構由無數個節點組成，因為這個性質，所以，我們可以把整個文檔叫做節點樹。這些節點組成了整個文檔，就像蓋房子一樣，文檔是一座房子，那麼節點就是磚頭。（這樣的比喻還有很多）
節點主要分為三種：元素節點、文本節點，和屬性節點。
<p color="red">hello world!</p>
上面這段html代碼當中p就是元素節點，hello world！就是文本節點，color=”red”就是屬性節點;
今天介紹的5種方法中，有三種就是獲取元素的方法
1.document.getElementById(id);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>學習日記</title> </head> <body> <p id="text">網路就像一個有神奇魔力的水晶球，從中我們可以找到無窮無盡的樂趣。 </p> <p id="pic"><img src="images/a._Sun.jpg" width="128" height="128" /></p>
<script>
alert(typeof document.getElementById("text"));
</script> </body> </html>
上面這段代碼就是使用該方法獲取了文檔當中id為“text” 的獨一無二的元素，該方法返回的是對應此獨一無二元素的一個對象，我們用typeof操作符驗證結果。上一段代碼的輸出結果為object。
2.document.getElementsByTagName(tag);
tag表示的是元素的名字，該方法返回的是一個數組，數組中包含了文檔中所有此元素對應的對象。
<script> var para=document.getElementsByTagName("p"); for(i=0;i<para.length;i++){ alert(typeof para[i]); } </script>
把上面的一段代碼代替第一段代碼當中的javascript部分，para就是這個文檔當中所有p元素的集合，既然是集合，那他必定有length屬性，代表數組的長度。輸出結果為兩個object。
3.getElementsByClassName(class);
HTML5 DOM中新增的方法，獲取文檔中所有class屬性為class的值。
但是，只有較新的瀏覽器才支持這個方法，所以程式員需要用已經有的方法來實現這個方法
function getElementsByClassName(node,classname){ //如果瀏覽器支持，使用現有方法 if(node.getElementsByClassName){ return node.getElementsByClassName(classname); }else{ var results=new Array(); var elems = node.getElementsByTagName("*"); for(var i=0;i<elems.length;i++){ if(elems[i].className.indexof(classname)!=-1){ results[results.length]=elems[i] } } return results; } }
下麵舉一個例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>學習日記</title>
</head>
<body>
<p id="text">網路就像一個有神奇魔力的水晶球，從中我們可以找到無窮無盡的樂趣。 </p>
<p id="pic"><img src="images/a._Sun.jpg" width="128" height="128" /></p>
<ul id="line">
<li class="row1">row1</li>
<li class="row1">row1</li>
<li class="row2">row2</li>
<li class="row2">row2</li>
</ul>
<script>
var line=document.getElementById("line");
var row1=line.getElementsByClassName("row1");
alert(row1.length);
</script>
</body>
</html>
上面的代碼表示id為“line”節點下class為“row1”的元素的個數。
4.object.getAttribute(attribute);
獲取某元素的屬性值
var paras=document.getElementsByTagName("img"); for(var i=0;i<paras.length;i++){ alert(paras[i].getAttribute("width")); }
上面代碼獲取了img標簽的width屬性的值。
也可以在for迴圈裡面加一個if判斷，判斷可不可以取到相應的屬性，提高代碼的可讀性。
5.object.setAttribute(attribute,value);
設置某個元素屬性的值。
var imgs=document.getElementsByTagName("img"); for(var i=0;i<imgs.length;i++){ var width_val=imgs[i].getAttribute("width"); if(width_val){ imgs[i].setAttribute("width","228"); } }
把img的width屬性值設置為“228”。
以上的5個方法是dom操作中最基本，最常用的5個方法。
