【JavaScript】DOM节点常用方法介绍02

DOM节点常用方法介绍02

1.替换节点
replaceChild()
把一个给定父元素里的一个子节点替换为另外一个子节点
var reference = element.replaceChild(newChild,oldChild);
返回值是一个指向已被替换的那个子节点的引用指针。
如果被插入的子节点还有子节点,则那些子节点也被插入到目标节点中

例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title>js测试</title>
		
	</head>
	<body> 
	   
	  您喜欢的城市:<br> 
	   <ul>
	   	 <li id="bj" value="beijing">北京</li>
		 <li id="sh" value="shanghai">上海</li>
		 <li id="cq" value="chongqing"> 重庆</li>
	   </ul>
	  
	  您喜欢的游戏:<br> 
	   <ul>
	   	 <li id="fk" value="fangkong">反恐<p>xxx</p></li>
		 <li id="ms" value="moshou">魔兽</li>
		 <li id="cq" value="chuanqi">传奇</li>
	   </ul>   
	   
	    <script language="javascript">
			//点击北京节点,将被反恐节点替换
			
			//改写北京节点的onclick方法
			document.getElementById("bj").οnclick=function(){
				
				//获取反恐节点
				var fkElement=document.getElementById("fk");
				//获取北京节点的父节点
				var bjParentElement=this.parentNode;
			
				//替换(反恐的子节点xxx也过去)
				var oldElement=bjParentElement.replaceChild(fkElement,this);
				
				//测试
				alert(oldElement.getAttribute("value"));
			}


	    </script>
	</body>


</html>

2.查找属性节点
getAttribute()   
返回一个给定元素的一个给定属性节点的值
var attributeValue = element.getAttribute(attributeName);
给定属性的名字必须以字符串的形式传递给该方法。
给定属性的值将以字符串的形式返回,如果给定属性不存在,getAttribute() 将返回一个空字符串.


通过属性获取属性节点
getAttributeNode(属性的名称)--Node

例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title>js测试</title>
		
	</head>
	<body> 
	   
	   您喜欢的城市:<br> 
	   <ul>
	   	 <li id="bj" value="beijing">北京</li>
		 <li id="sh" value="shanghai">上海</li>
		 <li id="cq" value="chongqing">重庆</li>
	   </ul>
	  
	  您喜欢的游戏:<br> 
	   <ul>
	   	 <li id="fk" value="fangkong">反恐</li>
		 <li id="ms" value="moshou">魔兽</li>
		 <li id="xj" value="xingji">星际争霸</li>
	   </ul>   
	   
	    <script language="javascript">
			//获取"星际争霸"节点的value值
			var xjElement=document.getElementById("xj");
			alert(xjElement.getAttribute("value"));
			
			
	    </script>
	</body>


</html>

3.设置属性节点
setAttribute()
将给定元素节点添加一个新的属性值或改变它的现有属性的值。
   element.setAttribute(attributeName,attributeValue);
属性的名字和值必须以字符串的形式传递给此方法
如果这个属性已经存在,它的值将被刷新;
如果不存在,setAttribute()方法将先创建它再为其赋值。

例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title>js测试</title>
		
	</head>
	<body> 
	   
	   您喜欢的城市:<br> 
	   <ul>
	   	 <li id="bj" value="beijing">北京</li>
		 <li id="sh" value="shanghai">上海</li>
		 <li id="cq" value="chongqing">重庆</li>
	   </ul>
	  
	  您喜欢的游戏:<br> 
	   <ul>
	   	 <li id="fk" value="fangkong">反恐</li>
		 <li id="ms" value="moshou">魔兽</li>
		 <li id="xj" value="xingji">星际争霸</li>
	   </ul>   
	   
	    <script language="javascript">
			//获取"星际争霸"节点,并增加一个name属性
			var xjElement=document.getElementById("xj");
			
			//获取当前属性
			alert(xjElement.getAttribute("name"));
			
			//增加属性
			xjElement.setAttribute("name","xingjizhengba");
			
			//获取增加后的属性
			alert(xjElement.getAttribute("name"));


	    </script>
	</body>


</html>

