JavaScript獲取HTML DOM節點元素詳解(轉)

qingyezhu發表於2013-07-17
JavaScriptHTML

在Web運用程式特別是Web 2.0程式開發中，經常要獲取頁面中某個元素，然後更新該元素的樣式、內容等。如何獲取要更新的元素，是首先要處理的疑問。

51CTO推薦閱讀：JavaScript DOM文件遍歷實戰

令人欣慰的是，運用JavaScript獲取節點的要領有很多種，這裡基本做一下總結：

1. 通過頂層document節點獲取

◆document.getElementById(elementId) ：該要領 通過節點的ID，可以準確獲得須要 的元素，是比較基本快捷的要領 。如果頁面上含有多個相同id的節點，那麼只返回第一個節點。

如今，已經出現瞭如prototype、Mootools等多個JavaScript庫，它們提供了更簡便的要領 ：$(id)，引數仍然是節點的id。這個要領 可以看作是document.getElementById()的另外一種寫法，不過$()的功能更為強大，具體用法可以參考它們各自的API文件。

◆document.getElementsByName(elementName) ：該要領 是通過節點的name獲取節點，從名字可以看出，這個要領返回的不是一個節點元素，而是具有同樣名稱的節點陣列。然後，我們可以通過要獲取節點的某個屬性來迴圈判斷能不能為須要的節點。

例如：在HTML中checkbox和radio都是通過相同的name屬性值，來標識一個組內的元素。如果我們現在要獲取被選中的元素，首先獲取改組元素，然後迴圈判斷是節點的checked屬性值能不能 為true即可。

◆document.getElementsByTagName(tagName) ：該要領 是通過節點的Tag獲取節點，同樣該要領 也是返回一個陣列，例如：document.getElementsByTagName('A')將會返回頁面上所有超連結節點。在獲取節點之前，一般都是知道節點的型別的，所以運用該要領比較基本。

但是缺點也是顯而易見，那就是返回的陣列可能十分龐大，這樣就會浪費很多時間。那麼，這個要領是不是就沒有用處了呢？當然不是，這個要領和上面的兩個不同，它不是document節點的專有要領 ，還可以運用 其他的節點，下面將會提到。

2、通過父節點獲取

◆parentObj.firstChild ：如果節點為已知節點（parentObj）的第一個子節點就可以運用 這個要領 。這個屬性是可以遞迴運用的，也就是支援parentObj.firstChild.firstChild.firstChild...的形式，如此就可以獲得更深層次的節點。

◆parentObj.lastChild ：很顯然，這個屬性是獲取已知節點（parentObj）的最後一個子節點。與firstChild一樣，它也可以遞迴運用。在運用中，如果我們把二者結合起來，那麼將會達到更加令人興奮的效果，即：parentObj.firstChild.lastChild.lastChild。

◆parentObj.childNodes ：獲取已知節點的子節點陣列，然後可以通過迴圈或者索引找到須要的節點。留心：經測試發覺，在IE7上獲取的是直接子節點的陣列，而在Firefox2.0.0.11上獲取的是所有子節點即包括子節點的子節點。

◆parentObj.children ：獲取已知節點的直接子節點陣列。留心：經測試，在IE7上，和childNodes效果一樣，而Firefox2.0.0.11不支援。這也是為什麼我要運用和其他要領不同樣式的原由，因此不建議運用。

◆parentObj.getElementsByTagName(tagName) ：運用要領不再贅述，它返回已知節點的所有子節點中型別為指定值的子節點陣列。例如：parentObj.getElementsByTagName('A')返回已知的子節點中的所有超連結。

3、通過臨近節點獲取

◆neighbourNode.previousSibling ：獲取已知節點（neighbourNode）的前一個節點，這個屬性和前面的firstChild、lastChild一樣都似乎可以遞迴運用的。

◆neighbourNode.nextSibling ：獲取已知節點（neighbourNode）的下一個節點，同樣支援遞迴。

4、通過子節點獲取

◆childNode.parentNode ：獲取已知節點的父節點。

