JavaScript DOM编程

DOM

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

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

节点及类型

• 元素节点
• 属性节点：元素的属性，可以直接通过属性的方式来操作。
• 文本节点：是元素节点的子节点

 

例子

	ClickMe

获取元素节点

• document.getElementById: 根据id属性获取对应的单个节点（该方法为document对象的方法）

• document.getElementsByTagName: 根据标签名获取指定节点集合（该方法为Node接口的方法，即任何一个节点都有这个方法）

• document.getElementsByName: 根据节点的name属性获取符合的节点集合（若HTML元素自身没有定义name属性，则用该方法对有些浏览器无效，所以使用时需谨慎）

例子

	
		
		
		
	
	
		
			
你喜欢那个城市？
			

				
北京
				
上海
				
东京
				
首尔
			
			
			


			
你喜欢哪款单击游戏？
			

				
红警
				
实况
				
极品飞车
				
魔兽
			
			
			


			gender:
			Male
			Female
		
	

读写属性节点

1. 先获取某一指定的元素节点
2. 再读指定元素节点的属性
3. 设置指定元素节点的属性的值

例子 

	
		
		
		
	
	
			
你喜欢那个城市？
			

				
北京
				
上海
				
东京
				
首尔
			
			
			


			
你喜欢哪款单击游戏？
			

				
红警
				
实况
				
极品飞车
				
魔兽
			
			
			


			name: 
	

获取元素节点的子节点

1. 先获取某节点。
2. 用childNodes方法获取指定元素节点的所有子节点。
3. 获取指定节点的指定子节点
4. 获取指定节点的第一个子节点或者最后一个子节点

例子 

	
		
		
		
	
	
			
你喜欢那个城市？
			

				
北京
				
上海
				
东京
				
首尔
			
			


			
你喜欢哪款单击游戏？
			

				
红警
				
实况
				
极品飞车
				
魔兽
			
			
			


			name: 
	

获取文本节点

1. 获取文本节点所在的元素节点。

2. 通过firstChild找到文本节点。

3. 通过操作文本节点的nodeValue属性来读写文本节点的值。 

 例子

	
		
		
		
	
	
			
你喜欢那个城市？
			

				
北京
				
上海
				
东京
				
首尔
			
			


			
你喜欢哪款单击游戏？
			

				
红警
				
实况
				
极品飞车
				
魔兽
			
			
			


			name: