JavaScript文檔對象模型DOM

1. 何為DOM

一個網頁實際上就是一個html文檔被浏覽器解析後顯示的樣子。

所謂的DOM，即為document object model，翻譯為中文：文檔對象模型。就是把浏覽器加載的html文檔當作對象這樣一個模型。

document對象，就代表着html起止标簽間的全部内容，浏覽器自動将html文檔封裝到document對象裡面，對于JavaScript語言來說，可以通過document對象通路html文檔中的内容。

2. 示例

舉個例子如下，document文檔對象有個方法，getElementById()，就是通過id擷取文檔中的元素。

document.getElementById("xxx");

1

擷取元素的方法可以如下:

//擷取id=xxx的元素

var x=document.getElementById("xxx");

//擷取x元素中的div元素

var y=x.getElementsByTagName("div");

//擷取class=class1的元素

var x=document.getElementsByClassName("class1");

2

3

4

5

6

擷取到元素後，可以修改元素：

//修改元素html内容

document.getElementById("xxid").innerHTML="haha";

//修改屬性

document.getElementById("images1").src="logo1.jpg";

//修改樣式

document.getElementById("div1").style.visibility="hidden";

還可以修改元素的事件

//添加事件

var element=document.getElementById("xxx");

element.addEventListener("click", hello,true);//true表示不冒泡傳遞事件

function hello() {

   alert ("Hello World!");

}

//删除事件

element.removeEventListener("click", hello);

7

8

3. 總結

總結以下，浏覽器将文檔對象封裝為document，然後将對文檔元素的操作封裝為document的方法，肯定也将一些文檔元素直接封裝為document的屬性，例如:

//表單驗證

function validateForm() {

//document.forms表示html文檔的表單

   var x = document.forms["form1"]["inputName"].value;

   if (x == null || x == "") {

       alert("需要輸入姓名。");

       return false;

   }