根據 W3C 的 HTML DOM 標準，HTML 文檔中的所有內容都是節點：

整個文檔是一個文檔節點

每個 HTML 元素是元素節點

HTML 元素內的文本是文本節點

每個 HTML 屬性是屬性節點

注釋是注釋節點

雖然還是有點亂，但是我是這么理解DOM的：Javascript與Html文檔元素的進行業務邏輯交互。

湯姆大叔是這么解釋的：DOM（Document Object Model，文檔對象模型）是一個通過和JavaScript進行內容交互的API。

window對象作為全局對象，也就是說你可以通過window來訪問全局對象。

DOM為web文檔創建帶有層級的結果，這些層級是通過node節點組成，這里有幾種DOM node類型，最重要的是Element, Text, Document。

每個引擎對DOM標準的實現有一些輕微的不同。例如，Firefox瀏覽器使用的Gecko引擎有著很好的實現（盡管沒有完全遵守W3C規范），但IE瀏覽器使用的Trident引擎的實現卻不完整而且還有bug，給開發人言帶來了很多問題。

通過節點的ID，可以準確獲得需要的元素，是比較簡單快捷的方法。語法：

說明：根據指定的 id 屬性值得到對象。返回 id 屬性值等于 sID 的第一個對象的引用。假如對應的為一組對象，則返回該組對象中的第一個。 如果無符合條件的對象，則返回 null 。

注意：
document.getElementById()得到的是一個對象；
用alert顯示得到的是object，而不是具體的值；
它有`value`和`length`等屬性；
加上`.value`得到的才是具體的值。

注意：在 IE 中 getElementById() 只抓得到第一個出現的ID的事務。

返回帶有指定名稱的節點對象的集合。語法：

與getElementById()方法不同的是，通過元素的name屬性查詢元素，而不是通過id屬性。

注：

因為文檔中的name屬性可能不唯一，所有getElementsByName()方法返回的是元素的數組，而不是一個元素。

和數組類似也有length屬性，可以和訪問數組一樣的方法來訪問，從0開始。

返回帶有指定標簽名的節點對象的集合。返回元素的順序是它們在文檔中的順序。 語法:

說明:

Tagname是標簽的名稱，如p、a、img等標簽名。

和數組類似也有length屬性，可以和訪問數組一樣的方法來訪問，所以從0開始。

以人來舉例來說：人有能標識身份的身份證，有姓名，有類別(大人、小孩、老人)等。

ID 是一個人的身份證號碼，是唯一的。所以通過getElementById()獲取的是指定的一個人。

Name 是他的名字，可以重復。所以通過getElementsByName()獲取名字相同的人集合。

TagName可看似某類，getElementsByTagName()獲取相同類的人集合。如獲取小孩這類人:getElementsByTagName("小孩")。

下面有一個html代碼片段：

        音樂
        登山
        游泳
        閱讀
        打球
        跑步 
      
      

如果：

我們使用document.getElementsByTagName("input")，結果為獲取所有標簽為input的元素，共8個。

我們使用document.getElementsByName("hobby")，結果為獲取name屬性為hobby的元素，共6個。

我們使用document.getElementById("hobby6")，結果為獲取id屬性為hobby6的元素，只有一個。

通過元素節點的屬性名稱獲取屬性的值。語法：

說明：

elementNode：使用getElementById()、getElementsByTagName()等方法，獲取到的元素節點。

name：要想查詢的元素節點的屬性名字。

上圖：實現獲取h1標簽的屬性值。
運行結果：
h1標簽的ID ：alink
h1標簽的title ：getAttribute()獲取標簽的屬值

getAttribute()方法是一個函數。它只有一個參數——你打算查詢的屬性的名字。

不過，getAttribute()方法不能通過document對象調用，它只能通過一個元素節點對象調用。

setAttribute() 方法增加一個指定名稱和值的新屬性，或者把一個現有的屬性設定為指定的值。語法：

說明：
1.name: 要設置的屬性名。
2.value: 要設置的屬性值。

注意：
1.把指定的屬性設置為指定的值。如果不存在具有指定名稱的屬性，該方法將創建一個新屬性。
2.類似于getAttribute()方法，setAttribute()方法只能通過元素節點對象調用的函數。

setAttribute()方法允許我們對屬性節點的值做出修改，這是一個很重要的特質。

通過setAttribute()方法對文檔做出的修改，將使得文檔在瀏覽器窗口里的顯示效果和/或行為動作發生相應的變化，但我們在通過瀏覽器的view source（查看源代碼）選項去查看文檔的源代碼時看到的仍將是原來的屬性值。

也就是說，setAttribute()方法做出的修改不會反映在文檔本身的源代碼里。

這種“表里不一”的現象源自DOM的工作模式：先加載文檔的靜態內容、再以動態方式對它們進行刷新，動態刷新不影響文檔的靜態內容。這正是DOM的真正威力和誘人之處：對頁面內容的刷新不需要最終用戶在他們的瀏覽器里執行頁面刷新操作就可以實現。

在文檔對象模型 (DOM) 中，每個節點都是一個對象。

DOM 節點有三個重要的屬性 ：

nodeName : 節點的名稱

