第四章DOM文檔對象模型

JavaScript程序設計與應用DOM文檔對象模型目

錄DOM基礎獲取元素節(jié)點操作元素利用層級關系獲取元素節(jié)點節(jié)點操作目

錄DOM基礎獲取元素節(jié)點操作元素利用層級關系獲取元素節(jié)點節(jié)點操作一、DOM是什么內置函數(shù)DOM基礎1、WebAPIsAPI：應用程序編程接口，是一些預定義的接口（如函數(shù)等），通過接口我們可以實現(xiàn)某種功能，但是使用時我們不需了解接口這個功能具體是如何實現(xiàn)的。WebAPIs：指瀏覽器提供的一套操作瀏覽器功能和頁面元素的API（DOM和BOM）。2、DOM定義文檔對象模型DOM（DocumentObjectModel）：是W3C組織推薦的可擴展標記語言（html或者xml）的標準編程接口。是一個與語言無關、與平臺無關的標準接口規(guī)范。它定義了HTML文檔的邏輯結構，給出了一種訪問和處理HTML文檔的方法。通過DOM接口，JavaScript可以在任何時候訪問并操作HTML文檔中的任何一部分數(shù)據(jù)?？梢詣討B(tài)地創(chuàng)建文檔，遍歷文檔結構，添加、修改、刪除文檔內容，改變文檔的顯示方式等，從而實現(xiàn)頁面交互效果。一、DOM是什么內置函數(shù)DOM基礎1、WebAPIsAPI：應用程序編程接口，是一些預定義的接口（如函數(shù)等），通過接口我們可以實現(xiàn)某種功能，但是使用時我們不需了解接口這個功能具體是如何實現(xiàn)的。WebAPIs：指瀏覽器提供的一套操作瀏覽器功能和頁面元素的API（DOM和BOM）。2、DOM定義文檔對象模型DOM（DocumentObjectModel）：是W3C組織推薦的可擴展標記語言（html或者xml）的標準編程接口。是一個與語言無關、與平臺無關的標準接口規(guī)范。它定義了HTML文檔的邏輯結構，給出了一種訪問和處理HTML文檔的方法。通過DOM接口，JavaScript可以在任何時候訪問并操作HTML文檔中的任何一部分數(shù)據(jù)。可以動態(tài)地創(chuàng)建文檔，遍歷文檔結構，添加、修改、刪除文檔內容，改變文檔的顯示方式等，從而實現(xiàn)頁面交互效果。二、DOM樹DOM基礎1、定義DOM接口提供了一種依據(jù)HTML的文檔結構的分層對象模型。在瀏覽器中，基于DOM的HTML分析器將一個頁面轉換成一個對象模型的集合（通常稱DOM樹）。DOM基礎2、節(jié)點DOM樹中的每一個對象我們稱之為節(jié)點，所以我們也稱這個根據(jù)文檔生成的層次結構是一棵節(jié)點樹。不管一個文檔有多簡單或者多復雜，其中的信息都會被轉化成一棵對象節(jié)點樹。在這棵節(jié)點樹中，有一個根節(jié)點即Document節(jié)點，所有其他的節(jié)點都是根節(jié)點的后代節(jié)點。DOM中的節(jié)點有元素節(jié)點、屬性節(jié)點、文本節(jié)點、注釋節(jié)點等不同類型，最常用的節(jié)點類型有元素、文本和屬性節(jié)點這三種。DOM基礎3、節(jié)點類型Node.ELEMENT_NODE(1)

一個標記（元素）Node.ATTRIBUTE_NODE(2)

表示一個標記（元素）的屬性Node.TEXT_NODE(3)

表示一個元素的文本內容Node.CDATA_SECTION_NODE(4)

在XML文檔中表示CharacterData（字符數(shù)據(jù)）部分Node.ENTITY_REFERENCE_NODE(5)

在文檔中表示一個實體引用Node.ENTITY_NODE(6)

在XML文檔中表示一個實體Node.PROCESSING_INSTRUCTION_NODE(7)

表示一個文檔處理程序使用的特有指令Node.COMMENT_NODE(8)

：表示一個注釋Node.DOCUMENT_NODE(9)

表示文檔的根節(jié)點Node.DOCUMENT_TYPE_NODE(10)

每個文檔節(jié)點都有一個DocumentType節(jié)點，它提供文檔類型的定義Node.DOCUMENT_FRAGMENT_NODE(11)

可以將文檔片段看作輕量級或者更小型的Document節(jié)點。定義這種數(shù)據(jù)類型是因為通常希望只提取文檔的一部分來處理。Node.NOTATION_NODE(12)

在XML文檔中表示一個符號DOM基礎4、Document對象每個載入瀏覽器的HTML頁面都會成為document對象（即該HTML頁面對應的DOM）。document對象使我們可以通過JavaScript對HTML頁面中的所有元素進行訪問。（1）Document對象document對象是window對象的一部分，可通過window.document屬性對其進行訪問。（2）Document對象集合DOM基礎（3）Document對象屬性（4）Document對象方法4、Document對象目

