DOM全稱Document Object Model，即文檔對象模型。
一個html頁面被瀏覽器加載的時候，瀏覽器就會對整個html頁面上的所有標簽都會創建一個對應的
對象進行描述，我在瀏覽器上看到的信息只不過就是這些html對象的屬性信息而已。我們只要能找到
對應的對象操作對象的屬性，則可以改變瀏覽器當前顯示的內容。
DOM描繪了一個層次化的樹，允許開發人員添加、刪除、修改頁面的某一部分。
瀏覽器在解析HTML頁面標記的時候，其實不是按照一行一行讀取並解析的， 而是將HTML頁面中的每一個標記按照順序在內存中組建一顆DOM樹，組建好之后，按照樹的結構將頁面顯示在瀏覽器的窗口中。
1、節點層次
HTML網頁是可以看做是一個樹狀的結構，如下：
html
|-- head
| |-- title
| |-- meta
| ...
|-- body
| |-- div
| |-- form
| | |-- input
| | |-- textarea
... ... ...
這是一顆樹，是由多個節點（Node）組成的，節點的類型有很多種。
節點最多有一個父節點，可以有多個子節點。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <img src="" alt="圖片" /> <img src="" alt="圖片" /> <img src="" alt="圖片" /> <a href="">百度1</a> <a href="">百度2</a> <a href="">百度3</a> </body> <script type="text/javascript"> var allNodes=document.all;//獲取html文件中的所有標簽節點 for (var i = 0; i < allNodes.length; i++) { document.write(allNodes[i].nodeName+" "); } var imgNodes=document.images;//獲取html文件中的所有連接 for (var i = 0; i < imgNodes.length; i++) { imgNodes[i].src="img/13.png"; imgNodes[i].width="200"; imgNodes[i].height="200"; } var linkNodes=document.links;//獲取html文件中的所有連接 for (var i = 0; i < linkNodes.length; i++) { linkNodes[i].href="http://www.baidu.com"; } </script> </html>
2、根據屬性找節點
document.getElementById("html元素的id屬性值")
document.getElementsByTagName("標簽名")
document.getElementsByName("html元素的name屬性值")
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="checkbox" checked="checked" name="item" value="3000"/>筆記本電腦3000<br /> <input type="checkbox" name="item" value="2000"/>手機2000<br /> <input type="checkbox" name="item" value="7000"/>ipad7000<br /> <input type="checkbox" name="item" value="2000"/>游戲機2000<br /> <input type="checkbox" name="item" value="3000"/>電視機3000<br /> <input type="checkbox" name="all" onclick="checkAll()" />全選<br /> <input type="button" value="計算金額" onclick="getSum()"/><span id="amount"></span> </body> <script type="text/javascript"> function checkAll(){ var allNode=document.getElementsByName("all")[0];//找到全選按鈕的對象 var itemNodes=document.getElementsByName("item");//找到所有的選項 for (var i = 0; i < itemNodes.length; i++) { if (allNode.checked) { itemNodes[i].checked=allNode.checked;//allNode.checked位true時全選框選中則所有的選項選中 }else{ itemNodes[i].checked=allNode.checked;//allNode.checked位false全選框未選中則所有的選項不選中 } } } function getSum(){ var itemNodes=document.getElementsByName("item"); var sum=0; //alert(itemNodes[0].checked) for (var i = 0; i < itemNodes.length; i++) { if(itemNodes[i].checked){ sum+=parseInt(itemNodes[i].value) } } var spanNode=document.getElementById("amount"); spanNode.innerHTML=sum; } </script> </html>
3、通過關系(父子關系、兄弟關系)找標簽。
parentNode 獲取當前元素的父節點。
childNodes 獲取當前元素的所有下一級子元素。
注意： 獲取子節點的時 候是包括了空文本或者是注釋。
firstChild 獲取當前節點的第一個子節點。
lastChild 獲取當前節點的最后一個子節點。
------------------------------------------------------------
nextSibling 獲取當前節點的下一個節點。（兄節點）
previousSibling 獲取當前節點的上一個節點。（弟節點）
我們可以通過標簽的類型進行判斷篩選：
文本節點的類型： 3
注釋的節點類型： 8
標簽節點的類型： 1
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="div"></div><span id="span"></span><a></a> </body> <script type="text/javascript"> var divNode=document.getElementById("div"); var bodyNode=divNode.parentNode; document.write(bodyNode.nodeName); document.write("<br />"); var childrens=bodyNode.childNodes; for (var i = 0; i < childrens.length; i++) { document.write(childrens[i].nodeName+childrens[i].nodeType+"---"); } document.write("<br />"); document.write(bodyNode.firstChild.nodeName); document.write("<br />"); document.write(bodyNode.lastChild.nodeName); document.write("<br />"); var spaNode=document.getElementById("span"); document.write(spaNode.previousSibling.nodeName); document.write("<br />"); document.write(spaNode.nextSibling.nodeName); </script> </html>
4、創建節點、設置節點
document.createElement("標簽名") 創建新元素節點
elt.setAttribute("屬性名", "屬性值") 設置屬性
elt.appendChild(e) 添加元素到elt中最后的位置
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" value="add" onclick="addEle()" /> </body> <script type="text/javascript"> function addEle(){ var buttonNode= document.createElement("input"); buttonNode.setAttribute("type","button"); buttonNode.setAttribute("value","按鈕"); var bodyNode=document.getElementsByTagName("body")[0]; bodyNode.appendChild(buttonNode); } </script> </html>
5、添加附件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <table> <tbody> <tr> <td><input type="file"></td> <!--this指a標簽--> <td><a href="#" onclick="del(this)">刪除附件</a></td> </tr> <tr id="lastrow"> <td colspan="2"><input onclick="add()" type="button" value="添加附件"></td> </tr> </tbody> </table> </body> <script type="text/javascript"> function add(){ var trNode=document.createElement("tr"); trNode.innerHTML="<td><input type='file'></td><td><a href='#' onclick='del(this)'>刪除附件</a></td>" var tbodeNode=document.getElementsByTagName("tbody")[0]; var lastrowNode=document.getElementById("lastrow"); // 插入目標元素的位置 // elt.insertBefore(newNode, childNode); 添加到elt中，childNode之前。 // 注意： elt必須是childNode的直接父節點。 tbodeNode.insertBefore(trNode,lastrowNode);//如果表格不寫tbody，默認tr的直接父節點仍是tbody } //aNode代表a標簽 function del(aNode){ var delNode=aNode.parentNode.parentNode;//獲取到tr標簽 var tbodyNody=document.getElementsByTagName("tbody")[0];//獲取到tbody // 刪除指定的子節點 // elt.removeChild(child) // 注意： elt必須是child的直接父節點。 tbodyNody.removeChild(delNode); } </script> </html>
6、城市聯動框
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> 省份:<select id="province" onchange="showCity()"> <option>省份</option> <option>河南</option> <option>山東</option> <option>廣東</option> </select> 城市：<select id="city"> <option>城市</option> </select> </body> <script type="text/javascript"> function showCity(){ var citys=[[],["洛陽","鄭州","三門峽"],["青島","日照","煙台"],["廣州","汕頭","佛山"]]; var provinceNode=document.getElementById("province");//獲取省份對應節點 var index=provinceNode.selectedIndex;//獲取省份選中的選項 //alert(123); var city=citys[index];//獲取對應城市 var cityNode=document.getElementById("city");//找到city節點 //cityNode.options.length=1;//設置options的個數為1，即每次選擇省份前只顯示城市那個option 更簡單 var citychildNodes=cityNode.childNodes; for (var i = 0; i < citychildNodes.length; ) { cityNode.removeChild(citychildNodes[i]);//每次從0開始刪除到length-1的位置 } //遍歷對應的所有城市然后創建對應的option添加到city上 for (var i = 0; i < city.length; i++) { var optionNode=document.createElement("option"); optionNode.setAttribute("value",city[i]); optionNode.innerHTML=city[i]; cityNode.appendChild(optionNode); } } </script> </html>
7、操作css樣式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script type="text/javascript"> function createCode(){ //alert("abc"); var arr=["你","我",1,2,'a','b']; var code=""; for (var i = 0; i < 4; i++) { var index=Math.floor(Math.random()*(arr.length)); code+=arr[index]; } var spanNode=document.getElementsByTagName("span")[0]; spanNode.style.fontSize="40px"; spanNode.style.color="red"; spanNode.innerHTML=code; } </script> <body onload="createCode()"> <span></span> <a href="#" onclick="createCode()">看不清換一張</a> </body> </html>