【JavaScript基礎知識】——DOM基礎

基本概念

   

    DOM即文檔對象模型，針對HTML和XML文檔的API（應用程序接口）。它描繪了一個層次化的節點樹，運行開發人員添加、移除和修改頁面的某一部分。DOM能夠以一種獨立於平臺和語言的方式訪問和修改一個文檔的內容和結構，也就是表示和處理一個HTML或XML文檔的經常使用方法。

    D即document，上網查了一下它的英文翻譯，最初的意思是記錄。因此把它說是文檔也是有跡可循的。O即Object，也就是對象，能夠理解爲相似window對象之類的東西，能夠調用屬性和方法。M（模型）能夠理解爲網頁文檔的樹形結構。到這裏，咱們應該想到節點以及節點的一些屬性。畢竟咱們學過了數據結構，可是也有別於數據結構，這裏的節點是標籤節點，節點的種類有元素節點、文本節點和屬性節點。

查找元素

    DOM定義了訪問HTML和XML文檔的標準，元素是HTML和XML重要的組成部分，因此查找元素也是DOM中很重要的一部分。

getElementById()	接受一個參數：獲取元素的ID。
getElementsByTagName()	獲取相同元素的節點列表
getElementsByName()	獲取相同名稱的節點列表
getAttribute()	獲取特定元素節點屬性的值
setAttribute()	設置特定元素節點屬性的值
removeAttribute()	移除特定元素節點屬性

 

DOM節點

     節點能夠分爲元素節點、屬性節點和文本節點，而這些節點又有三個很是有用的屬性：nodeName、nodeTyoe和nodeValue。和數據結構裏的樹同樣，DOM節點也有層次結構，劃分爲：父節點與子節點、兄弟節點兩種。當咱們獲取其中一個元素節點的時候，就能夠使用層次節點屬性來獲取它相關層次的節點。

屬性	說明
childNodes	獲取當前元素節點的全部子節點
firstChild	獲取當前元素節點的第一個子節點
lastChild	獲取當前元素節點的最後一個子節點
ownerDocument	獲取該節點的文檔根節點，至關與document
parentNode	獲取當前節點的父節點
previousSibling	獲取當前節點的前一個同級節點
nextSibling	獲取當前節點的後一個同級節點
attributes	獲取當前元素節點的全部屬性節點集合

     DOM不僅僅能夠查找節點，也能夠建立節點、複製節點、插入節點、刪除節點和替換節點。

方法	說明
write()	這個方法能夠把任意字符串插入到文檔中
createElement()	建立一個元素節點
appendChild()	將新節點追加到子節點列表的末尾
createTextNode()	建立一個文件節點
insertBefore()	將新節點插入在前面
replaceChild()	將新節點替換舊節點
cloneNode	複製節點
removeChild()	移除節點

 

總結

     DOM基礎是下面繼續學習的基礎，經過對基礎理解掌握，對於下面的學習會更有幫助。好長一段時間沒有學習它了，應該加快步伐把它學完儘快進入下一部份內容的學習。