4.创建新元素节点
createElement()
按照给定的标签名创建一个新的元素节点。方法只有一个参数:将被创建的元素的名字,是一个字符串.
  var reference = document.createElement(element);
方法的返回值:是一个指向新建节点的引用指针。返回值是一个元素节点,所以它的 nodeType 属性值等于 1。
新元素节点不会自动添加到文档里,新节点没有 nodeParent 属性,它只是一个存在于 JavaScript 上下文的对象.
var pElement = document.createElement("p");

5.创建文本节点
createTextNode()
创建一个包含着给定文本的新文本节点。这个方法的返回值是一个指向新建文本节点引用指针。
  var textNode = document.createTextNode(text);
方法只有一个参数:新建文本节点所包含的文本字符串
方法的返回值:是一个指向新建节点的引用指针。它是一个文本节点,所以它的 nodeType 属性等于 3.
新元素节点不会自动添加到文档里,新节点没有 nodeParent 属性
var pElementText=document.createElement("li");
var textElement=document.createTextNode("南京");
pElementText.appendChild(textElement);

6.插入节点1
appendChild()
为给定元素增加一个子节点:                                   
   var newreference = element.appendChild(newChild).              
   给定子节点 newChild 将成为给定元素节点 element 的最后一个子节点。
方法的返回值是一个指向新增子节点的引用指针。
该方法通常与 createElement() createTextNode() 配合使用
新节点可以被追加给文档中的任何一个元素

4和5、6综合例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title>js测试</title>
		
	</head>
	<body> 
	   
	   您喜欢的城市:<br> 
	   <ul id="city">
	   	 <li id="bj" value="beijing">北京</li>
		 <li id="sh" value="shanghai">上海</li>
		 <li id="cq" value="chongqing">重庆</li>
	   </ul>
	  
	  您喜欢的游戏:<br> 
	   <ul>
	   	 <li id="fk" value="fangkong">反恐</li>
		 <li id="ms" value="moshou">魔兽</li>
		 <li id="xj" value="xingji">星际争霸</li>
	   </ul>
	   
	    <script language="javascript">
			//增加城市节点<li id="tj" value="tianjing">天津</li>
			
			//<li></li>
			var liElement=document.createElement("li");
			
			//设置属性<li id="tj" value="tianjing"></li>
			liElement.setAttribute("id","tj");
			liElement.setAttribute("value","tianjing");
			
			//创建文本节点"天津"
			var textElement=document.createTextNode("天津");
			
			//增加文本节点"天津"到<li id="tj" value="tianjing"></li>形成<li id="tj" value="tianjing">天津</li>
			liElement.appendChild(textElement);
			
			//获取父节点
			var cityElement=document.getElementById("city");
			
			//添加<li id="tj" value="tianjing">天津</li>到父节点下
			cityElement.appendChild(liElement);
			
	    </script>
	</body>


</html>

刷新界面后多出了一个"天津"节点,但是我们查看源代码,发现没有"天津"节点,原因是因为我们用过js动态添加的代码通过浏览器的源码查看器是查看不出来的。如果是jsp转过来的是可以看到的。

4和5、6例子2:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title>js测试</title>
		
	</head>
	<body> 
	   
	     <select name="edu" id="edu">
	   	  <option value="博士">博士^^^^^</option>
		  <option value="硕士">硕士^^^^^</option>
		  <option value="本科">本科^^^^^</option>
		  <option value="幼儿园">幼儿园^^^^^</option>
	   </select>


	    <script language="javascript">
			//增加节点<option value="大专">大专^^^^^</option>
			
			//创建<option value="大专">大专^^^^^</option>
			var optionElement=document.createElement("option");
			optionElement.setAttribute("value","大专");
			var textElement=document.createTextNode("大专^^^^^");
			optionElement.appendChild(textElement);
			
			//获取id="edu"节点
			var eduElement=document.getElementById("edu");
			
			//添加
			eduElement.appendChild(optionElement);
			
	    </script>
	</body>


</html>

7.插入节点2
insertBefore()
把一个给定节点插入到一个给定元素节点的给定子节点的前面
  var reference =  element.insertBefore(newNode,targetNode);
  节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面.
节点 targetNode 必须是 element 元素的一个子节点。
该方法通常与 createElement() 和 createTextNode() 配合使用

