文件物件模型DOM通俗講解_基礎知識

在開始之前先說一點，DOM是非常容易理解的，但是大家說的太官方，讓人很是難於理解，我們就用非常簡單的語言翻譯一遍。加深對DOM的理解，從而對它有一個全面的認識。

什麼是DOM

DOM的全名是Document Object Model，即文件物件模型，它允許腳本控制Web頁面、視窗和文件。

如果沒有DOM，JavaScript將是另外一種腳本語言；而有了DOM，它將成為製作動態頁面的強大工具。 DOM不是JavaScript語言的一部分，而是內建在瀏覽器中的一個應用程式介面。當然，我們可以簡單的理解為一種用於HTML和XML文件的程式介面。它給了文件一種結構化的表示方法，可以改變文件的內容和呈現方式。

DOM（文件物件模型）是一組用來描述腳本如何與結構化文件互動和存取的web標準。他的功能是把瀏覽器支援的文件（包括HTML XML XHTML）當作物件來解析。 DOM實際上是一個操作文檔裡面所包含的內容的一個編程的API，允許開發人員從文檔中讀取、搜尋、修改、增加和刪除資料。 DOM是與平台和語言無關的，也就是說只要是支援DOM的平台和程式語言，你都可以用來寫文件。

DOM定義了一系列物件、方法和屬性，用於存取、操作和建立文件中的內容、結構、樣式以及行為。每一個網頁元素（一個HTML標籤）都對應著一個物件（object，所謂“物件”，用白話說就是“東西”。）。網頁上的標籤是一層層嵌套的，最外面的一層是，文檔物件模型也這樣一層層嵌套著，但是通常被理解成一棵樹的形狀。樹根是window或document對象，相當於最外層的標籤的外圍，也就是整個文件。樹根之下（這棵樹的圖通常是倒著畫，就好像遺傳譜係或家譜那樣。樹根就是唯一的共同祖先）是子一級的對象，子對像也有它自己的子對象，除了根對像以外，所有的對像都有自己的父對象，而同一對象的子對象之間就是兄弟的關係。如果大家沒看過家譜，應該要知道一個公司的組織架構。
 
DOM實際上是以物件導向方式描述的文件模型。 DOM定義了表示和修改文件所需的物件、這些物件的行為和屬性以及這些物件之間的關係。可以把DOM認為是頁面上資料和結構的一個樹形表示，不過頁面當然可能不是以這種樹的方式具體實現。透過JavaScript，可以重構整個 HTML 文件。可以新增、移除、變更或重排頁面上的項目。

要改變頁面的某個東西，JavaScript 就需要取得對 HTML 文件中所有元素進行存取的入口。這個入口連同對 HTML 元素進行新增、移動、改變或移除的方法和屬性，都是透過文件物件模型來獲得的（DOM）。

DOM和JavaScript

我們用JavaScript對網頁進行的所有操作都是透過DOM進行的。如何存取DOM中的物件？

先是父物件名，後面接著是子物件名，使用圓點隔開。

複製程式碼 程式碼如下:

window.document.write("hi!how are you!")

DOM操作Checkbox實例

複製程式碼

複製程式碼複製程式碼複製程式碼複製程式碼 程式碼如下:

//當html頁面載入完成後;執行以下函數
window.onload = function() {
document.getElementById("btn" ).onclick = function() {
var input = document.getElementsByTagName("輸入");
for ( var i = 0; i if (inputs[i ].type = "checkbox") {
if (inputs[i].value % 2 != 0) {
inputs[i].checked = true;
}
}
}
}
}
;
頭>











選取奇數
身體>

單機按鈕顯示效果：