nodeValue ：節點的值

nodeType ：節點的類型

1、nodeName 屬性: 節點的名稱，是只讀的。

元素節點的 nodeName 與標簽名相同

屬性節點的 nodeName 是屬性的名稱

文本節點的 nodeName 永遠是 #text

文檔節點的 nodeName 永遠是 #document

2、nodeValue 屬性：節點的值

元素節點的 nodeValue 是 undefined 或 null

文本節點的 nodeValue 是文本自身

屬性節點的 nodeValue 是屬性的值

3、nodeType 屬性: 節點的類型，是只讀的。以下常用的幾種結點類型:
元素類型：節點類型
元素：1
屬性：2
文本：3
注釋：8
文檔：9

訪問選定元素節點下的所有子節點的列表，返回的值可以看作是一個數組，他具有length屬性。語法：

結合案例說一下：

運行結果:
IE:
  UL子節點個數:3
  節點類型:1
其它瀏覽器:
   UL子節點個數:7
   節點類型:3

注意:

IE全系列、firefox、chrome、opera、safari兼容問題。

節點之間的空白符，在firefox、chrome、opera、safari瀏覽器是文本節點，所以IE是3，其它瀏覽器是7。

所以它就被看成了：

如果把代碼改成這樣:

javascript
jQuery
PHP

運行結果:（IE和其它瀏覽器結果是一樣的）
UL子節點個數:3
節點類型:1

這個跟上面那個子節點都比較少用到，簡單說一下就可以了，獲取指定節點的父節點
語法：

注意:父節點只能有一個。

獲取 P 節點的父節點的案例：

    

      
 parentNode 獲取指點節點的父節點
    
 
    

運行結果:

parentNode 獲取指點節點的父節點
DIV

訪問祖節點:

看看下面的代碼:

    
  
      

        parentNode      
         獲取指點節點的父節點
      
    
 
    

運行結果:

parentNode獲取指點節點的父節點
DIV    

注意: 瀏覽器兼容問題，chrome、firefox等瀏覽器標簽之間的空白也算是一個文本節點。

注：其實還有兄弟節點nodeObject.nextSibling，這里就不多說了，確實很少用到。

講述獲得瀏覽器窗口的尺寸（瀏覽器的視口，不包括工具欄和滾動條）的方法

1、對于IE9+、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 瀏覽器窗口的內部高度

window.innerWidth - 瀏覽器窗口的內部寬度

2、對于 IE 8、7、6、5：

document.documentElement.clientHeight表示HTML文檔所在窗口的當前高度。

document.documentElement.clientWidth表示HTML文檔所在窗口的當前寬度。

或者Document對象的body屬性對應HTML文檔的標簽

document.body.clientHeight

document.body.clientWidth

3、在不同瀏覽器都實用的 JavaScript 方案：

var w= document.documentElement.clientWidth || document.body.clientWidth;

var h= document.documentElement.clientHeight || document.body.clientHeight;

先看一張圖：

說明：
scrollLeft : 設置或獲取位于給定對象左邊界與窗口中目前可見內容的最左端之間的距離 ，即左邊灰色的內容。
scrollTop : 設置或獲取位于對象最頂端與窗口中可見內容的最頂端之間的距離 ，即上邊灰色的內容。
offsetLeft : 獲取指定對象相對于版面或由 offsetParent 屬性指定的父坐標的計算左側位置 。
offsetTop : 獲取指定對象相對于版面或由 offsetParent 屬性指定的父坐標的計算頂端位置 。

注意:

區分大小寫

offsetParent：布局中設置postion屬性(Relative、Absolute、fixed)的父容器，從最近的父節點開始，一層層向上找，直到HTML的body。

最后附上一份福利吧：

    
    
    
        
        
        
         
        
      
    
    
    
    

        

            
房產
            
家居
            
二手房
        
        

            275萬購昌平鄰鐵三居 總價20萬買一居

            200萬內購五環三居 140萬安家東三環

            北京首現零首付樓盤 53萬購東5環50平

            京樓盤直降5000 中信府 公園樓王現房

        
        

            40平出租屋大改造 美少女的混搭小窩

            經典清新簡歐愛家 90平老房煥發新生

            新中式的酷色溫情 66平撞色活潑家居

            瓷磚就像選好老婆 衛生間煙道的設計

        
        

            通州豪華3居260萬 二環稀缺2居250w甩

            西3環通透2居290萬 130萬2居限量搶購

            黃城根小學學區僅260萬 121平70萬拋!

            獨家別墅280萬 蘇州橋2居優惠價248萬

        
    
    
    

代碼說明：這段代碼能實現選項卡切換的效果

1、HTML頁面布局

選項卡標題使用ul..li

選項卡內容使用div

2、CSS樣式制作

整個選項卡的樣式設置

選項卡標題的樣式設置

選項卡內容的樣式設置

一開始只顯示一個選項卡內容，其它選項卡內容隱藏。

3、JS實現選項卡切換

獲取選項卡標題和選項卡內容

選項卡內容多個，需要循環遍歷來操作，得知哪個選項卡和哪個選項內容匹配

通過改變DOM的css類名稱,當前點擊的選項卡顯示，其它隱藏。