1_javascript_DOM编程_编程简介

Posted on In Views:

本节讲述如何进行了解节点及其类型，以及了解应该在什么位置写javascript代码

1、初步了解：

1_javascript_DOM编程_编程简介_img1

1_javascript_DOM编程_编程简介_img1

Javascript：

1_javascript_DOM编程_编程简介_img1

1_javascript_DOM编程_编程简介_img1

新建一个helloworld.jsp:（javascript写在哪里？原则上写在哪里都可以，但是通常会写在head之中）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>helloworld</title>
<script type="text/javascript">
	/* 这里写代码 */
	//当整个文档加载完之后会触发window.onload的方法
	//事件触发之后就会执行方法体内的内容
	window.onload = function(){
		//获取所有的button元素并取得第一个元素
		var btn = document.getElementsByTagName("button")[0];
		//为button的onclick赋值，当点击按钮时，执行方法体
		btn.onclick = function(){
			//弹出helloworld的对话框。
			alert("helloworld");
		}
	}
</script>
</head>
<body>
	<button>click me</button><!-- 在这里对这个按钮进行操作的执行 -->
</body>
</html>

然后运行：如下：

1_javascript_DOM编程_编程简介_img5

当然也可以简化代码如下helloworld2.jsp：

1
2
3
4
5
6
7
8
9
10
11
12
13
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>helloworld2</title>
</head>
<body>
	<!-- html代码和js代码耦合在一起， -->
	<button onclick="alert('helloworld')";>click me</button>
</body>
</html>

这种方法可以使得代码简洁但是如果一个页面中有多个代码就建议用第一种

还可以用如下helloworld3.jsp：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>helloworld3</title>
</head>
<body>
	<button>click me</button>
</body>
</html>
<script type="text/javascript">
	//1、获取所有按钮
	var btns = document.getElementsByTagName("button");
	alert(btns.length);
	//2、给与按钮行为
	btns[0].onclick = function(){
		alert("helloworld");
	}
</script>

这第三种方法中由于我们想直接加载全html中的元素，而且代码是顺序加载的，所以javascript代码必须放在最后。

关于代码的执行顺序我们可以测试如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>代码执行顺序</title>
<script type="text/javascript">
	//第一个执行
	alert("1");
	//第三个执行，表示html文档完全执行之后才执行的事件
	//故也可以获得当前文档的全部元素
	window.onload = function(){
		alert("3");
	}
</script>
</head>
<body>
	<button>click me</button>
</body>
</html>
<script type="text/javascript">
	//第二个执行
	alert("2");
</script>

所以我们通常要加载全html文件的节点我们可以在javascript中添加window.onload = function(){}的代码