当网页被加载时,浏览器会创建页面的文档对象模型(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>