JavaScript DOM编程学习笔记

浏览数：28 / 时间：2015年06月08日

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
	//整个HTML文档加载完成之后出发window.onload事件，事件出发后执行function函数体
	window.onload = function() {
		var btn = document.getElementsByTagName("button")[0];
		btn.onclick = function() {
			alert("Hello world!!!");
		}
	}
</script>
</head>
<body>
	<button>click me</button>
	
	<!-- HTML代码与JS代码耦合在一起 -->
	<button onclick="alert(‘Hello world‘)">click</button>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>

</head>
<body>
	<button>click me</button>
	
	<!-- HTML代码与JS代码耦合在一起 -->
	<button onclick="alert(‘Hello world‘)">click</button>
	
</body>
</html>

<script type="text/javascript">
	//整个HTML文档加载完成之后才执行，此时才可以渠道btns
		var btns = document.getElementsByTagName("button");
		btns[0].onclick = function() {
			alert("Hello world!!!");
	}
</script>

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
	alert("1");
	//window.onload事件在HTML文档被完全加载后执行
	//在其中可以获取到HTML文档的任何元素
	window.onload = function(){
		alert("3");
	}
</script>
</head>
<body>
	<button>click me</button>
	
	<!-- HTML代码与JS代码耦合在一起 -->
	<button onclick="alert(‘Hello world‘)">click</button>
</body>
</html>

<script type="text/javascript">
	alert("2");
</script>

本文出自 “阿凡达” 博客，请务必保留此出处http://shamrock.blog.51cto.com/2079212/1564431

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

JavaScript DOM编程学习笔记