DOM系列：DOM操作小結

DOM是JavaScript的基礎之一，自己學習DOM的操作也有一段時間了，到今天為止DOM系列的教程剛好有十篇了，這部分都主要是圍繞DOM操作的筆記。主要圍繞DOM元素的增、刪、改、查，DOM節點的操作以及元素尺寸、位置獲取和設置等知識。今天這篇文章主要是小結一下。希望對一些像我這樣的初學者有所幫助。

瀏覽器與DOM

這篇文章只是瞭解了DOM中最簡單，最基礎的一部分。實際上，使用它的功能與你的Web文檔交互是更大更有趣的部分。不過這將是後面要瞭解的東西，因為在深入探討這部分之前，我們需要先瞭解DOM的一些基礎和概念，只有這樣才能發揮DOM的強大優勢，更好的幫助我們操作Web頁面或者說Web應用程序。

DOM樹和遍歷DOM

這篇文章主要介紹了DOM樹和DOM的遍歷。前一部分只要介紹了DOM樹，簡單的理解，任何一個HTML文檔都可以類似於家族的族普來繪製對應的DOM樹。通過DOM樹可以理清楚每個DOM元素（或者說DOM節點）之間的關係。比如，父子關係、兄弟關係等。

getElement* 和 querySelector*

選擇DOM中的元素，除了一些節點屬性之外，還有一些API可以幫助我們獲取DOM元素，比如在這篇文章介紹的getElement*和querySelector*：

• getElementById()
• getElementsByClassName()
• getElementsByTagName()
• getElementsByName()
• document.querySelector()
• document.querySelectorAll()

這其實就是DOM增刪改查中的查。從劃分上可以看出來，簡單的可以理解查找DOM元素API的兩個系列。而這篇文章主要介紹的就是他們之間的差異。

DOM節點屬性

每個DOM節點屬於某個類。這些類構成一個DOM樹。所有的屬性和方法都將被繼承。這篇文章就是圍繞DOM節點屬性展開的，主要闡述了DOM節點類、DOM節點類型、DOM節點標籤、DOM節點內容四個部分。主要的DOM節點屬性有:nodeType、nodeName、tagName、innerHTML、outerHTML、nodeValue、textContent等。

Attribute和Property

這兩天一直在看DOM元素的attribute和property，簡單讓人暈。從直譯上，我一開始都理解為“屬性”，而且對於我這樣的新手，將兩者混淆在一起，傻傻的分不清楚。後來經過大大們的指點，知道兩者是不同的東西，但兩者之間又有緊密的聯繫。這篇文章有利於初學者能更清晰的整明白兩者的關係與不同。

修改DOM

這篇文章主要學習了如何修改DOM。涉及到的內容也比較多，簡單的做一下小總結。

• 創建新節點的方法：document.createElement(tag)、document.createTextNode(value)和elem.cloneNode(deep)
• 插入和刪除節點的DOM API：parent.appendChild(node)、parent.insertBefore(node, nextSibling)、parent.removeChild(node)和parent.replaceChild(newElem, node)
• 給定一個節點和字符串的相關操作：node.append(...nodes or strings)、node.prepend(...nodes or strings)、node.before(...nodes or strings)、node.after(...nodes or strings)、node.replaceWith(...nodes or strings)和node.remove()
• 指定HTML片段插入的位置：beforebegin、afterbegin、beforeend和afterend

樣式和類

這篇文章主要介紹了如何通過JavaScript來修改CSS樣式。我們平常中會使用到的方法會有：

• 通過DOM Element對象的getAttribute()、setAttribute()和removeAttribute()等方法修改元素的style屬性
• 通過對元素節點的style來讀寫行內CSS樣式
• 通過style對象的cssText屬性來修改全部的style屬性
• 通過style對象的setProperty()、getPropertyValue()、removeProperty()等方法來讀寫行內CSS樣式
• 通過window.getComputedStyle()方法獲得瀏覽器最終計算的樣式規則
• 通過className或classList給元素添加或刪除類名，配合樣式文件來修改元素樣式

動態添加CSS樣式規則

事實上我們還可以通過腳本化CSS這種技術來控制樣式。這種方式，可以讓我們的頁面更加的快速和高效。那就是直接通過JavaScript動態地添加和刪除樣式表中的某些樣式，用來取代不斷地查詢DOM元素，並應用各種樣式。

獲取元素位置和尺寸

JavaScript檢測元素有六個DOM的幾何結構屬性：offsetWidth、offsetHeight、clientWidth、clientHeight、scrollWidth、scrollHeight。再加上offsetTop、offsetLeft、scrollTop、scrollLeft、clientTop和clientLeft等方向距離的屬性。這樣一來，讓事情就變得複雜，對於像我這樣的初學者而言，極難理解，也易產生一些錯誤。正因這個原因，整理了一篇這樣的文章。

視窗、設備、滾動條和文檔尺寸

這篇文章將學習視窗、設備、滾動條和文檔等相關的尺寸。其實在前兩篇文章中都有涉及這些知識，為了讓DOM系列相關的知識更完善。

總結

這篇文章是DOM系列中的一個小總結，也是一個小集合。主要涉及DOM中的操作，圍繞DOM元素、DOM節點和DOM屬性的增、刪、改、查的操作。另外一部分圍繞DOM元素的樣式的控制和DOM元素的尺寸位置相關的操作。但這些並沒有涉及到DOM事件的操作。

僅僅掌握上面的這些內容還不足夠讓我們掌握DOM的。在JavaScript中有關於DOM相關的知識，還有DOM事件是必須要掌握。所以接下來一段時間，將會圍繞DOM事件學習。如果你感興趣的話，歡迎持續關注這個系列的學習。

由於自己也是JavaScript的初學者，文章難免有錯誤之處，煩請各位大嬸拍正。更歡迎有這方面的相關經驗的同學，在下面的評論中與我一起分享。如果你覺得這個系列有助於你學習和成長，歡迎各位大爺打個賞，我將持續創作更多有質量的教程。(^_^)!