博客列表 >【HTML文档(Dom)对象模型】-JavaScript

【HTML文档(Dom)对象模型】-JavaScript

迷途何必知返
迷途何必知返原创
2018年11月06日 20:06:14720浏览
<!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>


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议