DOM操作HTML文档

2019/7/22 6:46:26 人评论 次浏览 分类:学习教程

原文链接:http://www.cnblogs.com/riasky/p/3478449.html

概述

       之前写过一些关于DOM方法的知识,理论方法的偏多,所以,这篇博客主要是实践方面的Demo,如果,大家觉得理论方面有所欠缺,大家可以看看这几篇博客:JavaScript总结(一、基本概念)和JavaScript总结(三、DOM)

实例程序

根节点属性和方法

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>根节点属性和方法</title>
    <script type="text/javascript">
    	function DOMTest(){
    		//1、属性
		    		//获得文档根元素节点
		    		var htmlRootElement = document.documentElement;
    		//2、方法
		    		//第一类方法:获取元素节点
				    		//a、通过id属性的属性值获取元素节点
				    		var divNode = document.getElementById("div1");
				    		//b、通过标签名获取元素数组
				    		var divNodes = document.getElementsByTagName("div");
				    		//通过name属性的属性值获取元素数组
				    		//var divNodes2 = document.getElementsByName("div");
		    		//第二类方法:创建其它各种类型的节点
				    		//a、创建元素节点
				    		var newDivNode = document.createElement("div");
				    		//b、创建文本节点
				    		var newTextNode = document.createTextNode("This is a new TextNode!");
				    		//c、创建属性节点
				    		var newAttributeNode = document.createAttribute("value");
				    		//d、创建注释节点
				    		var newCommentNode = document.createComment("这个是注释信息节点");
    		alert("");
    	}
    </script>
  </head>
  <body>  
  	<input type="button" value="测试" οnclick="javascript:DOMTest();"/>
  	<div id="div1">123123</div>
  	<input type="text" id="inputtext"/>
  	<div id="div2">
  		456
  		<div>789</div>
  		<div id="a">AAA</div>
  	</div>
  	<input type="button" value="点击" id="clic"/>
  </body>
</html>

 

 

元素节点属性和方法

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>元素节点属性和方法</title>
    <script type="text/javascript">
    	function DOMTest(){
    		//1、属性
    				//A、DOM的特有属性
				    		//a、返回元素节点的标签名(大写)
						    		//a1、获得指定的元素节点
						    		var divNode1a1 = document.getElementById("div1");
						    		//a2、获得元素节点的标签名(大写)
						    		var tagNameElement1a2 = divNode1a1.tagName;
						    		//测试
						    		alert(tagNameElement1a2);
		   			//B、操作字符串.格式:元素节点.属性名 = 属性值
								//a、获得属性值
										//a1、获得元素节点
										var textNodeaa1 = document.getElementById("inputtext");
										//a2、取出元素节点相应的属性值
										var attValue = textNodeaa1.value;
										//测试
										alert(attValue);
							  //b、设置属性值
								  	//a1、获得元素节点
								  	var textNodeba1 = document.getElementById("inputtext");
								  	//a2、设置元素节点相应的属性值
								  	textNodeba1.value="name";
    		//2、方法
	    		//第一类方法:获取该元素节点的子孙元素节点
			    		//a1、获取元素节点
			    		var divNode2a1 = document.getElementById("div2");
			    		//a2、通过元素节点获取该元素内的子孙节点(直接通过document也可以)
			    		var divNodes2a2 = divNode2a1.getElementsByTagName("div");
	    		//第二类方法:操作元素节点中所包含的属性
			    		//A、属性节点j
					    		//a、添加属性节点
							    		//a1、创建属性节点:根据属性名创建一个确定的属性节点
							    		var textAttributeNodeja1 = document.createAttribute("value");
							    		//a2、设置属性节点的属性值:属性节点为属性名和属性值(value)
							    		textAttributeNodeja1.value = "新添加的属性节点值";
							    		//a3、添加属性节点:向指定元素节点上添加属性节点
							    				//a31、获取指定元素节点
							    				var textNodeja3 = document.getElementById("inputtext");
							    				//a32、添加属性节点
							    				textNodeja3.setAttributeNode(textAttributeNodeja1);
					    		//b、获取属性节点
							    		//b1、获取指定的元素节点
							    		var textNodejb1 = document.getElementById("inputtext");
							    		//b2、获取指定(属性名)的属性节点
							    		var textAttributeNodejb2 = textNodejb1.getAttributeNode("value");
							    		//b3、获取属性节点的值:读取属性节点的属性值
							    		var attValuejb3 = textAttributeNodejb2.value;
							    		//测试
							    		alert(attValuejb3);
							    //c、删除指定的属性节点
							    		//c1、获取元素节点
							    		var textElementNodejc1 = document.getElementById("inputtext");
							    		//c2、获取(创建)相应的属性节点
							    		var textAttributeNodejc2 = document.createAttribute("id");
							    		//c3、删除指定的属性节点
							    		textElementNodejc1.removeAttributeNode(textAttributeNodejc2);
			    		//B、属性值z
					    		//a、添加(设置)属性值
							    		//a1、获取元素节点
							    		var textNodeza1 = document.getElementById("inputtext");
							    		//a2、设置相应的属性值
							    		textNodeza1.setAttribute("value","另一种方式添加节点属性");
									//b、获取属性值
											//b1、获取元素节点
											var textNodezb1 = document.getElementById("inputtext");
											//b2、获取相应的属性值
											var attValuezb2 = textNodezb1.getAttribute("value");
											//测试
											alert(attValuezb2);
									//c、删除指定属性
											//c1、获取元素节点
											var textElementNodezc1 = document.getElementById("inputtext");
											//c2、删除指定属性的属性值
											textElementNodezc1.removeAttribute("id");
    		alert("");
    	}
    </script>
  </head>
  <body>  
  	<input type="button" value="测试" οnclick="javascript:DOMTest();"/>
  	<div id="div1">123123</div>
  	<input type="text" id="inputtext" value="测试数据"/>
  	<div id="div2">
  		456
  		<div>789</div>
  		<div id="a">AAA</div>
  	</div>
  	<input type="button" value="点击" id="clic"/>
  </body>
