JS那些事儿(5)-DOM

1
一个网页实际上就是一个html文档被浏览器解析后显示的样子。

2
所谓的DOM，即为document object model，翻译为中文：文档对象模型。就是把浏览器加载的html文档当作对象这样一个模型。

3
document对象，就代表着html起止标签间的全部内容，浏览器自动将html文档封装到document对象里面，对于JavaScript语言来说，可以通过document对象访问html文档中的内容。

4
举个例子如下，document文档对象有个方法，getElementById()，就是通过id获取文档中的元素。

document.getElementById("xxx");

5
获取元素的方法可以如下:

//获取id=xxx的元素
var x=document.getElementById("xxx");
//获取x元素中的div元素
var y=x.getElementsByTagName("div");
//获取class=class1的元素
var x=document.getElementsByClassName("class1");

6
获取到元素后，可以修改元素：

//修改元素html内容
document.getElementById("xxid").innerHTML="haha";
//修改属性
document.getElementById("images1").src="logo1.jpg";
//修改样式
document.getElementById("div1").style.visibility="hidden";

7
还可以修改元素的事件

//添加事件
var element=document.getElementById("xxx");
element.addEventListener("click", hello,true);//true表示不冒泡传递事件
function hello() {
    alert ("Hello World!");
}
//删除事件
element.removeEventListener("click", hello);

8
总结以下，浏览器将文档对象封装为document，然后将对文档元素的操作封装为document的方法，肯定也将一些文档元素直接封装为document的属性，例如:

//表单验证
function validateForm() {
    //document.forms表示html文档的表单
    var x = document.forms["form1"]["inputName"].value;
    if (x == null || x == "") {
        alert("需要输入姓名。");
        return false;
    }
}