DOM操作详解-优快云博客

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	</head>
  <body>
  	<input type="text" value="国庆XX周年" id="tid"/>
  	<script type="text/javascript">
		//取得input元素的名字，类型，值
		var inputElement = document.getElementById("tid");
		alert(inputElement.nodeName + ":" + inputElement.nodeType + ":" + inputElement.nodeValue);
		
		//取得type属性名字，类型，值
		var inputAttribute = inputElement.getAttributeNode("type");
		alert(inputAttribute.nodeName + ":" + inputAttribute.nodeType + ":" + inputAttribute.nodeValue);
  	</script>
  </body>
</html>

一、查找元素节点

　　1）getElementById()

　　寻找一个有着给定 id 属性值的元素，返回值是一个有着给定 id 属性值的元素节点。如果不存在这样的元素，它返回 null.

　　var oElement = document.getElementById ( sID )

该方法只能用于 document 对象

　　样例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	</head>
  <body>
  	<input type="text" value="国庆XX周年" id="tid"/>
  	<script type="text/javascript">
		/*
			取得value的值
		*/
  		//定位id为"tid"的元素
  		var inputElement = document.getElementById("tid");
  		//判段
  		if(inputElement!=null){
	  		//取得该元素的值
	  		var input = inputElement.value;
	  		//显示
	  		alert(input);
  		}else{
  			alert("查无此内容");
  		}
  	</script>
  </body>
</html>

2）getElementsByName()

　　　　寻找有着给定name属性的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定name属性的所有元素的总个数

　　　　样例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	</head>
	<body>
		<input type="text" name="tname" value="国庆XX年_1" />
		<br>
		<input type="text" name="tname" value="国庆XX年_2" />
		<br>
		<input type="text" name="tname" value="国庆XX年_3" />
		<br>
		<script type="text/javascript">
			//查询以"tname"为名字的元素集合
			var inputElementArray = document.getElementsByName("tname");
			//显示集合的长度
			var size = inputElementArray.length;
			//循环
			for(var i=0;i<size;i++){
				alert(inputElementArray[i].value);
			}	
	  	</script>
	</body>
</html>

　　3）getElementsByTagName()

　　　　寻找有着给定标签名的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定标签名的所有元素的总个数。

　　　　var elements = document.getElementsByTagName(tagName);

　　　　var elements = element.getElementsByTagName(tagName);

　　　　•该方法不必非得用在整个文档上。它也可以用来在某个特定元素的子节点当中寻找有着给定标签名的元素。

var container = document.getElementById(“sid”);

var elements = container.getElementsByTagName(“p”);

alert(elements .length);

　　　样例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	</head>
	<body>	
		<select multiple size="3"><!--multisize表示可以多选-->
			<option value="bj">北京</option>
			<option value="sh">上海</option>
			<option value="gz">广州</option>
		</select>
		<script type="text/javascript">
			var selectElement = document.getElementsByTagName("select")[0];
			var size = selectElement.options.length;
			for(var i=0;i<size;i++){
				//定位其中一个option元素
				var optionElement = selectElement.options[i];
				//显示该option元素的值和描述
				alert(optionElement.value + ":" + optionElement.innerHTML);
			}
		</script>
	</body>
</html>

二、查看是否存在子节点

　　hasChildNodes()

　　•该方法用来检查一个元素是否有子节点，返回值是 true 或 false.

　　var booleanValue = element.hasChildNodes();

•文本节点和属性节点不可能再包含任何子节点，所以对这两类节点使用 hasChildNodes 方法的返回值永远是 false.

•如果 hasChildNodes 方法的返回值是 false，则 childNodes,firstChild,lastChild 将是空数组和空字符串。

　　样例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	</head>
	<body>	
		<select multiple size="3">
			<option value="bj">北京</option>
			<option value="sh">上海</option>
			<option value="gz">广州</option>
		</select>
		<script type="text/javascript">
			/*select元素是否有子元素
			var selectElement = document.getElementsByTagName("select")[0];
			var flag = selectElement.hasChildNodes();
			alert(flag==true?"有子元素":"无子元素");*/
			
			/*option[2]元素是否有子元素
			var selectElement = document.getElementsByTagName("select")[0];
			var optionElement = selectElement.options[2];
			var flag = optionElement.hasChildNodes();
			alert(flag==true?"有子元素":"无子元素");*/
			
			//广州"文本元素节点"是否有子元素
			var selectElement = document.getElementsByTagName("select")[0];
			var optionElement = selectElement.options[2];
			//定位option唯一的一个孩子
			var gzElement = optionElement.firstChild;
			var flag = gzElement.hasChildNodes();
			alert(flag==true?"有子元素":"无子元素");
		</script>
	</body>
</html>

三、DOM 属性

　　文档里的每个节点都有以下属性

　　1）nodeName:一个字符串，其内容是给定节点的名字。

　　 var name = node.nodeName;

　　 * 如果节点是元素节点，nodeName返回这个元素的名称

　　* 如果是属性节点，nodeName返回这个属性的名称

　　 * 如果是文本节点，nodeName返回一个内容为#text的字符串

　　注:nodeName是一个只读属性。

　　2）nodeType：返回一个整数，这个数值代表着给定节点的类型。

　　•nodeType 属性返回的整数值对应着 12 种节点类型,常用的有三种：

• Node.ELEMENT_NODE ---1 -- 元素节点

• Node.ATTRIBUTE_NODE ---2 -- 属性节点

• Node.TEXT_NODE ---3 -- 文本节点

　　•nodeType 是个只读属性

　　3）nodeValue：返回给定节点的当前值（字符串）

•如果给定节点是一个 属性节点，返回值是这个属性的值。

• 如果给定节点是一个 文本节点，返回值是这个文本节点的内容。

• 如果给定节点是一个 元素节点，返回值是 null

• nodeValue 是一个读/写属性，但 不能对元素节点的 nodeValue 属性设置值，但 可以为文本节点的 nodeValue 属性设置一个值。

　　　　 var li = document.getElementById(“li”);

　　　　　 if(li.firstChild.nodeType == 3)

　　　　li.firstChild.nodeValue = “国庆”;

　　　样例：　　　

四、替换节点

　　 replaceChild() -父元素.replaceChild(新元素-替换成什么元素,旧元素-要被替换的元素)

　　•把一个给定父元素里的一个子节点替换为另外一个子节点

　　　　 var reference = element.replaceChild(newChild,oldChild);

•返回值是一个指向已被替换的那个子节点的引用指针。

•如果被插入的子节点还有子节点，则那些子节点也被插入到目标节点中

　　样例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	</head>
  <body>
	<ul id="city">
		<li id="bj">北京</li>
		<li id="sh">上海</li>
		<li id="gz">广州</li>
	</ul>
	<hr/>
	<ul id="color">
		<li id="red">红色</li>
		<li id="green">绿色</li>
		<li id="blue">蓝色</li>
	</ul>
  	<script type="text/javascript">
		//单击gz节点时，用color节点替换	
		document.getElementById("gz").onclick=function(){
			var colorElement = document.getElementById("color");
			var cityElement = document.getElementById("city");
			cityElement.replaceChild(colorElement,this);
			//其中this表示：document.getElementById("gz")
			//该方法必须在直接父元素上调用
			//该方法是一个直接父子操作方法
		}
  	</script>
  </body>
</html>

DOM-常用API