DOM指令碼程式設計-JavaScript入門基礎（018）
技術標籤：JavaScriptjavascriptjquery
DOM節點：
DOM層級結構中最頂端的物件是window物件，而document物件是它的子物件之一。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>任務清單</title></head><body><h1>工作安排</h1><ol id="toDoList"><li>拖地</li><li>擦窗戶</li><li>回郵件</li></ol><p id="toDoNotes">完成以上工作，可以看電視。</p></body></html>
當頁面完成載入之後，DOM才是可用的。
html元素包含頁面上的其他全部標籤；
它作為父元素，有兩個子元素，分別是head和body；
head有兩個子元素，分別是meta和title；
body有三個子元素，分別是h1，ol和p；
ol有三個子元素，分別是li；
DOM上這種層次結構的關係，其中的交叉點和末端點稱為“節點”；
節點一般分為元素節點和文字節點，比如段落元素p；文字節點裡包含文字內容；
每種節點型別都有一個關聯值，儲存在屬性nodeType中。
| nodeType值 | 節點型別 |
| 1 | 元素 |
| 2 | 屬性 |
| 3 | 文字 |
| 4 | CDATA區域 |
| 5 | 實體引用 |
| 6 | 實體 |
| 7 | 執行指令 |
| 8 | HTML註釋 |
| 9 | 文件 |
| 10 | 文件型別DTD |
| 11 | 文件片段 |
| 12 | 標籤 |
每一個節點都有一個childNodes屬性。用來訪問其子節點的。childNodes是一個集合列表，按索引訪問。
比如：
varolElement=document.getElementById('toDoList');olElement.childNode;
需要統計節點數量時，可以
var count = 0;for(vari=0;i<olElement.childNodes.length;i++){if(olElement.childNodes[i].nodeType == 1){count++;}}
當然，我們也可以將這個放在一個函式中，重複使用
functioncountListItems(){varolElement=document.getElementById("toDoList");var count = 0;for(leti=0;i<olElement.childNodes.length;i++){if(olElement.childNodes[i].nodeType== 1){count++;}}alert("Listcontains"+count+"items");}window.onload= countListItems;
注意，當我們把函式賦值給頁面載入函式時，函式不需要帶括號；帶括號表示執行函式體程式碼；
firstChild和lastChild屬性：
使用firstChild相當於childNodes【0】，
而lastChild相當於childNodes[childNodes.length - 1]；
parentNode屬性：
儲存的是節點的父節點。
nextSibling和previousSibling屬性：
是節點的具有相同父節點的兄弟節點；
使用nodeValue屬性：
它返回儲存在節點的值；
使用nodeName屬性：
它是個只讀屬性，可以返回節點名稱；
| nodeType值 | 節點型別 | nodeName值 |
| 1 | 元素 | 元素標籤名稱 |
| 2 | 屬性 | 屬性名稱 |
| 3 | 文字 | 字串 |
getElementsByTagName方法：
document物件的這個方法，可以獲得特定的全部標籤集合，
比如，
vardivS=document.getElementsByTagName("div");以上就是獲得頁面中全部的div；
完整程式碼：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>To Do List</title><script>function countListItems() {var olElement = document.getElementById('toDoList');var listItems = olElement.getElementsByTagName("li");alert("list contains " + listItems.length + " items");}window.onload = countListItems;</script></head><body><h1>Things To Do</h1><ol id="toDoList"><li>Mow the lawn</li><li>Clean the windows</li><li>Answer your email</li></ol><p id="toDoNotes">Make sure all these are completed by 8pm so you can watch the game on TV.</p></body></html>
讀取元素的屬性：
<divid="id1"title="report">some text</div>title就是div的屬性，屬性通常表示為“attribute=value”；
獲得目標元素的屬性，就可以
varmyNode=document.getElementById("id1");myNode.getAttribute("title");
如果嘗試訪問不存在的屬性時，返回null；所以有時候我們可以利用這個特點，檢測元素是否有特定的屬性。
比如：
if(myNode.getAttribute("xxx")){......程式碼}
建立新節點：
第一步，建立一個節點。節點此時處於某種不確定節點；
第二部，把節點新增至DOM樹的指定位置；
document物件的createElement方法可以建立任何型別的HTML元素，
vardiv1=document.createElement("div");文字節點，可以使用createTextNode方法建立，
vartext1=document.createTextNode("sometext");操作子節點：
可以使用appendChild（）方法，追加節點。
vartext1 = document.createTextNode("some text");vardiv1=document.createElement("div");div1.appendChild(text1);
這樣div1元素中，就有了一個文字節點。但是appendChild方法總是把節點追加在後面的。
insertBefore（）方法：
<divid="id1"><pid="p1">some text</p><p id="p2">some text</p></div>
varnewPara=document.createElement("p");varp2=document.getElementById("p2");vardiv1 = document.getElementById("id1");div1.insertBefore(newPara,p2);
以上就把新節點插入在p1和p2之間。
removeChild（）方法：
可以在DOM樹中刪除節點。
vardiv1=document.getElementById("id1");varp2=document.getElementById("p2");div1.removeChild(p2);
當父節點不方便引用時，可以使用parentNode屬性代替，
varp2=document.getElementById("p2);p2.parentNode.removeChild(p2);
setAttribute（）方法：
varp2=document.getElementById("p2);p2.setAttribute("title","some text");
下節我們接著分享。