</html>

 

 

属性节点属性和方法

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>属性节点的属性</title>
    <script type="text/javascript">
    	function DOMTest(){
	    		//A、获得属性节点
	    				//a1、获取元素节点。通过根节点,依据id,获得相应的元素节点
	    				var textElementNodeAa1 = document.getElementById("inputtext");
	    				//a2、获取属性节点。通过元素节点,依据属性名,获得相应的属性节点
	    				var textAttributeNodeAa2 = textElementNodeAa1.getAttributeNode("value");
	    		//B、获得属性节点的属性名
	    				var attNameB = textAttributeNodeAa2.name;
	    				//测试
	    				alert(attNameB);
	    		//C、获得属性节点的属性值
	    				var attValueC = textAttributeNodeAa2.value;
	    				//测试
	    				alert(attValueC);
    	}
    </script>
  </head>

  <body>
  	<input type="button" value="测试" οnclick="javascript:DOMTest();"/>
  	<div id="div1">123123</div>
  	<input type="text" id="inputtext" value="测试数据"/>
  	<div id="div2">
  		456
  		<div>789</div>
  		<div id="a">AAA</div>
  	</div>
  	<input type="button" value="点击" id="clic"/>
  </body>
</html>

 

 

所有节点属性和方法

实例一:基本属性和方法的联系

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>所有节点的属性和方法</title>
    <script type="text/javascript">
    	function DOMTest(){
    		//属性
    				//A、第一类
    						//a、返回节点上所有属性节点对象的数组。虽然所有节点都有这个属性,但是,只有元素有意义
		    						//a1、获得元素节点
		    						var buttonElementNodeAa1 = document.getElementById("clic");
		    						//a2、获得元素节点上所有属性节点
		    						var buttonAttributesNoteAa2 = buttonElementNodeAa1.attributes;
    				//B、第二类
    						//a、节点的类型
    								//a1、获得相应的节点,以属性节点为例
    								var divElementNodeBa1 = document.getElementById("a");
    								var divAttributeNodeBa1 = divElementNodeBa1.getAttributeNode("id");
    								//a2、节点的类型
    								var divNodeType = divAttributeNodeBa1.nodeType;
    								//测试
    								alert(divNodeType);
    						//b、节点的名字
    								//b1、获得相应的节点,以属性节点为例
    								var divElementNodeBb1 = document.getElementById("a");
    								var divAttributeNodeBb1 = divElementNodeBb1.getAttributeNode("id");
    								//b2、获得节点的名字
    								var divNodeName = divAttributeNodeBb1.nodeName;
    								//测试
    								alert(divNodeName);
    						//c、节点的内容
    				    		//c1、获得相应的节点,以属性节点为例
    				    		var divElementNodeBc1 = document.getElementById("a");
    				    		var divAttributeNodeBc1 = divElementNodeBc1.getAttributeNode("id");
    				    		//c2、获得节点的内容(vlaue值)
    				    		var divAttributeValueBc2 = divAttributeNodeBc1.nodeValue;
    				    		//测试
    				    		alert(divAttributeValueBc2);
    				//C、第三类(帮助我们在DOM树中进行遍历)
    						//a、一个元素节点里面的孩子节点,可以是文本节点,注释节点,元素节点。“节点”和“节点”直接可以是兄弟,和父子的关系
    								//获得元素节点
    								var divElementNodeCc1 = document.getElementById("div2");
    								
    								//0、获得该元素节点中所有的元素节点。子一代节点之间如果有换行,空格时,这些会被当做文本节点
		    						var divChildElementsNodeCa2 = divElementNodeCc1.childNodes;
    								//1、返回当前元素节点子一代的第一个子节点
    								var divFirstElementNode = divElementNodeCc1.firstChild;
    								//2、返回当前节点的父节点
    								var divParentNode = divFirstElementNode.parentNode;
    								//3、返回该节点的下一个兄弟节点
    								var divNextSibling = divFirstElementNode.nextSibling;
    								//4、返回当前元素节点子一代的最后一个节点
    								var divLastElementNode = divElementNodeCc1.lastChild;
    								//5、返回当前节点的上一个兄弟节点
    								var divPreviousSibling = divLastElementNode.previousSibling;
    		//方法
    				//获得元素节点
    				var divElementNodef = document.getElementById("a");
    				
    				//1、当前元素节点是否拥有子节点,有则true,无则false
    				var flag = divElementNodef.hasChildNodes();
    				//测试
    				alert(flag);
    				//2、给当前节点增加一个子节点(所有字节的末尾)
    						//创建文本节点
    						var textTextNode21 = document.createTextNode("元素节点的子节点的末尾添加新的子节点");
    						//创建元素节点,并设置其属性值
    						var textElementNode21 = document.createElement("input");
    						textElementNode21.type="text";
    						textElementNode21.value="元素节点的子节点的末尾添加新增的子节点";
    						textElementNode21.id = "newText1";
    						//添加文本节点
    						divElementNodef.appendChild(textTextNode21);
    						//添加元素节点
    						divElementNodef.appendChild(textElementNode21);
    				//3、在当前节点的指定子节点的前面插入新的节点
    						//创建文本节点
    						var textTextNode31 = document.createTextNode("向元素节点的指定子节点前插入文本节点");
    						//创建元素节点
    						var textElementNode31 = document.createElement("input");
    						textElementNode31.type="text";
    						textElementNode31.value="插入元素节点";
    						textElementNode31.id="newText2";
    						//添加文本节点
    						divElementNodef.insertBefore(textTextNode31,textTextNode21);
    						//添加元素节点
    						divElementNodef.insertBefore(textElementNode31,textTextNode31);
    				//4、删除元素节点中指定的子节点,同时返回删除的子节点
    						var removeElementNode = divElementNodef.removeChild(textElementNode31);
    				//5、用另一个节点替换当前节点的一个子节点,并且返回指定的子节点
    						//创建一个元素节点
    						var buttonElementNodef5 = document.createElement("input");
    						buttonElementNodef5.type="button";
    						buttonElementNodef5.value="新加节点";
    						//替换之前的节点
    						divElementNodef.replaceChild(buttonElementNodef5,textTextNode31);
    				//6、复制当前节点(只复制当前节点或者复制当前节点和他的子孙节点)
    						var cloneO = divElementNodef.cloneNode(false);
    						var cloneA = divElementNodef.cloneNode(true);
    	alert("");
    	}
    </script>
  </head>

  <body>
  	<input type="button" value="测试" οnclick="javascript:DOMTest();"/>
  	<div id="div1">123123</div>
  	<input type="text" id="inputtext" value="测试数据"/>
  	
  	<div id="div2">
  		<!--这个有相应的节点吗?-->
  		文本节点1
  		文本节点2
  		<div>
  			<input type="text" value="子节点"/>
  		</div>
  		<div id="a">AAA</div>
  	</div>
  	
  	<input type="button" value="点击" id="clic"/>
  </body>
