DOM实例

最新推荐文章于 2025-08-21 23:22:44 发布

schy_hqh

最新推荐文章于 2025-08-21 23:22:44 发布

阅读量103

点赞数

CC 4.0 BY-SA版权

分类专栏： WEB前端@DHTML 文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/schy_hqh/article/details/84510401

WEB前端@DHTML 专栏收录该内容

8 篇文章

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
	<script type="text/javascript">
		function myFunction() {
			//getElementById:只返回一个对象
			var myNode = document.getElementById("myId");
			alert(myNode.value);//123

			//getElementsByName:返回一个数组
			var nodes = document.getElementsByName("myName");
			alert(nodes.length);//1
			//获取数组中的第1个对象(INPUT节点)
			var node = nodes[0];
			alert(node.nodeType+","+node.nodeName+","+node.nodeValue);//1,INPUT,null
			alert(node.type+","+node.name+","+node.value);//text,myName,123

			//getElementsByTagName:返回一个数组
			//对于没有id属性和name属性的标签，通过这种方式来获取
			var aNodes = document.getElementsByTagName("a");
			alert(aNodes.length);
			for(var i=0;i<aNodes.length;i++) {
				var aNode = aNodes[i];
				aNode.target = "_blank";//批量设置属性
				alert(aNode.innerHTML+":"+aNode.href);
			}

			//所有容器型标签，如DIV，都具有getElementsByTagName()
			//因为，这类型的标签中，肯定有其它标签存在，而这些标签不一定有id属性和name属性，所以只有getElementsByTagName()
			var divNode = document.getElementById("myLinks");
			var links = divNode.getElementsByTagName("a");
			for(var i=0;i<links.length;i++) {
				alert(links[i].innerHTML+"-"+links[i].href);
			}
		}
	</script>
 </HEAD>

 <BODY>
	<div>
		<input type="text" name="myName" id="myId" value="123"/>
	</div>
	<div id="myLinks">
		<a href="http://www.sina.com.cn">sina</a>
		<a href="http://www.baidu.com.cn">baidu</a>
	</div>
	<input type="button" value="just click!" onclick="myFunction()"/>
 </BODY>
</HTML>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
	<!--
		通过节点之间的层次关系获取节点对象
		关系：
			1.父节点  parentNode  1个节点对象
			2.儿子节点  childNodes  1个节点数组 (尽量少用，不同浏览器的解析结果不同)  
			3.兄弟节点(尽量少用，不同浏览器的解析结果不同)  
				上一个兄弟  prevoiousSibling  1个节点对象
				下一个兄弟  nextSibling 1个节点对象
	-->
	<script type="text/javascript">
		function sop(val) {
			document.getElementById("result").innerHTML += val;
		}

		function myFun() {
			var table = document.getElementById("myTable");
			//获取父节点
			var parentNode = table.parentNode;
			sop(parentNode.nodeName);//DIV

			//获取子节点
			//firstChild = childNodes[0]
			//lastChild = childNodes[childNodes.length-1]
			var cNodes = table.childNodes;
			sop(cNodes[0].nodeName);//IE:TBODY  FIREFOX:#text

			//获取兄弟节点
			var preSib = table.previousSibling;
			sop(preSib.nodeName);//IE:#text FIREFOX:#text

			var nextSib = table.nextSibling;
			sop(nextSib.nodeName);//IE:DL FIREFOX:#text
		}

	</script>
 </HEAD>
	
 <BODY>
	<button onclick="myFun()">点我</button>
	<div>
		<a href="javascript:void(0);">xxx</a>
		<table id="myTable">
			<tr>
				<td>aaa</td>
				<td>AAA</td>
			</tr>
			<tr>
				<td>bbb</td>
				<td>BBB</td>
			</tr>
			<tr>
				<td>ccc</td>
				<td>CCC</td>
			</tr>
		</table>
		<dl>
			<dt>yyy<dt>
			<dd>111</dd>
			<dd>222</dd>
		<dl>
	</div>
	<div id="result"></div>
 </BODY>
</HTML>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
	<style type="text/css">
		div {
			border: #00ccff solid 1px;
			width: 200px;
			height: 30px;
			padding: 10px;
			margin: 10px;
		}
	</style>
	
	<script type="text/javascript">
		//创建并添加内容
		function createNode() {
			var oDivNode = document.getElementById("div_1");
			
			//1.创建文本节点对象
			var oTextNode = document.createTextNode("AAAAAAAAAA");
			//添加到目标节点对象中
			oDivNode.appendChild(oTextNode);
			
			//2.创建标签节点
			var oButtonNode = document.createElement("input");
			oButtonNode.type = "button";
			oButtonNode.value = "按我！";
			//添加到目标节点对象中
			oDivNode.appendChild(oButtonNode);

			//3.实用方法,不会追加，每次都重新设置
			var oDivNode2 = document.getElementById("div_2");
			oDivNode2.innerHTML = "<input type='text' name='xxx' value='BBBBBBBBBB'/>";
		}
		
		//删除已有节点
		function delNode() {
			var oDivNode = document.getElementById("div_3");
			oDivNode.parentNode.removeChild(oDivNode);
		}
		
		//替换/修改节点
		function updateNode() {
			var oDivNode1 = document.getElementById("div_1");
			var oDivNode4 = document.getElementById("div_4");
			//object.replaceChild(oNewNode, oChildNode)
			//先找到父节点，再使用父节点的replaceChild方法进行替换
			//param1:新节点；param2:被替换的节点
			oDivNode1.parentNode.replaceChild(oDivNode1,oDivNode4);
		}
		
		//复制节点
		function copyNode() {
			var oDivNode1 = document.getElementById("div_1");
			var oDivNode4 = document.getElementById("div_4");
			//复制节点
			//false Cloned objects do not include childNodes. 
			//true: Cloned objects include childNodes.
			var cloneDivNode1 = oDivNode1.cloneNode(true); 
			oDivNode1.parentNode.replaceChild(cloneDivNode1,oDivNode4);
		}
	</script>

 </HEAD>

 <BODY>
	<input type="button" onclick="createNode()" value="新建节点"/>
	<input type="button" onclick="delNode()" value="删除节点"/>
	<input type="button" onclick="updateNode()" value="修改节点"/>
	<input type="button" onclick="copyNode()" value="克隆节点"/>
	
	<hr/>
	
	<div id="div_1">

	</div>
	<div id="div_2">
		
	</div>
	<div id="div_3">
		CCCCCCCCCC
	</div>
	<div id="div_4">
		DDDDDDDDDD
	</div>
 </BODY>
</HTML>