Document (二)

最新推荐文章于 2024-09-24 19:41:35 发布

原创最新推荐文章于 2024-09-24 19:41:35 发布 · 277 阅读

CC 4.0 BY-SA版权

本文深入解析DOM树结构，包括父节点、子节点、同辈节点的概念及获取方法，节点属性的使用，以及如何检测子节点和属性。同时，详细介绍了DOM节点的插入、删除、替换、复制和移动操作，并附带示例代码。

父节点，子节点和同辈节点：
父节点：parentNode:
parentNode返回的永远都是一个节点，因为只有元素节点才有可能包含子节点。
document节点没有父节点。也就是文档节点没有父节点，也就是HTML
子节点：childNode：
childNodes，获取指定节点的所有子节点。其实上个例子已经使用了。
firstChild：指定第一个子节点。
lastChild：指定最后一个子节点。
同辈节点：
nextSibling：返回一个给定节点的下一个兄弟节点。
previousSibling：返回一个节点的上一个兄弟节点。

示例如下：
 <body>
  	<ul id="city">
    	<li id="bj" name="beijing">北京</li>
		<li id="tj" name="tianjin">天津</li>
    </ul>
	<p>你好</p><input type="text">
	<script type="text/javascript">
		//获取p标签的父，子，兄节点
		var p = document.getElementsByTagName("P")[0];
		alert(p.parentNode);//body
		alert(p.childNodes[0].nodeValue)//你好
		alert(p.previousSibling.nodeValue)//空格，说明空格也会作为一个节点
		alert(p.nextSibling.nodeName);//input。这里就没出现空格，就是input节点
	</script>
  </body>

节点属性：
节点属性attributes是Node接口定义的属性。
节点属性attributes就是节点的属性(特别是元素节点)的属性。
事实上，attributes中包含的是一个节点所有属性的集合。
attributes.getNameItem()和Element元素的getAttribute()方法很相似。

<body>
     <ul id="city">
    	<li id="bj" name="beijing">北京</li>
		<li id="tj" name="tianjin">天津</li>
    </ul>
	<script type="text/javascript">
		var bj = document.getElementById("bj");
		alert(bj.attributes[1].nodeValue);		
	</script>
  </body>

检测子节点和属性
查看是否有子节点：hasChildNodes();
查看是存在属性：hasAttributes();
即使节点中没有定义属性，其attributes属性还是有效的，而且长度是0。同样childNodes属性也是如此。
当你想知道某个节点是否包含子节点或属性时，使用hasChildNodes(),hasAttributes()。如果想知道包含多少个：attributes和childNodes属性。
在IE中不存在hasAttributes();方法。(不使用)

示例如下：
<body>
   	<input type="text" id="username" value="username">
	<p>
		明天休息
	</p>
	<script type="text/javascript">
//		var username = document.getElementById("username");
//		alert(username.hasChildNodes());//false
//		alert(username.hasAttribute());//无效果	
		
		var p = document.getElementsByTagName("p")[0];
		alert(p.hasChildNodes());//true
		
	</script>
  </body>

操作Dom节点数：
插入节点：
appendChild()方法。
insertBefore()方法。
没有insertAfter()方法。
删除节点：
removeChild()方法。
替换节点：
replaceChild()

示例
<body>
    <ul id="city">
    	<!--注意这里不要回车-->
	    <li id="bj" name="beijing">北京</li><li id="tj" name="tianjin">天津</li>
    </ul>
	<script type="text/javascript">
	//创建<li id="sh" name="shanghai">上海</li>节点，增加到天津节点的前面
//		var liElement = document.createElement("li");
//		liElement.appendChild(document.createTextNode("上海"));
//		liElement.setAttribute("id","sh");
//		liElement.setAttribute("name","shanghai");
//		liElement.insertBefore(document.getElementById("tj"));
//		document.getElementById("city").appendChild(liElement);
		
		//<li id="sh" name="shanghai">上海</li>节点插入北京节点的后面，没有insertAfter()方法。
		
		var liElement = document.createElement("li");
		liElement.appendChild(document.createTextNode("上海"));
		liElement.setAttribute("id","sh");
		liElement.setAttribute("name","shanghai");
		
		var bjElement = document.getElementById("bj")
		//得到兄弟节点
		var nextElement = bjElement.nextSibling;
		liElement.insertBefore(nextElement);
		//添加到city下面
		document.getElementById("city").appendChild(liElement);
		
		
		
	</script>
  </body>

复制和移动节点：
复制节点：cloneNode(boolean)方法，其中boolean参数是判读是否复制子节点。
移动节点：由三种方法组合完成：
查找节点：
getElementById();通过节点id属性，查找对应节点。
getElementsByName();通过节点名称，查找对应节点。
getElementsByTagName();通过节点名称，查找对应节点。
插入节点：
insertBefore()方法
appendChild()方法。
替换节点：
replaceChild()方法。

示例代码如下：
  <body>
  	<ul id="city">
    	<li id="bj" name="beijing">北京</li>
		<li id="tj" name="tianjin">天津</li>
    </ul>
	<ul id="game">
    	<li id="fk" name="fankong">反恐精英</li>
		<li id="xj" name="xingji">星际</li>
    </ul>
	<script type="text/javascript">
		//当点击北京节点，就和反恐精英替换
		document.getElementById("bj").onclick = function(){
			//得到北京节点
			var bjElement = document.getElementById("bj");
			//得到反恐精英
			var fkElemet = document.getElementById("fk");
			//这里也可以:this.parentNode.replaceChild(fkElemet,bjElement);
			bjElement.parentNode.replaceChild(fkElemet,bjElement);
		}		
	</script>
  </body>
复制案例：
<body>
  		<input type="button" id="login" value="登陆">
		<p>
			按钮来这：
		</p>
		<script type="text/javascript">
			document.getElementById("login").onclick = function(){
				
				var loginElement = document.getElementById("login");
				
				//也可以写成:var copy = this.cloneNode(true);
				var copy = loginElement.cloneNode(true);
				
				var pElemet = document.getElementsByTagName("p")[0];
				pElemet.appendChild(copy);
			}
		</script>
  </body>