JavaScript學習——DOM對象
1、DOM操作
Document：整個html文件都稱之為一個document文檔
Element：所有的標簽都是Element元素
Attribute：標簽裏面的屬性
Text：標簽中間夾著的內容為text文本
Node：document、element、attribute、text統稱為節點node。
2、Document對象
每個載入瀏覽器的 HTML 文檔都會成為 Document 對象
後面兩個方法獲取之後需要遍歷！
另外還有兩個方法很重要
創建文本節點：document.createTextNode()
創建元素節點：document.createElement()
3、Element對象
我們所認知的html頁面中所有的標簽都是element元素
下面的常用屬性和方法可用於所有 HTML 元素上：
|
element.appendChild() |
向元素添加新的子節點，作為最後一個子節點。 |
|
element.firstChild |
返回元素的首個子節點。 |
|
element.getAttribute() |
返回元素節點的指定屬性值。 |
|
element.innerHTML |
設置或返回元素的內容。 |
|
element.insertBefore() |
在指定的已有的子節點之前插入新節點。 |
|
element.lastChild |
返回元素的最後一個子元素。 |
|
element.setAttribute() |
把指定屬性設置或更改為指定值。 |
|
element.removeChild() |
從元素中移除子節點。 |
|
element.replaceChild() |
替換元素中的子節點。 |
4、Attribute對象
我們所認知的html頁面中所有標簽裏面的屬性都是attribute
5、DOM練習
在頁面中使用列表顯示一些城市（成都、西安、大理），我們希望點擊一個按鈕實現動態添加城市。
1）步驟分析：
第一步：事件(onclick)
第二步：獲取ul元素節點
第三步：創建一個城市的文本節點
第四步：創建一個li元素節點
第五步：將文本節點添加到li元素節點中去。
第六步：使用element裏面的方法appendChild()來添加子節點
2）具體代碼實現：（window.onload設置隱名函數）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>動態添加城市</title> 6 <script> 7 window.onload=function(){ 8 document.getElementById("btn").onclick=function(){ 9 //1.獲取ul元素節點 10 var ulEle=document.getElementById("ul1"); 11 //2.創建一個城市的文本節點 12 var textNode=document.createTextNode("舟山");//舟山 13 //3.創建一個li元素節點 14 var liEle=document.createElement("li"); //<li></li> 15 //4.將文本節點添加到li元素節點中去 16 liEle.appendChild(textNode); //<li>舟山</li> 17 //5.將li添加到ul中 18 ulEle.appendChild(liEle); 19 } 20 } 21 </script> 22 </head> 23 <body> 24 <input type="button" value="添加新城市" id="btn"/> 25 <ul id="ul1"> 26 <li>成都</li> 27 <li>西安</li> 28 <li>大理</li> 29 </ul> 30 </body> 31 </html>
在谷歌瀏覽器內運行，點擊按鈕添加了新城市，效果如下：
JavaScript學習——DOM對象