javascript基础（DOM对象概述,事件，文档加载）（二十五）

最新推荐文章于 2024-09-17 13:42:29 发布

咸鸭蛋炒饭

最新推荐文章于 2024-09-17 13:42:29 发布

阅读量238

点赞数

分类专栏： HTML5基础篇文章标签： javascript html dom 函数经验

本文链接：https://blog.csdn.net/u010853130/article/details/54928220

版权

HTML5基础篇专栏收录该内容

121 篇文章 7 订阅

订阅专栏

1.DOM对象概述：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<button id="btn">我是一个按钮</button>
		
		<script type="text/javascript">
			
			/*
			 * 浏览器已经为我们提供了document对象，
			 * 	它代表整个的网页，它是window对象的属性，可以在页面中直接使用
			 */
			//console.log(document);
			
			//获取id为btn的按钮对象
			var btn = document.getElementById("btn");
			
			//修改按钮中的文字
			//innerHTML 可以获取标签内部的文本内容
			btn.innerHTML = "I'm Button";
			
			
			
			
		</script>
	</body>
</html>

2.事件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			可以为元素的指定的事件属性设置JS代码来处理事件
			我们通过HTML属性的形式来处理事件，属于结构和行为耦合，不方便维护，不推荐使用
		-->
		<!--<button id="btn" οnmοusemοve="alert('讨厌，点我干嘛~~');">点我一下</button>-->
		<button id="btn">点我一下</button>
		
		<script type="text/javascript">
			
			/*
			 * 事件（Event）
			 * 	- 事件指用户和浏览器之间的交互行为，
			 * 		比如：点击按钮，鼠标移动，关闭窗口。。。
			 * 	- 我们可以为事件来绑定处理函数，来对事件进行处理
			 * 		当事件触发时，相应的函数会被调用
			 */
			
			//获取按钮对象
			var btn = document.getElementById("btn");
			
			/*
			 * 可以为元素的指定的事件属性绑定回调函数的形式来响应事件,
			 * 	该函数会在指定事件触发时才执行
			 */
			
			//为btn绑定一个单击响应函数
			btn.onclick = function(){
				alert("hello");
			};
			
		</script>
	</body>
</html>

3.文档加载：

方式一：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			//获取id为btn的按钮
			var btn = document.getElementById("btn");
			
			//为btn绑定一个单击响应函数
			/*btn.onclick = function(){
				console.log("hello");
			};*/
			
			//console.log(btn);
			
			/*
			 * 浏览器在加载页面时，是按照自上向下的顺序进行加载的，
			 * 	当它加载到JS代码时，会将JS代码立即执行，
			 * 	如果将JS代码编写到网页的上边，会导致JS执行时页面还没有完全加载
			 * 	将会导致无法正常获取到DOM对象
			 */
			//alert("hello");
			
		</script>
	</head>
	<body>
		<button id="btn">点我一下</button>
		
		<script type="text/javascript">
			/*
			 * 将js代码编写到body的下边，可以确保代码在页面加载完毕才执行，
			 * 	这样可以保证正常获取到DOM对象
			 */
			
			//alert("hello");
			
		</script>
		
	</body>
</html>

方式二：（推荐）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * window的onload事件会在页面加载完毕之后触发，
			 * 	它所对应的回调函数，会在页面加载完毕之后执行
			 * 
			 * 以后写js代码时，上来就把window.onload = function(){}写上
			 */
			window.onload = function(){
				//我们希望代码可以在页面加载完毕以后再执行
				//alert("hello");
				
				//获取id为btn对象
				var btn = document.getElementById("btn");
				
				btn.onclick = function(){
					console.log("hello");
				};
				
			};
			
		</script>
	</head>
	<body>
		<button id="btn">点我一下</button>
	</body>
</html>