錄DOM基礎獲取元素節(jié)點操作元素利用層級關系獲取元素節(jié)點節(jié)點操作獲取元素節(jié)點二、獲取html元素三、獲取其他元素getElementById（‘id名’）：返回的是指定id名的元素getElementsByTagName（’標記名’）：返回的是指定標記名的所有元素的集合，以偽數(shù)組的形式存儲的getElementsByName（’name名’）：返回的是指定name名的所有元素的集合getElementsByClassName（’類名’）：返回的是指定class名的所有元素的集合querySelector（’選擇器’）：返回的是指定選擇器的第一個元素querySelectorAll（’選擇器’）：返回的是指定選擇器的所有元素的集合一、獲取body元素document.bodydocument.documentElement目

錄DOM基礎獲取元素節(jié)點操作元素利用層級關系獲取元素節(jié)點節(jié)點操作操作元素一、改變元素內容

利用DOM找到元素，我們可以獲取元素的內容并且修改它們。1、innerText、innerHTML2、outerText、outerHTML3、textContent

innerHTML屬性可以設置或獲取標簽所包含的HTML和文本信息(不包括自身標簽)

innerText屬性可以設置或獲取標簽所包含的文本信息(不包括內部標簽和自身標簽)。outerHTML屬性可以設置或獲取標簽自身及其所包含的HTML和文本信息（包括自身標簽）

outerText屬性在獲取時和innerText是相同的效果，但是設置時包含標簽自身在內的文本。textContent會獲取style=“display:none”中的文本，而innerText不會；

textContent會按照html代碼里的格式輸出，innerText會根據(jù)標簽里面的元素獨立一行；

innerText對IE的兼容性較好，textContent雖然作為標準方法但是只支持IE8+以上的瀏覽器，最新的瀏覽器兩個都可以使用操作元素二、操作元素屬性除了獲取元素內容，獲取和設置元素的屬性值也是經(jīng)常進行的操作。一般來說，瀏覽器在解析HTML頁面時元素具有的屬性列表是與收集自元素本身表示的信息一起預載入的，并存儲在一個關聯(lián)數(shù)組中供稍后訪問。1、通過attributes操作元素屬性（1）元素的attributes屬性保存了該元素的所有html屬性值。（2）getAttribute()方法可以獲取元素的某個屬性。（3）setAttribute()方法可以設置元素的某個屬性。（3）removeAttribute()方法可以刪除元素的某個屬性。2、通過其它方式操作元素屬性我們也可以直接通過‘.’或者[]的方式來獲取元素的屬性（1）常用元素屬性，如src、title、id等屬性。（2）表單元素屬性，如type、value、checked、selected、disabled等屬性。（3）使用[]操作屬性變量。

操作元素3、樣式屬性我們可以通過JavaScript修改元素的大小、顏色、位置等樣式（1）element.style行內樣式操作，可以操作元素style屬性。

例如：this.style.color=‘red’（2）element.className類名樣式操作，可以操作元素的類

例如：this.className=‘stu’如果修改樣式較多，可以采取操作類名方式更改元素樣式因為class是一個保留字，因此使用className來操作元素類名屬性className會直接更改元素的類名，并覆蓋原有的類名。目

錄DOM基礎獲取元素節(jié)點操作元素利用層級關系獲取元素節(jié)點節(jié)點操作利用層級關系獲取元素節(jié)點一、父子關系1、父節(jié)點

node.parentNode2、子節(jié)點（1）childNodes（標準）

獲取的子節(jié)點中包含換行文本節(jié)點，一般不提倡使用（2）children(非標準)獲取的子節(jié)點中不包含換行文本節(jié)點（3）第一個子元素

firstChild、firstElementChild(IE9)、children[0]（4）最后一個元素

lastChild、lastElementChild(IE9)、children[length-1]二、兄弟關系1、下一個兄弟node.nextSiblingnextElementSilbling(IE9)2、上一個兄弟node.previousSiblingpreviousElementSilbling(IE9)目

錄DOM基礎獲取元素節(jié)點操作元素利用層級關系獲取元素節(jié)點節(jié)點操作節(jié)點操作一、創(chuàng)建節(jié)點1、創(chuàng)建元素節(jié)點：document.createElement(‘tagName’)2、創(chuàng)建文本節(jié)點：document.creatTextNode(‘’)二、添加節(jié)點1、添加到末尾：node.appendChild(child)2、指定位置插入：node.insertBefore(child,指定元素)三、刪除節(jié)點node.removeChild(child)四、復制節(jié)點（克隆節(jié)點）node.cloneNode（）返回調用該方法的節(jié)點的第一個副本參數(shù)為false只復制節(jié)點本身不復制里面的子節(jié)點參數(shù)為true會復制節(jié)點本身以及里面所有的子節(jié)點。節(jié)點操作五、文檔碎片1、定義

當我們用DOM向頁面插入元素的時候，每插入一個元素，