一，操作html
1.改变html的元素
2.改变html的属性
3.改变所有的html的CSS样式
4.对页面的所有事件作出反应
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p id="hello">Hello World!!!!</p> <p id="hey">hahhahahahah</p> <input type="button" onclick="domdemo()" value="点击"/> <button onclick="domdemo2()">变标签</button> <script> function domdemo(){ document.getElementById("hello").innerHTML="卧槽！！"; //通过id的方法改变html元素的内容 } function domdemo1(){ //改变了html元素的样式的属性 document.getElementById("peace").style.color="green"; } function domdemo2(){ document.getElementsByTagName("h1").innerHTML="What up??man"; //通过获取标签的名字来改变， //如果有两个一样的标签的话，那么他只能改变第一个标签 } function domdemo3(){ document.getElementById("img").src="img/3.jpg"; } </script> <h1 id="peace" style="color: red;">世界和平！！！</h1> <button onclick="domdemo1()" >变身</button> <br /><br /> <img src="img/img3.jpg" id="img"/> <br /> <button onclick="domdemo3()">变大</button> <button id="dianji" >点击事件</button> <script> //通过id给按钮注册事件 //这里需要注意的是addEvenListener的参数， 第一个是事件的类型，第二个函数的名称 //这里的函数名称不需要括号 document.getElementById("dianji").addEventListener("click",demo); function demo(){ alert("伙计~ 你点击了我呢~"); } </script> </body> </html>
原文：http://www.cnblogs.com/zhengweizhao/p/6533191.html