一、DOM模型
1.简介
DOM模型:文档对象模型,Document Object Model。
DOM何时创建:当网页被加载的时候,浏览器就会创建页面的文档对象模型。
2.作用
通过DOM模型,用户可以修改HTML元素属性和样式,增减HTML元素,响应HTML元素的事件。
二、常用JS DOM功能
1.输出流:document.write(),动态创建页面输出内容。
2.改变标签内容:document.getElementById("id").innerHTML="";
3.改变属性:document.getElementById("id").src|href|title|..|="";
4.改变CSS样式:document.getElementById("id").style.width|height|color|backgoundColor="";
5.常见事件
1)点击事件:onclick()
2)页面加载事件:onload()和onunload()
3)内容改变事件:change()
4)聚焦事件:onfocus()
5)鼠标事件:onmouseover()、onmouseout()、onmousedown()、onmouseup()
6)其它事件:......
其实这种事件有很多,可以参考w3c提供的js dom事件表,上面只是常用的一部分事件。
三、修改属性和样式示例
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="div1">这个是div1</div>
<img src="./header.jpg"/>
<img src="./header.jpg"/>
</body>
<script>
//修改属性
var ele_img = document.getElementsByTagName("img");//返回的是一个元素集合
var x =0;
for(;x < ele_img.length;x++){ //xx.length,返回数组的长度
ele_img[x].src="./header1.jpg";
}
//修改CSS样式
var ele_div1 = document.getElementById("div1");//id是唯一的,范湖的是具体的元素
ele_div1.innerHTML="这个是替换div1的内容";
//css样式名:遵循驼峰命名法
ele_div1.style.color="#ffffff";
ele_div1.style.width="300px";
ele_div1.style.height="300px";
ele_div1.style.backgroundColor="#ff0000";
ele_div1.style.fontSize="24px";
ele_div1.align="center";
ele_div1.style.marginTop="30px";
ele_div1.style.paddingTop="100px";
ele_div1.style.visibility="visible";//visible|hidden
</script>
</html>