javascript DOM(一)

mousepc

浏览: 246529 次
性别:
来自: 深圳

最近访客更多访客>>

sy1152

杯勺水

一剪梅

ailongni

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

DOM:Document Object Model(文本对象模型)

D: 文档---html文档或xml文档

O:对象---document对象的属性和方法

M:模型

DOM是针对xml(html)的基于树的API

DOM树:节点(node)的层次。

DOM把一个文档表示为一棵家谱树(父、子、兄弟)

DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面。

1. 节点及其类型：

1). 元素节点

2). 属性节点

3). 文本节点

节点及其类型

节点(node):来源于网络理论，代表网络中的一个连接点。网络是由节点构成的集合。

<p title="a gentle reminder">Don't forget to buy this stuff.</p>

p是一个element node.元素节点。

title="a gentle reminder"是一个attribute node.属性节点

Don't forget to buy this stuff.是一个text node.文本节点

其中Don't forget to buy this stuff.是节点p的一个子节点。

2. 在html文档的什么位置编写js代码?

0). 直接在html页面中书写代码。

缺点： js和Html耦合性太强，不利于维护。

1). 一般地，不能在body节点之前来直接获取body内的节点，因为此时html文档树还没有加载完成，获取不到指定的节点；除非它在某一个方法内部；这样的话，只有在调用方法的时候，才会去获取节点，这个时候一般文档树加载已经完成。

2). 可以在整个html文档的最后缩写类似代码，但是这不符合习惯。

3). 一般地，在body节点之前编写js代码，但是需要利用window.onload事件。该事件在当前文档完全加载之后被触发，所以其中的代码可以获取到文档的任何节点。

window.onload=function(){

var cityNode=document.getElementById("city");

alert(cityNode);

}

</script>

4). 关于为onclick等属性赋值的问题：

在<script type="text/javascript"></script>内部给一个节点添加事件的方法。不需要()。例如：

var button=document.getElementById("button");

button.onclick=alert("Hello, World");

</script>

这里就为button添加了一个点击事件。但是页面载入的时候会有一个alert窗口Hello,World，你再去点击button的时候不会有任何作用，这个原因是因为 button.onclick执行的是alert("Hello,World");的执行结果，但是alert并没有任何执行结果。

下一个例子：

function helloworld(){

alert("Hello,World");

}

var button=document.getElementById("button");

button.onclick=helloworld;//这里会执行helloworld()方法，括号不要加。因为加括号之后，会直接执行helloworld()方法。所以不要加括号。

var test=helloworld;//方法的引用；

test();//这里会执行helloworld()方法体；

</script>

①. button.onclick = helloWorld();

错误的赋值方式, 以上代码将会导致　helloWorld　函数执行, 而赋给 onclick 属性的是函数的执行结果

②. button.onclick = helloWorld; 正确的赋值方式, 赋给 onclick 属性的是函数的引用

3. 如何来获取元素节点:(关于节点方法可以参考java API文档中的Node,Element等接口中的方法，在org.w3c.dom包中 )

1). document.getElementById: 根据 id 属性获取对应的单个节点

2). document.getElementsByTagName: 根据标签名获取指定节点名字的数组, 数组对象 length 属性可以获取数组的长度

3). document.getElementsByName: 根据节点的 name 属性获取符合条件的节点数组, 但 ie 的实现方式和 W3C 标准有差别: 在 html 文档中若某节点(li)没有 name 属性,　则 ie 使用

getElementsByName 不能获取到节点数组, 但火狐可以.

4). 其它的两个方法getElementsByClassName,getElementsByTagNameNS,　ie 根本就不支持, 所以不建议使用

