DOM的理解和操做

什麼是DOM？

---

Document Object Model的縮寫，就是以層次化的模式來描述網頁的方式。

• Document就是指文檔（網頁文件）

• Object是指把網頁文檔看作一個總體

• Model模型模式

關於DOM

---

1. DOM是針對HTML和XML文檔的一個API（應用程序程序接口）。

2. DOM描繪了一個層次化的節點樹（節點關係）。

3. 它容許開發人員查找、添加、修改、刪除頁面的某一部分。

DOM節點樹

---

DOM的屬性

---

1. nodeName ——節點的名字；

2. nodeType —— 返回一個整數，表明這個節點的類型，1-元素節點，2-屬性節點，3-文本節點；

3. nodeValue —— 返回一個字符串，這個節點的值；

4. childNodes —— 返回一個數組，數組由元素節點的子節點構成；

5. firstChild —— 返回第一個子節點；

6. lastChild —— 返回最後一個子節點；

7. nextSibling —— 返回目標節點的下一個兄弟節點，若是目標節點後面沒有同屬於一個父節點的節點，返回null；

8. previousSibling —— 返回目標節點的前一個兄弟節點，若是目標節點前面沒有同屬於一個父節點的節點，返回null；

9. parentNode —— 返回的節點永遠是一個元素節點，由於只有元素節點纔有可能有子節點，document節點將返回null；

DOM節點的類型nodeType

---

nodeType屬性返回節點類型的常數值。不一樣的類型對應不一樣的常數值，12種類型分別對應1到12的常數值

1. 元素節點 —— Node.ELEMENT_NODE(1)

2. 屬性節點 —— Node.ATTRIBUTE_NODE(2)

3. 文本節點 —— Node.TEXT_NODE(3)

4. CDATA節點 —— Node.CDATA_SECTION_NODE(4)

5. 實體引用名稱節點 —— Node.ENTRY_REFERENCE_NODE(5)

6. 實體名稱節點 —— Node.ENTITY_NODE(6)

7. 處理指令節點 —— Node.PROCESSING_INSTRUCTION_NODE(7)

8. 註釋節點 —— Node.COMMENT_NODE(8)

9. 文檔節點 —— Node.DOCUMENT_NODE(9)

10. 文檔類型節點 —— Node.DOCUMENT_TYPE_NODE(10)

11. 文檔片斷節點 —— Node.DOCUMENT_FRAGMENT_NODE(11)

12. DTD聲明節點 —— Node.NOTATION_NODE(12)

DOM節點操做方法

---

方法	描述	栗子	注意
createElement()	建立元素節點	var node = document.createElement('div');	建立的節點不會被自動添加到文檔document裏
createTextNode()	建立文本節點	var val = document.createTextNode('text');	建立的節點不會被自動添加到文檔document裏
appendChild()	插入節點到最後	node.appendChild(val);
insertBefore()	插入節點到目標節點的前面	node.insertBefore(_span, _p);	<span>節點在<p>節點前面插入，其中第二個參數是可選，若是第二個參數不寫，將默認添加到文檔的最後，至關於appendChild。
cloneNode(boolean)	複製節點	node.cloneNode(true);/node.cloneNode(false)	參數true，複製整個節點和裏面的內容；false，只複製節點不要裏面的內容，複製後的新節點不會被自動插入到文檔。
removeChild()	刪除節點	node.removeChild(_p);
getAttribute()	獲取節點屬性	node.getAttribute('title');
setAttribute()	設置節點屬性	node.setAttribute('title','我是個美少女');	class屬性不能這樣設置。
hasChildNodes	判斷元素是否有子節點	node.hasChildNodes;	返回布爾值。
replaceChild()	替換子節點	var returnNode = ul.replaceChild(li,lis[1]); //用建立的li替換原來的第二個li	用於替換節點，接受兩個參數，第一參數是要插入的節點，第二個是要替換的節點，返回被替換的節點
document.getElementById()	返回帶有指定ID的元素	var element=document.getElementById("intro");
document.getElementsByTagName()	返回包含帶有指定標籤名稱的全部元素的節點列表（集合/節點數組）。	var element=document.getElementsByTagName('p');	獲取的是全部的p標籤
document.getElementsByClassName()	返回包含帶有指定類名的全部元素的節點列表。	var element=document.getElementsByClassName('_p');	獲取的是全部的含有‘_p’類名的元素
document.getElementsByName()	返回帶有指定名稱的對象的集合	var x=document.getElementsByName('sex'); alert(x.length);	查詢元素的 name 屬性，好比單選框它有一組同樣的name值，因此返回的是一個元素的數組，而不是一個元素。
document.querySelector	返回匹配的第一個元素	var obj = document.querySelector("#id"); var obj = document.querySelector(".classname"); var obj = document.querySelector("div");	若是沒有匹配項，返回null。
document.querySelectorAll	返回匹配的元素集合	同上	若是沒有匹配項，返回空的nodelist(節點數組)。