<!DOCTYPE html> <html> <head> <title>HTML文档(Dom)对象模型</title> </head> <body> <!-- 当王爷被加载时,浏览器会自动创建页面的文档对象类型 --> <!-- 可以改变html元素的内容(操作html的元素内容) --> <!-- 改变html --> <!-- 改变html的输出流 --> <!-- 查找html元素: 1.通过ID来查找:document.getElementById('id名') 2.通过class来查找:document.getElementByClassName('class名') 3.通过标签名(tga name)来查找 document.getElementByTagName('标签名') --> <!-- 改变html的内容 使用innerHTML="我是添加的内容" --> <div id="box" style="backgroung:#ccc; width:100px; height:100px;" onclick="box_1(this)"></div> <img src="图片路径1" id="pic" onclick="box_2(this)"> <script type="text/javascript"> function box_1(x){ document.getElementById('box').innerHTML="我是添加的内容" } // 改变html的属性 // document.getElementById('id').属性名="属性值" function box_2(x){ document.getElementById('pic').src="图片路径2" } </script> </body> </html>