(1)JavaScript DOM在什么位置编写代码

DOM： Document Object Model（文本对象模型）

D：文档 - html文档或 xml文档
O：对象 - document对象的属性和方法
M：模型
DOM 是针对xml（html）的基于数的API
DOM 树：节点（node）的层次
DOM 把一个文档表示为一棵家谱树（父，子，兄弟）
DOM 定义了Node的接口以及许多种节点类型来表示XML节点的多个方面

节点及其类型
节点（node）：来源于网络理论，代表网络中的一个连接点。网络是由节点构成的集合
1）.元素节点
2）.属性节点：元素的属性，可以直接通过属性的方式来操作；
3）.文本节点：是元素节点的子几点，其内容为文本。

创建web工程的步骤在eclipse中
new -》 file -》选择 Dynamic Web Project
在WebContent底下创建一个包围javascript 底下创建一个helloworld.html 的文件
运行过程 右键点击 open with -》Web Browser
如果是切换成Html编辑 open with -》HTML Editor

各种位置编写代码的比较
@@@1 —
弊端:
HTML代码和 JS代码相耦合

</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<!--  HTML代码 和  JS代码相耦合  -->
	<button onclick="alert('helloworld...');">ClickMe</button>

</body>
</html>

@@@2 —
正确写法:
内容还没有完全被加载没有获取到

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
	var btns = document.getElementsByTagName("button");
	alert(btns.length)
	//2.为button 添加 onclick 响应函数
	btns[0].onclick = function()
	{
		alert("helloworld !!");
	}
</script>

</head>
<body>

	<button>ClickMe</button>

</body>
</html>

@@@3 —
正确写法:
在整个 HTML 文档被加载后，获取其中的节点。在script结点放在html的最后
但是不符合JS代码的习惯

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
</script>
</head>
<body>

	<button>ClickMe</button>

</body>
</html>
<!--  
在整个 HTML 文档被加载后 ， 获取其中的节点 。 在script结点放在html的最后 
但是不符合JS代码的习惯
-->
<script type = "text/javascript">
	//1.获取button
	var btns = document.getElementsByTagName("button");
	alert(btns.length)
	//2.为button 添加 onclick 响应函数
	btns[0].onclick = function()
	{
		alert("helloworld !!");
	}

</script>

@@@4 —
正确写法:
window.onload 事件在整个 HTML 文档被完全加载后出发执行。
所以在其中可以获取到HTML文档的任何元素

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type = "text/javascript">

	alert("1");
	//window.onload 事件在整个 HTML 文档被完全加载后出发执行。
	//所以在其中可以获取到HTML文档的任何元素
	window.onload = function()
	{
		alert("3");
	}
	
</script>
</head>
<body>

	<button>ClickMe</button>

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

(1)JavaScript DOM在什么位置编写代码

猜你喜欢