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");
1
2
3
4
5
6
获取到元素后，可以修改元素：
//修改元素html内容
document.getElementById("xxid").innerHTML="haha";
//修改属性
document.getElementById("images1").src="logo1.jpg";
//修改样式
document.getElementById("div1").style.visibility="hidden";
1
2
3
4
5
6
还可以修改元素的事件
//添加事件
var element=document.getElementById("xxx");
element.addEventListener("click", hello,true);//true表示不冒泡传递事件
function hello() {
alert ("Hello World!");
}
//删除事件
element.removeEventListener("click", hello);
1
2
3
4
5
6
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;
}
}
