JavaScript文档对象模型DOM

1. 何为DOM

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

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

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

2. 示例

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

document.getElementById("xxx");

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

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

获取到元素后,可以修改元素:

//修改元素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);

3. 总结

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

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

如有问题请扫码联系我
在这里插入图片描述

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页