上面提到的要領 ，只是一些基本的要領 ，如果運用 了Prototype等JavaScript庫，可能還獲得其他不同的要領，例如通過節點的class獲取等等。不過，如果能夠靈活運用上面的各種要領 ，相信應該可以應付大部分的程式。

 

例子：

 

<html>
	<head>
			<title>innerHtml and outerHtml</title>
			<script type="text/javascript">
		 function load(){
			/*var dom = document.documentElement;
			node(dom);
			nodeChild(dom);
			//通過ID屬性查詢元素
			dom = document.getElementById("divID");
			node(dom);
			nodeChild(dom)
			dom = document.getElementById("spanID");
			node(dom);
			nodeChild(dom)
			
			nodeChild(document.body);
			
			nodeOther(document.getElementById("divID"));*/
			queryElementsTagName();
			
		}
		function node(dom){
			alert("name: " + dom.nodeName + " type:" + dom.nodeType + " firstChild: " + dom.firstChild.innerHTML + " lastChild: " + dom.lastChild.innerHTML );
		}
		function nodeChild(dom){
			var bodyChilds = dom.childNodes;
			var res = [];
			for(var i = 0,len = bodyChilds.length; i < len;i ++)
			{
				var bodyNode = bodyChilds[i];
				res.push(i + " -- " +bodyNode.nodeName);
			}
			alert(res);
		}
		
		function nodeOther(dom){
			//父節點，（上一個、下一個）兄弟節點，
			alert("parent: " + dom.parentNode.nodeName + " previousSiblingNode: " + dom.previousSibling.nodeName + " nextSiblingNode: " + dom.nextSibling.nodeName );
		}
		
		function queryElementsTagName(){
			var dom = document.getElementById("nav");
			var ul_list =dom.getElementsByTagName("li");
			var element_array = [];
			for(var i = 0,len = ul_list.length;i < len;i ++){
				element_array.push(ul_list[i].childNodes[0].innerHTML);
			}
			alert(element_array);
		}
		//建立元素
		function addLi(){
			//為Li新增一個子元素
			var ul = document.getElementById("nav");
			//建立一個li新元素
			var newChild = document.createElement("li");
			//建立一個a新元素
			var newLink = document.createElement("a");
			//建立一個Text節點
			var newText = document.createTextNode("new Li");
			//將Text新增到a元素節點中
			newLink.appendChild(newText);
			//給a元素節點設定屬性href和內容
			newLink.setAttribute("href","#");
			//將新的a元素節點新增到li元素節點中
			newChild.appendChild(newLink);
			//將新的li元素節點新增到ul元素節點裡
			ul.appendChild(newChild);
		}
		
		function removeLi(){
			var ul = document.getElementById("nav");
			//刪除ul中的最後一個
			ul.removeChild(ul.lastChild);
			//刪除li中的最後一個
			//var ul_list = ul.getElementsByTagName("li");
			//ul.removeChild(ul_list[ul_list.length - 1]);
		}
			</script>
	</head>
	<body onload="load()">
		<div>
			<label>welcome </label>
			<div id="divID">
				World!
				<span id="spanID">
				Hello!
			</span>
			</div>
			<span>haha</span>
		</div>	
<div id="menu"> 
    <h1>我的導航條</h1>            
    <ul id="nav"> 
       <li><a href="#">HOME</a></li> 
       <li><a href="#">(X)Html / Css</a></li> 
       <li><a href="#">Ajax / RIA</a></li> 
       <li><a href="#">GoF</a></li> 
       <li><a href="#">JavaScript</a></li> 
       <li><a href="#">JavaWeb</a></li> 
       <li><a href="#">jQuery</a></li> 
       <li><a href="#">MooTools</a></li> 
       <li><a href="#">Python</a></li> 
       <li><a href="#">Resources</a></li> 
    </ul> 
	<button onclick="addLi()">Add</button>
	<button onclick="removeLi()">Del</button>
	
</div>  
	</body>
</html>

 

 

 

相關文章