本文主要給大家介紹JS如何獲取節(jié)點(diǎn)及兼容性封裝，希望對(duì)需要的朋友有所幫助！

節(jié)點(diǎn)

網(wǎng)頁(yè)內(nèi)容是由標(biāo)簽組成的（不完全正確）
網(wǎng)頁(yè)的內(nèi)容是由節(jié)點(diǎn)組成的
元素節(jié)點(diǎn) 屬性節(jié)點(diǎn) 文本節(jié)點(diǎn) 注釋節(jié)點(diǎn) 文檔節(jié)點(diǎn)
節(jié)點(diǎn)三要素

• 節(jié)點(diǎn)類型 ：nodeType
• 節(jié)點(diǎn)名稱 ： nodeName
• 節(jié)點(diǎn)值 ：nodeValue

			節(jié)點(diǎn)類型（nodeType）			節(jié)點(diǎn)名稱（ nodeName）		節(jié)點(diǎn)值（nodeValue） 元素節(jié)點(diǎn)				1						標(biāo)簽名大寫(xiě)						null屬性節(jié)點(diǎn)				2						屬性名							屬性值 文本節(jié)點(diǎn)				3						#text							文本 注釋節(jié)點(diǎn)				8						#comment						注釋內(nèi)容 文檔節(jié)點(diǎn)				9						#document						null

獲取父節(jié)點(diǎn)

獲取父節(jié)點(diǎn) ：子元素.parentNode

獲取子元素

		<div id = "box"> 			<!--宮崎駿--> 			<div>千與千尋</div> 			<div id="box2">哈兒的移動(dòng)城堡</div> 			龍貓 			<div>懸崖上的金魚(yú)姬</div> 		</div>

var box2 = document.getElementById("box2");console.log(box2.parentNode);

獲取的父節(jié)點(diǎn)一定是元素節(jié)點(diǎn)（只有元素才會(huì)有子節(jié)點(diǎn)）

添加子元素到頁(yè)面中（父元素中）父元素.appendChild(子元素)

獲取所有子節(jié)點(diǎn)

		<div id="box" style="width: 100px; height: 100px;"> 			<div id="box1" style="background-color: lightblue;">千與千尋</div> 			<div id="box2">哈爾的移動(dòng)城堡</div> 		</div> 		<script type="text/javascript"> 			var box =  document.getElementById("box") 			console.log(box.chilNodes); 		</script>

1.兄弟元素和兄弟節(jié)點(diǎn)

獲取兄弟節(jié)點(diǎn)

<div id = "box"> 			<!--宮崎駿--> 			<div>千與千尋</div> 			<div id="box2">哈兒的移動(dòng)城堡</div> 			龍貓 			<div>懸崖上的金魚(yú)姬</div> 		</div>

獲取元素：

var box = document.getElementById("box");var box2 = document.getElementById("box2");

上一個(gè)節(jié)點(diǎn)

console.log(box2.previousSibling);  // 文本節(jié)點(diǎn)

下一個(gè)節(jié)點(diǎn)

console.log(box2.nextSibling);  // 文本節(jié)點(diǎn)

獲取兄弟元素

上一個(gè)元素

 console.log(box2.previousElementSibling);

下一個(gè)元素

console.log(box2.nextElementSibling);

IE8不支持獲取兄弟元素的操作，執(zhí)行得到的undefined，而且 在IE8里面沒(méi)有任何替代方案
IE8要獲取兄弟元素 智能通過(guò)節(jié)點(diǎn)

獲取上一個(gè)兄弟元素的封裝