例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title>js测试</title>
		
	</head>
	<body> 
	   
	     <ul>
	   	 <li id="bj" name="beijing">北京</li>
		 <li id="sh" name="shanghai">上海</li>
		 <li id="cq" name="chongqing">重庆</li>
	   </ul>


	    <script language="javascript">
			// 插入新的节点 <li id="tj" name="tianjin">天津</li>
			// 在 <li id="cq" name="chongqing">重庆</li>的前面
			
			//创建 <li id="tj" name="tianjin">天津</li>
			var tjElement=document.createElement("li");
			tjElement.setAttribute("id","tj");
			tjElement.setAttribute("value","tianjing");
			var textElement=document.createTextNode("天津");
			tjElement.appendChild(textElement);
			  
			//获取重庆 <li id="cq" name="chongqing">重庆</li>
			 var cqElement=document.getElementById("cq");
			  
			//获取重庆节点的父节点
			  var ulElement=cqElement.parentNode;
			
			//插入到重庆前
			 ulElement.insertBefore(tjElement,cqElement);
			
	    </script>
	</body>


</html>

8.插入节点3
DOM 没有提供 insertAfter() 方法
我们用自己的实现方式去实现类似于insertAfter() 的方法

例子1:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title>js测试</title>
		
	</head>
	<body> 
	   
	     <ul>
	   	 <li id="bj" name="beijing">北京</li>
		 <li id="sh" name="shanghai">上海</li>
		 <li id="cq" name="chongqing">重庆</li>
	   </ul>


	    <script language="javascript">
			// 插入新的节点 <li id="tj" name="tianjin">天津</li>
			// 在 <li id="cq" name="chongqing">上海</li>的后面
			
			//创建 <li id="tj" name="tianjin">天津</li>
			var tjElement=document.createElement("li");
			tjElement.setAttribute("id","tj");
			tjElement.setAttribute("value","tianjing");
			var textElement=document.createTextNode("天津");
			tjElement.appendChild(textElement);
			  
			//获取上海 <li id="cq" name="chongqing">重庆</li>
			 var shElement=document.getElementById("sh");
			  
			//获取上海节点的下一个兄弟节点重庆
			  var nextElement=shElement.nextSibling;
			
			//获取上海节点的父亲节点
			 var shParentElement=shElement.parentNode;
			 
			 //添加到上海节点的下一个兄弟节点重庆的前面
			 shParentElement.insertBefore(tjElement,nextElement);
			
	    </script>
	</body>


</html>

例子2:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title>js测试</title>
		
	</head>
	<body> 
	   
	     <ul> 
			 <li id="cq" name="chongqing">重庆</li>
			 <li id="bj" name="beijing">北京</li>
			 <li id="sh" name="shanghai">上海</li>
	     </ul>


	    <script language="javascript">
			// 插入新的节点 <li id="tj" name="tianjin">天津</li> 到<li id="sh" name="shanghai">上海</li>这个节点
			// 如上海节点是最后一个节点插入到该节点的<li id="sh" name="shanghai">上海</li>的后面,
			// 否则插入到该节点的前面
			
			//创建<li id="tj" name="tianjin">上海</li>节点
			var liElement=document.createElement("li");
			liElement.setAttribute("id","tj");
			liElement.setAttribute("name","tianjin");
			var textElement=document.createTextNode("天津");
			liElement.appendChild(textElement);
			
			//获取上海节点
			var shElement=document.getElementById("sh");
			
			//获取上海节点的父节点
			var shParentElement=shElement.parentNode;
			
			//获取上海节点的父节点中的最后一个子节点
			var lastChildParentElement=shParentElement.childNodes[5];
			
			//比对上海节点和上海节点的父节点中的最后一个子节点
			if(shElement == lastChildParentElement){
				//如果相等,表示上海节点是最后一个节点,此时插入上海节点的后面
				shParentElement.appendChild(liElement);
			}else{
				//如果不相等,表示上海节点不是最后一个节点,此时插入上海节点的前面
				shParentElement.insertBefore(liElement,shElement);
			}


	    </script>
	</body>


</html>

9.删除节点
removeChild()
从一个给定元素里删除一个子节点
   var reference = element.removeChild(node);