以下是代码：

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<script type="text/javascript">
			
			window.onload = function(){
				//1. 获取 "北京" 对应的 li 节点
				
				//1). 
				var bj = document.getElementById("city");
				//alert(bj);
				
				//2). ie 和 火狐的实现方式不一样: 若节点本身没有 name 属性, ie 不能正常工作
				bj = document.getElementsByName("BeiJing");
				//alert(bj.length);
				
				var genders = document.getElementsByName("gender");
				//alert(genders.length);
				
				//3). 
				var uls = document.getElementsByTagName("ul");
				alert(uls.length);
			};
						
		</script>
		
	</head>
	<body>
		<p>你喜欢哪个城市?</p>
		<ul id="city">
			<li id="bj" name="BeiJing">北京</li>
			<li>上海</li>
			<li>东京</li>
			<li>首尔</li>
		</ul>
		
		<br><br>
		<p>你喜欢哪款单机游戏?</p>
		<ul id="game">
			<li id="rl">红警</li>
			<li>实况</li>
			<li>极品飞车</li>
			<li>魔兽</li>
		</ul>
		
		<br><br>
		gender: 
			<input type="radio" name="gender" value="male"/>Male
			<input type="radio" name="gender" value="female"/>Female
	</body>
</html>

4. 获取属性节点:

1). 可以直接通过 cityNode.id 这样的方式来获取和设置属性节点的值

2). 通过元素节点的 getAttributeNode 方法来获取属性节点,然后在通过 nodeValue 来读写属性值

代码：

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<script type="text/javascript">
			
			window.onload = function(){
				var maleNode = document.getElementsByName("gender")[0];	
		
				//1. 获取属性节点的值
				alert(maleNode.type);
				
				//2. 设置节点的值，可以通过查看源码来确定节点的value值已经改变。
				maleNode.value = "male^^";
				
				
				//3. 先获取属性节点, 然后在来操作属性节点(麻烦一点的方法)
				/*
				var typeNode = maleNode.getAttributeNode("type");
				alert(typeNode.nodeValue);
				typeNode.nodeValue = "text";//设置节点类型值，设置节点类型，firefox支持，但是IE不支持。
				*/
			};
						
		</script>
		
	</head>
	<body>
		<p>你喜欢哪个城市?</p>
		<ul id="city">
			<li id="bj" name="BeiJing">北京</li>
			<li>上海</li>
			<li>东京</li>
			<li>首尔</li>
		</ul>
		
		<br><br>
		<p>你喜欢哪款单机游戏?</p>
		<ul id="game">
			<li id="rl">红警</li>
			<li>实况</li>
			<li>极品飞车</li>
			<li>魔兽</li>
		</ul>
		
		<br><br>
		gender: 
			<input type="radio" name="gender" value="male"/>Male
			<input type="radio" name="gender" value="female"/>Female
	</body>
</html>

5. 获取元素节点的子节点(只有元素节点才有子节点!!):(元素节点即:<a><p><input><select><div>等等，属性节点id,type,name,value等等。)

1). childNodes 属性获取全部的子节点: 火狐和 ie的实现方式有区别

2). firstChild 属性获取第一个子节点

3). lastChild 属性获取最后一个子节点

代码：

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<script type="text/javascript">
			
			window.onload = function(){
				//1. 获取 #city 节点的所有的 li 子节点(获取全部的子节点: 火狐 和 ie的实现方式有区别)
				var cityNode = document.getElementById("city");
				var liNodes = cityNode.childNodes;
				alert(liNodes.length);
				
				//2. 获取 #city 节点的第一个子节点
				var first = cityNode.firstChild;
				alert(first);
				
				//3. 获取 #city 节点的最后一个子节点
				var last = cityNode.lastChild;
				alert(last);
			};
						
		</script>
		
	</head>
	<body>
		<p>你喜欢哪个城市?</p>
		<ul id="city">
			<li id="bj" name="BeiJing">北京</li>
			<li>上海</li>
			<li>东京</li>
			<li>首尔</li>
		</ul>
		
		<br><br>
		<p>你喜欢哪款单机游戏?</p>
		<ul id="game">
			<li id="rl">红警</li>
			<li>实况</li>
			<li>极品飞车</li>
			<li>魔兽</li>
		</ul>
		
		<br><br>
		gender: 
			<input type="radio" name="gender" value="male"/>Male
			<input type="radio" name="gender" value="female"/>Female
	</body>
