JavaScript基础(24)—DOM技术概述

最新推荐文章于 2024-10-07 17:02:56 发布

msirene

最新推荐文章于 2024-10-07 17:02:56 发布

阅读量114

点赞数

分类专栏： Javasprict

本文链接：https://blog.csdn.net/msirene/article/details/24177699

版权

Javasprict 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>javascript035.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<script type="text/javascript">
	function hide(){
		//实现对div框的隐藏
		//通过DOM技术，找到这个div节点对象
		var divNode = document.getElementById("div_id");
		//操作这个div，可以操作div的样式(CSS)
		divNode.style.display="none";
	}
	
	function view(){
		var divNode = document.getElementById("div_id");
		divNode.style.display="";
	}
	</script>
  </head>
  
  <body>
    <!--
	    DOM : Document Object Model
	    将HTML标记型文档，封装成对象，提供更多的属性和行为
	    
	    DOM的三级模型
	    第一级：将标记型文档，封装成对象，提供更多的属性和行为
	    第二级：对原有的模型，进行了升级
	    第三级：XML文档封装成对象
	    
	    DHTML：动态HTML dynamic 四个技术的组合体
	    
	    HTML：将网页中的内容，封装到标签中
	    CSS：层叠样式表，提供更加丰富的页面显示效果
	    JavaScript:负责程序设计，JS对象，函数，循环，判断，变量
	    DOM:把标记封装成对象，提供更多的方法和属性
	    
	    DOM树：学好DOM技术，必须要掌握节点对象，他们之间的关系
	  -->
	  
	  
	 <div id="div_id" style="background-color:#3F0">这个网页是我做的</div>
	 <input type="button" value="隐藏"  οnclick="hide()"/><br />
	 <input type="button" value="显示"  οnclick="view()"/>
  </body>
</html>