JavaScript-DOM和事件-优快云博客

本文链接：https://blog.youkuaiyun.com/TxyITxs/article/details/104963362

本文探讨了如何使用JavaScript进行网页交互，包括图片切换、按钮事件处理及浏览器对象模型(BOM)的应用。通过实例展示了如何改变图片源、修改标题及响应用户输入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
  <head>
    <title>js6.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 fun()
		{
			 var light=document.getElementById("light");  			
  		     light.src="../Img/img.jpg";
		}
	</script>
  </head>
  
  <body>
  	<img id="light" src="../Img/image.jpg" onclick="fun();">
  	<h1 id ="title"> 中国地质大学 </h1>
  	
    <script type="text/javascript">
  		//DOM :控制html文档的内容
  		//代码：获取页面的元素对象Element
  		//document.getElementById()
  		var light=document.getElementById("light");
  		
  		alert("切换背景");
  			
  		light.src="../Img/img.jpg";
  		
  		var title=document.getElementById("title");
  		
  		alert("切换标题");
  		title.innerHTML ="中国";
  		
  		
  		
  		//事件，触发事件onclick
  		
  	</script>
  	
    This is my HTML page. <br>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>js7.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">-->

  </head>
  
  <body>
  		<img id= "light" src="../Img/image.jpg" onclick="">
  		
	<script>
		//实现点击图片，然后响应事件切换图片
		var light=document.getElementById("light");
		var f= false;
		light.onclick= function()
		{
			if(f)
			{
				light.src="../Img/image.jpg" ;
				f=false;
			}
			else
			{
				light.src="../Img/img.jpg" ;
				f=true;
			}
		}
		
	</script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>js8.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">-->

  </head>
  
  <body>
  	<input type="button" id="back" value="后退">
  	<script type="text/javascript">
  		//BOM:浏览器对象模型
  		//windows窗口对象
  		//DOM 对象:document对象
  		
  		//组成：windows窗口对象、Navigator浏览器对象、Screen显示器屏幕对象，History历史记录对象、Location地址栏对象
  		
  		//windows窗口对象
  		/*
  			创建
  			方法
  				alert():提示信息
  				confirm():显示消息，有确认与取消按钮，返回true和false
  				prompt():  显示可提示用户输入的对话框
  			属性
  			特点：windows对象可以不创建，方法可以直接使用 
  		*/
  		window.alert("Hello world!");
  		
  		//confirm
  		var b=confirm("需要退出吗？");
  		if(b)
  		{
  			alert("点击了确认");
  		}else
  		{
  			alert("点击了取消");
  		}
  		
  		//prompt()，返回用户输入的值
  		var value=prompt("输入用户名");
  		
  		var btn2=document.getElementById("back");
		btn2.onclick=function()
		{
			history.back();
		}
  		
  	</script>
	
  </body>
</html>