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

整個(gè)文檔是一個(gè)文檔節(jié)點(diǎn)

每個(gè) HTML 元素是元素節(jié)點(diǎn)

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

每個(gè) HTML 屬性是屬性節(jié)點(diǎn)

注釋是注釋節(jié)點(diǎn)

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

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

window對(duì)象作為全局對(duì)象，也就是說(shuō)你可以通過(guò)window來(lái)訪問(wèn)全局對(duì)象。

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

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

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

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

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

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

返回帶有指定名稱的節(jié)點(diǎn)對(duì)象的集合。語(yǔ)法：

與getElementById()方法不同的是，通過(guò)元素的name屬性查詢?cè)?，而不是通過(guò)id屬性。

注：

因?yàn)槲臋n中的name屬性可能不唯一，所有getElementsByName()方法返回的是元素的數(shù)組，而不是一個(gè)元素。

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

返回帶有指定標(biāo)簽名的節(jié)點(diǎn)對(duì)象的集合。返回元素的順序是它們?cè)谖臋n中的順序。 語(yǔ)法:

說(shuō)明:

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

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

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

ID 是一個(gè)人的身份證號(hào)碼，是唯一的。所以通過(guò)getElementById()獲取的是指定的一個(gè)人。

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

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

下面有一個(gè)html代碼片段：

        音樂(lè)
        登山
        游泳
        閱讀
        打球
        跑步 
      
      

如果：

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

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

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

通過(guò)元素節(jié)點(diǎn)的屬性名稱獲取屬性的值。語(yǔ)法：

說(shuō)明：

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

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

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

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

不過(guò)，getAttribute()方法不能通過(guò)document對(duì)象調(diào)用，它只能通過(guò)一個(gè)元素節(jié)點(diǎn)對(duì)象調(diào)用。

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

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

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

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

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

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

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

在文檔對(duì)象模型 (DOM) 中，每個(gè)節(jié)點(diǎn)都是一個(gè)對(duì)象。

DOM 節(jié)點(diǎn)有三個(gè)重要的屬性 ：

nodeName : 節(jié)點(diǎn)的名稱

nodeValue ：節(jié)點(diǎn)的值

nodeType ：節(jié)點(diǎn)的類型

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

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

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

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

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

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

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

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

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

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

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

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

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

注意:

IE全系列、firefox、chrome、opera、safari兼容問(wèn)題。

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

所以它就被看成了：

如果把代碼改成這樣:

javascript
jQuery
PHP

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

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

注意:父節(jié)點(diǎn)只能有一個(gè)。

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

    

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

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

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

訪問(wèn)祖節(jié)點(diǎn):

看看下面的代碼:

    
  
      

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

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

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

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

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

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

1、對(duì)于IE9+、Chrome、Firefox、Opera 以及 Safari：

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

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

2、對(duì)于 IE 8、7、6、5：

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

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

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

document.body.clientHeight

document.body.clientWidth

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

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

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

先看一張圖：

說(shuō)明：
scrollLeft : 設(shè)置或獲取位于給定對(duì)象左邊界與窗口中目前可見(jiàn)內(nèi)容的最左端之間的距離 ，即左邊灰色的內(nèi)容。
scrollTop : 設(shè)置或獲取位于對(duì)象最頂端與窗口中可見(jiàn)內(nèi)容的最頂端之間的距離 ，即上邊灰色的內(nèi)容。
offsetLeft : 獲取指定對(duì)象相對(duì)于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算左側(cè)位置 。
offsetTop : 獲取指定對(duì)象相對(duì)于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算頂端位置 。

注意:

區(qū)分大小寫

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

最后附上一份福利吧：

    
    
    
        
        
        
         
        
      
    
    
    
    

        

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

            275萬(wàn)購(gòu)昌平鄰鐵三居 總價(jià)20萬(wàn)買一居

            200萬(wàn)內(nèi)購(gòu)五環(huán)三居 140萬(wàn)安家東三環(huán)

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

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

        
        

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

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

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

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

        
        

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

            西3環(huán)通透2居290萬(wàn) 130萬(wàn)2居限量搶購(gòu)

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

            獨(dú)家別墅280萬(wàn) 蘇州橋2居優(yōu)惠價(jià)248萬(wàn)

        
    
    
    

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

1、HTML頁(yè)面布局

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

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

2、CSS樣式制作

整個(gè)選項(xiàng)卡的樣式設(shè)置

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

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

一開(kāi)始只顯示一個(gè)選項(xiàng)卡內(nèi)容，其它選項(xiàng)卡內(nèi)容隱藏。

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

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

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

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