当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树。
1.查找 HTML 元素
（1）通过 id 查找 HTML 元素
document.getElementById(“id”);
（2）通过标签名查找 HTML 元素
document.getElementsByTagName(“p”); 注意这里是Elements，跟id不同
（3）通过类名查找 HTML 元素
document.getElementByClassName(“class”);
注意：通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。
<div class="c" id="id1">
<p>这是第一段内容</p>
<p>这是第二段内容</p>
</div>
<script type="text/javascript">
//通过ID查找元素
var x = document.getElementById("id1");
x.style.color = "blue";
//通过class查找元素，注意得到的是一个数组，即使只找到一个元素也是数组
var y = document.getElementsByClassName("c");
var z = y[0].getElementsByTagName("p"); //通过标签名查找元素，得到的也是个数组
z[0].style.color = "red";
</script>
2.改变 HTML 输出流
使用 document.write() 直接向 HTML 输出流写内容
3.改变 HTML 内容
最简单的办法使用 innerHTML 属性。
<div class="c" id="id1">
<p>这是第一段内容</p>
<p>这是第二段内容</p>
</div>
<script type="text/javascript">
var x = document.getElementById("id1");
x.innerHTML = "<p>更换新内容</p>";
</script>
4.改变 HTML 属性
如需改变 HTML 元素的属性，请使用这个语法：
document.getElementById(id).attribute=new value
<img id="image" src="abc.jpg">
<script type="text/javascript">
var x = document.getElementById("image");
x.src = "123.jpg";
</script>
5.改变 HTML 样式
如需改变 HTML 元素的样式，请使用这个语法：
document.getElementById(id).style.property=new style
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
相关的style属性可以参考 http://www.w3school.com.cn/jsref/dom_obj_style.asp
6.HTML 事件属性
<button onclick="displayDate()">点击这里</button>
<script>
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
7.使用 HTML DOM 来分配事件
<button id="myBtn">点击这里</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
8.onload 和 onunload事件
<body onload="test()">
<script>
function test(){
alert("测试");
}
</script>
</body>
onunload貌似不起作用，可能跟浏览器兼容问题有关
9.onchange 事件
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
请输入英文字符：<input type="text" id="fname" onchange="myFunction()">
<p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p>
</body>
</html>
10.onmouseover 和 onmouseout 事件
<!DOCTYPE html>
<html>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>
<script>
function mOver(obj)
{
obj.innerHTML="谢谢"
}
function mOut(obj)
{
obj.innerHTML="把鼠标移到上面"
}
</script>
</body>
</html>
11.onmousedown、onmouseup 以及 onclick 事件
<!DOCTYPE html>
<html>
<body>
<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>
<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="请释放鼠标按钮"
}
function mUp(obj)
{
obj.style.backgroundColor="green";
obj.innerHTML="请按下鼠标按钮"
}
</script>
</body>
</html>
12.onfocus
13.onmouseover 和 onmouseout
<h1 onmouseover="style.color='red'" onmouseout="style.color='blue'"> 请把鼠标移到这段文本上 </h1>
