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>