</html>

6. 节点的属性:

1). nodeName: 代表当前节点的名字. 只读属性. **如果给定节点是一个文本节点, nodeName 属性将返回内容为 #text 的字符串

2). nodeType：返回一个整数, 这个数值代表着给定节点的类型. 只读属性. 1 -- 元素节点, 2 -- 属性节点, 3 -- 文本节点

3). nodeValue：返回给定节点的当前值(字符串). 可读写的属性

①. 元素节点, 返回值是 null.

②. 属性节点: 返回值是这个属性的值

③. 文本节点: 返回值是这个文本节点的内容

代码：

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<script type="text/javascript">
			
			window.onload = function(){
				//1. 元素节点的属性
				var cityNode = document.getElementById("city");
				alert(cityNode.nodeName);
				alert(cityNode.nodeType);
				//元素节点的 nodeValue 属性返回 null
				alert(cityNode.nodeValue);
				
				//2. 属性节点的属性
				var idNode = cityNode.getAttributeNode("id");
				alert(idNode.nodeName);
				alert(idNode.nodeType);
				alert(idNode.nodeValue);
				
				
			};
						
		</script>
		
	</head>
	<body>
		<p>你喜欢哪个城市?</p>
		<ul id="city">
			<li id="bj" name="BeiJing">北京</li>
			<li>上海</li>
			<li>东京</li>
			<li>首尔</li>
		</ul>
		
		<br><br>
		<p>你喜欢哪款单机游戏?</p>
		<ul id="game">
			<li id="rl">红警</li>
			<li>实况</li>
			<li>极品飞车</li>
			<li>魔兽</li>
		</ul>
		
		<br><br>
		gender: 
			<input type="radio" name="gender" value="male"/>Male
			<input type="radio" name="gender" value="female"/>Female
	</body>
</html>

7. 获取文本节点:

1). 步骤: 元素节点 --> 获取元素节点的子节点

2). 若元素节点只有文本节点一个子节点, 例如 <li id="bj" name="BeiJing">北京</li>, <p>你喜欢哪个城市?</p>, 可以先获取到指定的元素节点 eleNode,

然后利用 eleNode.firstChild.nodeValue 的方法来读写其文本节点的值

代码:

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<script type="text/javascript">
			
			window.onload = function(){
				//1. 获取 #bj 的文本节点
				var bjNode = document.getElementById("bj");
				var bjTextNode = bjNode.firstChild;//因为只有一个子节点，所以这里用firstChild和lastChild都一样，或者childNodes[0]
			
				//2. 获取文本节点的 3 个属性
				//alert(bjTextNode.nodeName);
				//alert(bjTextNode.nodeType);
				
				//获取文本节点的值
				alert(bjTextNode.nodeValue);
				
				//设置文本节点的值
				bjTextNode.nodeValue = "^^" + bjTextNode.nodeValue;
			};
						
		</script>
		
	</head>
	<body>
		<p>你喜欢哪个城市?</p>
		<ul id="city">
			<li id="bj" name="BeiJing">北京</li>
			<li>上海</li>
			<li>东京</li>
			<li>首尔</li>
		</ul>
		
		<br><br>
		<p>你喜欢哪款单机游戏?</p>
		<ul id="game">
			<li id="rl">红警</li>
			<li>实况</li>
			<li>极品飞车</li>
			<li>魔兽</li>
		</ul>
		
		<br><br>
		gender: 
			<input type="radio" name="gender" value="male"/>Male
			<input type="radio" name="gender" value="female"/>Female
	</body>
</html>

0
顶

1
踩

分享到：

javascript DOM(二) | s:fielderror和s:actionerror

2011-08-27 21:10
浏览 1151
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论