JS(四)DOM模型之属性样式
一、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>