</html>

 

 

实例二:综合型的实例

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>增删查改DOM节点</title>
    <script type="text/javascript">
    	var index=0;
    	//A、末尾追加节点
    	function appendnode(){
    		//1、找到相应的元素节点F
    		var divFElementNode = document.getElementsByTagName("div");
    		//2、创建容纳文本节点的元素节点S
    		var divSElementNode = document.createElement("div");
    		//3、创建文本节点
    		index++;
    		var textTextNode = document.createTextNode("我是新加入的节点" + index);
    		//4、向元素节点S上添加创建的文本节点
    		divSElementNode.appendChild(textTextNode);
    		//5、向元素节点F上添加创建的元素节点S
    		divFElementNode[0].appendChild(divSElementNode);
    	}
    	
    	//B、首位插入节点
    	function insertnode(){
    		//1、获得元素节点F
    		var divFElementNode = document.getElementById("divId");
    		//2、获得元素节点的子节点的第一个元素节点S1
    		    //2.1、定义接收第一个元素节点的变量
		    		var divS1ElementNode;
		    		//2.2、获得该元素节点里的所有节点(数组)
		    		var divSElementNodes = divFElementNode.childNodes;
		    		//2.3、判断数组中的第一个元素节点
		    		for(var i=0; i<divSElementNodes.length; i++){
		    			if(divSElementNodes[i].nodeType == 1){
		    				divS1ElementNode = divFElementNode.firstChild;
		    				break;
		    			}
		    		}
		    		//2.4、判断是否存在元素节点
		    		if(divS1ElementNode == null || divS1ElementNode == undefined || divS1ElementNode == ""){
		    			return;
		    		}
    		//3、创建元素节点S0,用来存放创建的文本节点
    		var divS0ElementNode = document.createElement("div");
    		//4、创建文本节点S01
    		index++;
    		var textS01TextNode = document.createTextNode("我是新加入的节点" + index);
    		//5、将文本节点添加到元素节点S0里
    		divS0ElementNode.appendChild(textS01TextNode);
    		//6、将元素节点S0插入到S1的前面
    		divFElementNode.insertBefore(divS0ElementNode,divS1ElementNode);
    	}
    	
    	//C、克隆末尾元素节点,并追加
    	function clonenode(){
    		//1、找到元素节点F
    				//1.1、相同标签名的数组
    				var divFElementNodes = document.getElementsByTagName("div");
    				//1.2、指定的元素节点
    				var divFElementNode = divFElementNodes[0];
    		//2、找到元素节点F中的最后的一个子元素节点S
    				//2.1、定义接收最后一个子元素节点的变量
    				var divSElementNode;
    				//2.2、获得F中的所有子元素节点
    				var divSElementNodes = divFElementNode.childNodes;
    				//2.3、判断数组中最后的一个元素节点
    				for(var i=divSElementNodes.length-1; i>0; i--){
    					if(divSElementNodes[i].nodeType == 1){
    						divSElementNode = divSElementNodes[i];
    						break;
    					}
    				}	
    				//2.4、判断是否存在子元素节点
    				if(divSElementNode == null || divSElementNode == undefined){
    					return;
    				}
    		//3、克隆子元素节点S
    		var cloneDivSElementNode = divSElementNode.cloneNode(true);
    		//4、将克隆的子元素节点追加到F中
    		divFElementNode.appendChild(cloneDivSElementNode);
    	}
    	
    	//D、移除第一个元素节点
    	function removenode(){
    		//1、找到相应的元素节点F
    		var divFElementNode = document.getElementById("divId");
    		//2、找到要移除的元素节点S
    				//2.1、定义获得第一个子元素节点
    				var divSElementNode;
    				//2.2、获得F中的所有孩子节点
    				var divSElementNodes = divFElementNode.childNodes;
    				//2.3、判断数组,从中等到第一个子元素节点
    				for(var i=0; i<divSElementNodes.length; i++){
    					if(divSElementNodes[i].nodeType == 1){
    						divSElementNode = divSElementNodes[i];
    						break;
    					}
    				}
    				//2.4、判断是否存在子元素节点
    				if(divSElementNode == null | divSElementNode == undefined){
    					return;
    				}
    		//3、将S从F中移除
    		var deleteElement = divFElementNode.removeChild(divSElementNode);
    	}
    	
    	//E、替换元素节点(第一个和最后一个交换)
    	function replacenode(){
    		//找到id=divId的div
    		var divFElementNode = document.getElementById("divId");
    		//找到该div里面的所有div
    		var divSElementNodes = divFElementNode.getElementsByTagName("div");
    		
    		var divLength = divSElementNodes.length;
         if(divLength >= 2){
         		var firstDiv = divSElementNodes[0];
            var lastDiv = divSElementNodes[divLength -1];
            var replaceNode = divFElementNode.replaceChild(firstDiv, lastDiv);
            divFElementNode.insertBefore(replaceNode,divSElementNodes[0]);
         }
    	}
    </script>
  </head>

  <body>
		<input type="button" value="追加节点" id="append" οnclick="javascript:appendnode();"/>
		<input type="button" value="插入节点" id="insert" οnclick="javascript:insertnode();"/>
		<input type="button" value="克隆节点" id="clone" οnclick="javascript:clonenode();"/>
		<input type="button" value="移除节点" id="remove" οnclick="javascript:removenode();"/>
		<input type="button" value="替换节点" id="replace" οnclick="javascript:replacenode();"/>
		<div id="divId"></div>
  </body>
</html>

 

 

总结

       本篇博客主要给出了一些实例,大家可以根据这些实例,自己联系联系,由于程序代码里的注释很详细,所以就不在过多的在别的地方解释,大家好好看看这些实例,相信一定会有收获的。

 

转载于:https://www.cnblogs.com/riasky/p/3478449.html

相关资讯

    暂无相关的资讯...

共有访客发表了评论 网友评论

验证码: 看不清楚?
    -->