返回值是一个指向已被删除的子节点的引用指针。
某个节点被removeChild()方法删除时,这个节点所包含的所有子节点将同时被删除。

例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title>js测试</title>
		
	</head>
	<body> 
	   
	     <ul> 
			 <li id="cq" name="chongqing">重庆</li>
			 <li id="bj" name="beijing">北京</li>
			 <li id="sh" name="shanghai">上海</li>
	     </ul>


	    <script language="javascript">
			//删除<ul id="city"> 下<li id="bj" name="beijing">北京</li>这个节点</ul>
			
			//获取子节点
			var bjElement=document.getElementById("bj");
			
			//获取父节点
			var cityElement=bjElement.parentNode;
			
			//删除
			var oldElement=cityElement.removeChild(bjElement);
			
			//测试
			alert("被删除的节点的id是:"+oldElement.getAttribute("id"));
			
	    </script>
	</body>


</html>

10.遍历节点树

(1)遍历
ChildNodes:返回一个数组,这个数组由给定元素节点的子节点构成:
var nodeList = node.childNodes;
文本节点和属性节点都不可能再包含任何子节点,所以它们的 ChildNodes 属性永远会返回一个空数组。
如果想知道某个元素有没有子节点,可以用 hasChildNodes 方法。
如果想知道某个元素有多少个子节点,可以用 childNodes 数组的 length 属性。
childNodes 属性是一个只读属性。

(2)获取第一个子节点
firstChild:该属性返回一个给定元素节点的第一个子节点,返回这个节点对象的指针。
    var reference = node.firstChild;
文本节点和属性节点都不可能包含任何子节点,所以它们的 firstChild 属性永远会返回 null。
某个元素的 firstChild 属性等价于这个元素的 childNodes 节点集合中的第一个节点,即:
  var reference = node.ChildNodes[0];
firstChild 属性是一个只读属性。

(2)获取最后一个子节点
lastChild:对应 firstChild 的一个属性。
nextSibling: 返回一个给定节点的下一个兄弟节点。
parentNode:返回一个给定节点的父节点。
parentNode 属性返回的节点永远是一个元素节点,因为只有元素节点才有可能包含子节点。
document 节点的没有父节点。
previousSibling:返回一个给定节点的上一个兄弟节点

例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title>js测试</title>
		
	</head>
	<body> 
	   
	     <ul> 
			 <li id="cq" name="chongqing">重庆</li>
			 <li id="bj" name="beijing">北京</li>
			 <li id="sh" name="shanghai">上海</li>
	     </ul>


	    <script language="javascript">
			//遍历节点树并输出每个节点的名称
			
			//获取ul节点
			var ulELement=document.getElementsByTagName("ul");
			
			//获取ul节点的节点树
			var ulChildNodes=ulELement[0].childNodes;
			
			//遍历
			for(var i=0;i< ulChildNodes.length;i++){
				alert(ulChildNodes[i].nodeName);
			}
			
			
	    </script>
	</body>


</html>

11.innerHTML属性
浏览器几乎都支持该属性,但不是 DOM 标准的组成部分。
innerHTML 属性可以用来读,写某给定元素里的 HTML 内容。

例子:(在div层中插入 <h1>今天</h1>)
老方法:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title>js测试</title>
		
	</head>
	<body> 
	   
	    <div id="city"></div>


	    <script language="javascript">
			//在div层中插入 <h1>今天</h1>
			
			//创建<h1>今天</h1>
			var jintianElement=document.createElement("h1");
			var textElement=document.createTextNode("今天");
			jintianElement.appendChild(textElement);
			
			//获取div节点
			var divElement=document.getElementById("city");
			
			//添加
			divElement.appendChild(jintianElement);
			
	    </script>
	</body>


</html>

使用innerHTML的方法
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title>js测试</title>
		
	</head>
	<body> 
	   
	    <div id="city"></div>


	    <script language="javascript">
			//在div层中插入 <h1>今天</h1>
			document.getElementById("city").innerHTML="<h1>今天</h1>";
	    </script>
	</body>


</html>
转载请注明出处:http://blog.csdn.net/acmman/article/details/47946639
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

光仔December

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值