一、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>
漫无目的的生活就像出海航行而没有指南针
