概述

之前写过一些关于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="测试" onclick="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="测试" onclick="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="测试" onclick="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="测试" onclick="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" onclick="javascript:appendnode();"/>

		<input type="button" value="插入节点" id="insert" onclick="javascript:insertnode();"/>

		<input type="button" value="克隆节点" id="clone" onclick="javascript:clonenode();"/>

		<input type="button" value="移除节点" id="remove" onclick="javascript:removenode();"/>

		<input type="button" value="替换节点" id="replace" onclick="javascript:replacenode();"/>

		<div id="divId"></div>

  </body>

</html>

总结

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

DOM操作HTML文档的更多相关文章

javascript DOM操作HTML文档
文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态访问和更新文档内容.结构和样式的语言平台.提供了标准的 ...
使用DOM进行xml文档的crud（增删改查）操作<操作详解>
很多朋友对DOM有感冒,这里我花了一些时间写了一个小小的教程,这个能看懂,会操作了,我相信基于DOM的其它API(如JDOM,DOM4J等)一般不会有什么问题. 后附java代码,也可以下载(可点击这 ...
js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）
js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子操作DOM 文本对象 js三种引入方式 (1)行间式: ...
HTML DOM 定义了访问和操作 HTML 文档标准
HTML DOM 定义了访问和操作 HTML 文档的标准. 您应该具备的基础知识在您继续学习之前,您需要对以下内容拥有基本的了解: HTML CSS JavaScript 如果您需要首先学习这些项目 ...
XML DOM (Document Object Model) 定义了访问和操作 XML 文档的标准方法。
XML DOM DOM 把 XML 文档视为一种树结构.通过这个 DOM 树,可以访问所有的元素.可以修改它们的内容(文本以及属性),而且可以创建新的元素.元素,以及它们的文本和属性,均被视为节点. ...
文档对象模型操作xml文档
简介 :文档对象模型(DOM)是一种用于处理xml文档的API函数集. 2.1文档对象模型概述按照W3C的定义,DOM是“一种允许程序或脚本动态地访问更新文档内容,结构和样式的.独立于平台和语言的规 ...
js导读,js引入,js选择器,事件,操作页面文档,计算后样式,数据类型
js导读 ''' js属于编写运行在浏览器上的脚本语言 js采用ECMAScript语法操作BOM:浏览器对象模型 eg:浏览器上下滑动,浏览器历史记录操作DOM:文档对象模型 ''' js引入 ...
python 之前端开发（ jQuery选择器、筛选器、样式操作、文本操作、属性操作、文档操作）
11.5 jQuery 引入方式: 方式一:本地引入 <script src="jquery-3.3.1.min.js"></script> <scr ...
精讲 org.w3c.dom(java dom)解析XML文档
org.w3c.dom(java dom)解析XML文档位于org.w3c.dom操作XML会比较简单,就是将XML看做是一颗树,DOM就是对这颗树的一个数据结构的描述,但对大型XML文件效果可能会 ...

随机推荐

apache 配置文件管理
1. Apache配置系统从整体来看apache的配置系统包括三个部分: (1) 配置文件:比如 httpd.conf .htaccess (2) 配置指令:在配置文件 httpd.conf ...
python函数any()与all()
any(iterable) all(iterable) any()与all()函数的区别,any是任意,而all是全部. 版本:该函数适用于2.5以上版本,兼容python3版本. any(itera ...
pcap文件格式解析
pcap文件格式是常用的数据报存储格式,包括wireshark在内的主流抓包软件都可以生成这种格式的数据包下面对这种格式的文件简单分析一下: pcap文件的格式为: 文件头 24字节 ...
哈夫曼树（Huffman）的JS实现
我本身并不懂哈夫曼树也不知道有什么用,GOOGLE了下,也只是一知半解,只是刚好看到有JAVA实现版,又看了下生成原理,感觉挺有意思,就写了一下有些地方可以优化,效率不怎么样的,纯好玩,也不保证一定 ...
javascript变量说明
定义变量 var test = "hi"; 在这个例子中,声明了变量 test,并把它的值初始化为 "hi"(字符串).由于 ECMAScript 是弱类型的, ...
http://qt-project.org/wiki/Category:Developing_with_Qt::QtWebKit#ff7c0fcd6a31e735a61c001f75426961
404: Not Found | Qt Project QtWebKit documentation http://dwz.cn/hr2013
Android手机之间通过声音传输信息方法——声波通信（含project代码）
大家可能都用过支付宝的声波支付.即两个终端同一时候打开该功能,一个终端作为发送端send,一个终端作为接收端get,send将本终端上发出的请求信息依照约定规则的算法进行声音编码,并播放出来,get端 ...
你能相信吗？这些都是由一个DIV元素实现的动画，纯CSS3技术
http://www.webhek.com/misc/css-loaders
URAL 1260 Nudnik Photographer DFS DP
题目:click here :这个题可以先dfs深搜下,规律dp dfs: #include <bits/stdc++.h> using namespace std; #define S ...
java源代码如何打成jar包
链接地址:http://jingyan.baidu.com/article/046a7b3ed8b23ef9c27fa9b9.html 有时自已写了一个很巧妙的方法,想分享给别人用,这时我们就可以将其 ...

DOM操作HTML文档

概述

实例程序

根节点属性和方法

元素节点属性和方法

属性节点属性和方法

所有节点属性和方法

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

实例二：综合型的实例

总结

DOM操作HTML文档的更多相关文章

随机推荐

热门专题