JavaScript學習7：DOM基礎，javascriptdom基礎
DOM的全稱為DocumentObject Model，即文件物件模型，是針對HTML和XML文檔的API。它描繪了一個具有階層的節點樹，運行開發人員添加、移除和修改頁面的某一部分。DOM是由Netscape及微軟公司創始的DHTML發展而來的，但是現在它已經成為了表現和操作頁面的真正跨平台的、語言中立的方式。
一．對DOM的理解
DOM中的三個字母，D可以理解為整個Web載入的網頁文檔；O可以理解為類似window
對象之類的東西，可以調用屬性和方法，這裡我們所說的是document對象；M可以看做是網頁文檔的樹形結構。
1節點
載入HTML頁面時，Web瀏覽器產生一個樹型結構，用來表示頁面內部結構，DOM將這種樹型結構理解為由節點群組成。如所示
從的樹型結構我們可以看到，html標籤沒有父輩，沒有兄弟，所以html標籤為根標籤，head標籤是html子標籤，而meta和title標籤之間是兄弟關係。如果把每個標籤當作一個節點的話，那麼這些節點群組合成了一棵節點樹。
2節點種類
DOM中的節點大概分為：元素節點、文本節點和屬性節點
二．尋找元素
W3提供了比較方便簡單的定位節點的方法和屬性，以便我們快速的對節點進行操作，
列舉如下：
我們通過getElementById()擷取到特定元素節點時，這個節點對象就被我們擷取到了，而通過這個節點對象，我們可以訪問他的一系列屬性。
那麼這些屬性值如何取出來呢？
我們來看一個簡單的小例子：
<span style="font-size:18px;"><body><div id="box" title="測試頁面" class="cla" style="color:blue;" >學好JS，前台都不怕！</div ></body>window.onload=function(){var obj= document.getElementById('box');alert(obj.tagName);alert(obj.innerHTML);alert(obj.id);alert(obj.title);alert(obj.style.color);alert(obj.className);};</span>
至於其他方法就不再一一說明了，想瞭解的可以去查相關的資料。
三．DOM節點
1 node節點屬性
節點可分為三種，上文提到了，而這些節點又有三個非常有用的屬性，分別為：nodeName、
nodeType、和nodeValue。如下是他們的說明：
2層次節點屬性
節點的階層可以劃分為：父節點與子節點、兄弟節點這兩種。當我們擷取其中一個元素節點的時候，就可以使用層次節點屬性來擷取它相關層次的節點。
四．節點操作
DOM不單單可以尋找節點，也可以建立節點、複製節點、插入節點、刪除節點和替換節點。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
