1、什么叫DOM？
文檔對(duì)象模型（Document Object Model，簡(jiǎn)稱DOM），是W3C組織推薦的處理可擴(kuò)展標(biāo)志語言的標(biāo)準(zhǔn)編程接口。在網(wǎng)頁上，組織頁面（或文檔）的對(duì)象被組織在一個(gè)樹形結(jié)構(gòu)中，用來表示文檔中對(duì)象的標(biāo)準(zhǔn)模型就稱為DOM。
DOM技術(shù)使得用戶頁面可以動(dòng)態(tài)地變化，如可以動(dòng)態(tài)地顯示或隱藏一個(gè)元素，改變它們的屬性，增加一個(gè)元素等，DOM技術(shù)使得頁面的交互性大大地增強(qiáng)。
DOM定義了表示和修改文檔所需的對(duì)象、這些對(duì)象的行為和屬性以及這些對(duì)象之間的關(guān)系。
２、DOM樹
可以把DOM認(rèn)為是頁面上數(shù)據(jù)和結(jié)構(gòu)的一個(gè)樹形表示，不過頁面當(dāng)然可能并不是以這種樹的方式具體實(shí)現(xiàn)
DOM.jpg
DOM.jpg
3、查找獲取節(jié)點(diǎn)的方法
包括五種方式：
1.按id查找；
2.按標(biāo)簽名查找：var elems = parent.getElementsByTagName('');
3.按name屬性查找：要回傳給服務(wù)器的元素需要name屬性，專門找表單中有name屬性的表單元素；---了解即可；
4.按class屬性查找；
var elems = parent.getElementsByClassName('class名');
（1）.可在任意父元素上調(diào)用；
（2），可返回多個(gè)元素的組成的集合；
（3），不要求全部匹配，只要包含即可；
缺點(diǎn)：每次只能按一個(gè)條件查找，如果條件復(fù)雜的話，就無法一句話獲得想要的元素；
5，這是重點(diǎn)強(qiáng)調(diào)的選擇器，按選擇器查找：用的比較多，比較犀利。
5.1 只找一個(gè)元素：
var elem = parent.querySelector('selector‘);
5.2 找多個(gè)元素：
var elems = parent.querySelectorAll（'selector')
那么我們獲得了這些元素，就可以對(duì)他們更改、添加或刪除啦，所以我們說 DOM 是用于獲取、更改、添加或刪除 XML 元素的標(biāo)準(zhǔn)。
4、DOM節(jié)點(diǎn)類型
這里只介紹幾個(gè)方便我們寫代碼的節(jié)點(diǎn)
childNodes 所有子節(jié)點(diǎn)(數(shù)組)=換行+注釋+所有子標(biāo)簽
children 所有是標(biāo)簽類型的子節(jié)點(diǎn)
parentNode 父節(jié)點(diǎn)
nextSibling 下一個(gè)兄弟節(jié)點(diǎn)
previousSibling 上一個(gè)兄弟節(jié)點(diǎn)
firstChild 第一個(gè)子節(jié)點(diǎn)
lastChild 最后一個(gè)子節(jié)點(diǎn)
5、常見的節(jié)點(diǎn)操作
（1）創(chuàng)建節(jié)點(diǎn)/屬性
document.createElement("標(biāo)簽名");? //創(chuàng)建一個(gè)標(biāo)簽節(jié)點(diǎn)
document.createTextNode("你好");? //創(chuàng)建一個(gè)文本節(jié)點(diǎn)
(2)插入節(jié)點(diǎn)
div.appendChild(newNode);
//在某個(gè)div節(jié)點(diǎn)的末尾添加一個(gè)子節(jié)點(diǎn)
// 在XXX之前插入span
redDiv.insertBefore(span,redDiv.children[1]);
(3)刪除節(jié)點(diǎn)
redDiv.removeChild(addr);
// 移除redDiv的子節(jié)點(diǎn)address，address父級(jí)調(diào)用方法
addr.remove();
//移除address標(biāo)簽，自身調(diào)用方法
（4）修改、替換節(jié)點(diǎn)
var h2=document.createElement("h2");
h2.innerHTML="泗涇";
h2.style.color="blue";
redDiv.replaceChild(h2,redDiv.children[0]);