@param ele ：需要查找的目標(biāo)封裝
@return node：返回的是一個(gè)元素節(jié)點(diǎn)

 	function getPreviousElement(ele) {             // 能力檢測(cè)             if(ele.previousElementSibling)  {  // 谷歌火狐                 return ele.previousElementSibling;             } else {  // IE8                 // 獲取上一個(gè)節(jié)點(diǎn)  :  null  元素  文本  注釋                 var node = ele.previousSibling;                              // 循環(huán)次數(shù)不確定               // 1. node必須存在, 不是null,  2. node不是元素節(jié)點(diǎn)               while(node != null && node.nodeType != 1) {                  node =  node.previousSibling              }               // node == null  或者  node.nodeType == 1               return node;             }         }          console.log(getPreviousElement(li2));

2.獲取第一個(gè)子節(jié)點(diǎn)和子元素

獲取第一個(gè)節(jié)點(diǎn)和子元素

獲取第一個(gè)子節(jié)點(diǎn) ：父元素.firstChild
獲取第一個(gè)子元素 ：父元素.firstElementChild

var box = document.getElementById("box");console.log(box.firstChild);console.log(box.firstElementChild);

IE8無(wú)法執(zhí)行元素的操作

獲取第一個(gè)子元素的兼容性封裝

			function getFirstElementChild(ele) {                 if (ele.firstElementChild != undefined) {                     return ele.firstElementChild;                 } else {                     var nodeFirst = ele.firstChild;                     while (nodeFirst && nodeFirst.nodeType == 1) {                         nodeFirst = nodeFirst.nextSibling;                     }                     return nodeFirst;                 }             }             console.log(ul.firstElementChild);

3.獲取最后一個(gè)子節(jié)點(diǎn)和子元素

獲取最后一個(gè)子節(jié)點(diǎn)和子元素

獲取最后一個(gè)子節(jié)點(diǎn) ：父元素.lastChild
獲取最后一個(gè)子元素 ：父元素.lastElementChild

var box = document.getElementById("box");console.log(box.lastChild);console.log(box.lastElementChild);

獲取最后一個(gè)子元素的兼容性封裝

        function firstElement(ele) {             if (ele.firstElementChild) {//谷歌和火狐                 return ele.firstElementChild;             }             else {//IE8                 var node = ele.firstChild;                 while (node != null && node.nodeType != 1) {                     node = node.nextSibling;                 }                 return node;             }          }         console.log(firstElement(ul))

4.克隆節(jié)點(diǎn)

克隆節(jié)點(diǎn) ：元素.cloneNode(參數(shù))
參數(shù)：
有參數(shù)時(shí)：

• 如果參數(shù)是true，表示深克?。?能夠克隆這個(gè)標(biāo)簽以及標(biāo)簽里面所有的內(nèi)容。

• 如果參數(shù)是false，表示淺克?。褐荒芸寺‘?dāng)前這個(gè)標(biāo)簽，不會(huì)克隆這個(gè)標(biāo)簽里面的內(nèi)容。

沒(méi)有參數(shù)，默認(rèn)是false。

<div id="box">      I'm a big box       <h1>我是標(biāo)題</h1>  </div>

var box = document.getElementById("box");var Newbox = box.cloneNode(true)console.log(New);

• 克隆節(jié)點(diǎn)只會(huì)在內(nèi)存中克隆一份, 不會(huì)添加到頁(yè)面上 只能手動(dòng)添加

• 克隆huibaid也克隆過(guò)去

為了保持頁(yè)面id的唯一性，需要修改克隆元素的id

Newbox.id = "Newbox"

淘寶案例，隱藏二維碼

<!DOCTYPE html> <html> 	<head> 		<meta charset="utf-8" /> 		<title>關(guān)閉二維碼</title> 		<style type="text/css"> 			#box{ 				width: 94px; 				height: 92px; 				margin: 30px auto; 				position: relative; 			} 			#x{ 				width: 14px; 				height: 14px; 				line-height: 14px; 				border: 1px solid #D9D9D9; 				color: #D6D6D6; 				text-align: center; 				position: absolute;             	top: 0;             	left: -15px; 			} 			#img{ 				width: 76px; 				height: 90px; 				background-image: url(img/erweima.png); 			} 		</style> 	</head> 	<body> 		<div id="box"> 			<div id="x">x</div> 			<div id="img"></div> 		</div> 		 		<script type="text/javascript"> 			var x = document.getElementById("x") 			x.onclick = function(){ 				this.parentNode.style.display = 'none'; 			} 		</script> 	</body> </html>