一、DOM:DocumentObject Model(文本对象模型)
DOM把一个文档表示成一棵家谱树,定义了Node接口和多种节点类型 来表示XML节点的多个方面。
二、节点(Node)
定义:来源于网络理论,代表网络中的一个连接点。网络是节点构成的集合。
分类:元素节点
属性节点:元素节点的属性,可以直接通过属性的方式操作。
文本节点:属性节点的子节点,其内容为文本。
三、在html文档什么位置编写js代码?
1.直接在html页面中写代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- HTML代码和JS代码耦合在一起。 -->>
<button οnclick="alert('helloworld...');">ClickMe</button>
</body>
</html>
缺点:js和html强耦合,不利于代码维护;若click相应函数是比较复杂的,则需要先定义一个函数,然后再在onclick属性中完成对函数的引用,比较麻烦。
2.一般不能在body节点之前直接获取body内的节点,因为此时html文档还未加载完成。
3.可在整个html文档的最后写代码,但是不符合习惯。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</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].οnclick=function(){
alert("helloworld!!");
}
</script>
4.一般在body节点之前编写js代码,但需要利用window.onload事件。该事件在当前文档完全加载之后被触发,所以其中的代码可以获取到当前文档的任何节点。此方法最合适。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
alert("1");
//window.onload事件在整个HTML文档被完全加载后触发执行
//所以在其中可以获取到HTML文档的任何元素。
window.οnlοad=function(){
alert("3");
}
</script>
</head>
<body>
<button>ClickMe</button>
</body>
</html>
<script type="text/javascript">
alert("2");
</script>
四、如何获取元素节点
1.document.getElementById:
根据id属性获取对应的单个节点
2.document.getElementsByTagName:
根据标签名获取指定节点名字的数组,数组对象length属性可以获取数组的长度。
3.document.getElementsByName:
根据节点的name属性获取符合条件的节点数组,但IE的实现方式和W3C标准有差别;在html文档中若某节点没有name属性,则IE使用getElementsByName不能获取到节点数组,但火狐和googlechrome可以 。