根據(jù) W3C 的 HTML DOM 標(biāo)準(zhǔn)，HTML 文檔中的所有內(nèi)容都是節(jié)點：

整個文檔是一個文檔節(jié)點

每個 HTML 元素是元素節(jié)點

HTML 元素內(nèi)的文本是文本節(jié)點

每個 HTML 屬性是屬性節(jié)點

注釋是注釋節(jié)點

雖然還是有點亂，但是我是這么理解DOM的：Javascript與Html文檔元素的進(jìn)行業(yè)務(wù)邏輯交互。

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

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

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

每個引擎對DOM標(biāo)準(zhǔn)的實現(xiàn)有一些輕微的不同。例如，F(xiàn)irefox瀏覽器使用的Gecko引擎有著很好的實現(xiàn)（盡管沒有完全遵守W3C規(guī)范），但I(xiàn)E瀏覽器使用的Trident引擎的實現(xiàn)卻不完整而且還有bug，給開發(fā)人言帶來了很多問題。

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

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

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

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

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

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

注：

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

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

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

說明:

Tagname是標(biāo)簽的名稱，如p、a、img等標(biāo)簽名。

和數(shù)組類似也有l(wèi)ength屬性，可以和訪問數(shù)組一樣的方法來訪問，所以從0開始。

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

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

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

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

下面有一個html代碼片段：

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

如果：

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

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

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

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

說明：

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

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

上圖：實現(xiàn)獲取h1標(biāo)簽的屬性值。
運(yùn)行結(jié)果：
h1標(biāo)簽的ID ：alink
h1標(biāo)簽的title ：getAttribute()獲取標(biāo)簽的屬值

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

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

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

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

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

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

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

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

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

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

DOM 節(jié)點有三個重要的屬性 ：

nodeName : 節(jié)點的名稱

nodeValue ：節(jié)點的值

nodeType ：節(jié)點的類型

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

元素節(jié)點的 nodeName 與標(biāo)簽名相同

屬性節(jié)點的 nodeName 是屬性的名稱

文本節(jié)點的 nodeName 永遠(yuǎn)是 #text

文檔節(jié)點的 nodeName 永遠(yuǎn)是 #document

2、nodeValue 屬性：節(jié)點的值

元素節(jié)點的 nodeValue 是 undefined 或 null

文本節(jié)點的 nodeValue 是文本自身

屬性節(jié)點的 nodeValue 是屬性的值

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

訪問選定元素節(jié)點下的所有子節(jié)點的列表，返回的值可以看作是一個數(shù)組，他具有l(wèi)ength屬性。語法：

結(jié)合案例說一下：

運(yùn)行結(jié)果:
IE:
  UL子節(jié)點個數(shù):3
  節(jié)點類型:1
其它瀏覽器:
   UL子節(jié)點個數(shù):7
   節(jié)點類型:3

注意:

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

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

所以它就被看成了：

如果把代碼改成這樣:

javascript
jQuery
PHP

運(yùn)行結(jié)果:（IE和其它瀏覽器結(jié)果是一樣的）
UL子節(jié)點個數(shù):3
節(jié)點類型:1

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

注意:父節(jié)點只能有一個。

獲取 P 節(jié)點的父節(jié)點的案例：

    

      
 parentNode 獲取指點節(jié)點的父節(jié)點
    
 
    

運(yùn)行結(jié)果:

parentNode 獲取指點節(jié)點的父節(jié)點
DIV

訪問祖節(jié)點:

看看下面的代碼:

    
  
      

        parentNode      
         獲取指點節(jié)點的父節(jié)點
      
    
 
    

運(yùn)行結(jié)果:

parentNode獲取指點節(jié)點的父節(jié)點
DIV    

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

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

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

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

window.innerHeight - 瀏覽器窗口的內(nèi)部高度

window.innerWidth - 瀏覽器窗口的內(nèi)部寬度

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

document.documentElement.clientHeight表示HTML文檔所在窗口的當(dāng)前高度。

document.documentElement.clientWidth表示HTML文檔所在窗口的當(dāng)前寬度。

或者Document對象的body屬性對應(yīng)HTML文檔的標(biāo)簽

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 : 設(shè)置或獲取位于給定對象左邊界與窗口中目前可見內(nèi)容的最左端之間的距離 ，即左邊灰色的內(nèi)容。
scrollTop : 設(shè)置或獲取位于對象最頂端與窗口中可見內(nèi)容的最頂端之間的距離 ，即上邊灰色的內(nèi)容。
offsetLeft : 獲取指定對象相對于版面或由 offsetParent 屬性指定的父坐標(biāo)的計算左側(cè)位置 。
offsetTop : 獲取指定對象相對于版面或由 offsetParent 屬性指定的父坐標(biāo)的計算頂端位置 。

注意:

區(qū)分大小寫

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

最后附上一份福利吧：

    
    
    
        
        
        
         
        
      
    
    
    
    

        

            
房產(chǎn)
            
家居
            
二手房
        
        

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

            200萬內(nèi)購五環(huán)三居 140萬安家東三環(huán)

            北京首現(xiàn)零首付樓盤 53萬購東5環(huán)50平

            京樓盤直降5000 中信府 公園樓王現(xiàn)房

        
        

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

            經(jīng)典清新簡歐愛家 90平老房煥發(fā)新生

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

            瓷磚就像選好老婆 衛(wèi)生間煙道的設(shè)計

        
        

            通州豪華3居260萬 二環(huán)稀缺2居250w甩

            西3環(huán)通透2居290萬 130萬2居限量搶購

            黃城根小學(xué)學(xué)區(qū)僅260萬 121平70萬拋!

            獨家別墅280萬 蘇州橋2居優(yōu)惠價248萬

        
    
    
    

代碼說明：這段代碼能實現(xiàn)選項卡切換的效果

1、HTML頁面布局

選項卡標(biāo)題使用ul..li

選項卡內(nèi)容使用div

2、CSS樣式制作

整個選項卡的樣式設(shè)置

選項卡標(biāo)題的樣式設(shè)置

選項卡內(nèi)容的樣式設(shè)置

一開始只顯示一個選項卡內(nèi)容，其它選項卡內(nèi)容隱藏。

3、JS實現(xiàn)選項卡切換

獲取選項卡標(biāo)題和選項卡內(nèi)容

選項卡內(nèi)容多個，需要循環(huán)遍歷來操作，得知哪個選項卡和哪個選項內(nèi)容匹配

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