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;

   }