JS 节点属性和Element属性

短命女 2023-10-05 08:23 30阅读 0赞

**节点属性**

<table> 
 <tbody> 
 <tr> 
 <td style="border-color:#FFFFFF;text-align:center;vertical-align:middle;width:216pt;"> parentNode </td> 
 <td style="border-color:#FFFFFF;vertical-align:middle;"> 返回节点的父节点 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#FFFFFF;text-align:center;vertical-align:middle;width:216pt;"> childNodes </td> 
 <td style="border-color:#FFFFFF;vertical-align:middle;"> 返回子节点集合，childNodes[i] </td> 
 </tr> 
 <tr> 
 <td style="border-color:#FFFFFF;text-align:center;vertical-align:middle;width:216pt;"> firstChild </td> 
 <td style="border-color:#FFFFFF;vertical-align:middle;"> 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#FFFFFF;text-align:center;vertical-align:middle;width:216pt;"> lastChild </td> 
 <td style="border-color:#FFFFFF;vertical-align:middle;"> 返回节点的最后一个子节点 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#FFFFFF;text-align:center;vertical-align:middle;width:216pt;"> nextSibling </td> 
 <td style="border-color:#FFFFFF;vertical-align:middle;"> 下一个节点 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#FFFFFF;text-align:center;vertical-align:middle;width:216pt;"> previousSibling </td> 
 <td style="border-color:#FFFFFF;vertical-align:middle;"> 上一个节点 </td> 
 </tr> 
 </tbody> 
</table>

**Element****属性**

<table> 
 <tbody> 
 <tr> 
 <td style="border-color:#FFFFFF;text-align:justify;vertical-align:middle;width:267pt;"> &nbsp;&nbsp;&nbsp; firstElementChild </td> 
 <td style="border-color:#FFFFFF;text-align:justify;vertical-align:middle;"> 返回节点的第一个子节点 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#FFFFFF;text-align:center;vertical-align:middle;width:267pt;"> lastElementChild </td> 
 <td style="border-color:#FFFFFF;vertical-align:middle;"> 返回节点的最后一个子节点 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#FFFFFF;text-align:center;vertical-align:middle;width:267pt;"> nextElementSibling </td> 
 <td style="border-color:#FFFFFF;vertical-align:middle;"> 下一个节点 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#FFFFFF;text-align:center;vertical-align:middle;width:267pt;"> previousElementSibling </td> 
 <td style="border-color:#FFFFFF;vertical-align:middle;"> 上一个节点 </td> 
 </tr> 
 </tbody> 
</table>

#### 案例： ####

<!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8">
 		<title></title>
 	</head>
 	<body>
 		<h1>hello</h1>
 		<ul id="ul">
 			<li id="a1">电风扇<a href="javascript:void(0)">隐藏</a></li>
 			<li>蓝宝<a href="javascript:void(0)">隐藏</a></li>
 			<li>刘芳<a href="javascript:void(0)">隐藏</a></li>
 			<li>杨树<a href="javascript:void(0)">隐藏</a></li>
 			<li id="a5">张飞<a href="javascript:void(0)">隐藏</a></li>
 		</ul>
 		mike
 	</body>
 </html>
 <script type="text/javascript">
 	 window.onload = function () {
 		 // fun1()
 // fun2();
 // fun3();
 		 // fun4();
 		 fun5();
 }
 
 	//parentNode
 	function fun1(){
 		var ul = document.getElementById("ul");
 		 //取出所有的a标签
 		var aA = ul.getElementsByTagName("a");
 		for (var i = 0; i < aA.length; i++) {
 		 //给每个a标签注册事件
 		 aA[i].onclick = function () {
 		 //this是当前元素,parentNode 是单数，
 				//因为每个节点，只有一个父节点！有多个子节点
 		 this.parentNode.style.display = "none";
 		 }
 		}
 	}
 	
 	//childNodes既包括元素节点，又包括文本节点
 	function fun2(){
 		var ul = document.getElementById("ul");
 		for (var i = 0; i < ul.childNodes.length; i++) {
 			 //nodeType=1,元素节点
 //nodeType=3,文本节点(#text 空文本)
 			console.log(ul.childNodes[i].nodeName);
 			if(ul.childNodes[i].nodeType==1){
 				ul.childNodes[i].style.color="orchid";
 			}
 		}
 	}
 	
 	function fun3(){
 		var ul = document.getElementById("ul");
 		//children 只包括元素节点，不包括文本节点
 		for (var i = 0; i < ul.children.length; i++) {
 			console.log(ul.children[i].nodeName);
 			ul.children[i].style.color="red";
 		}
 	}
 		
 	//注意：firstChild和lastChild只能对单个节点就行操作,不能对节点数组进行操作;
 		//firstChild和lastChild弹出的是undefined？
 		function fun4(){
 			var ul=document.getElementById("ul");
 			console.log(ul.firstChild.nextSibling.innerHTML);
 			console.log(ul.lastChild.previousSibling.innerHTML);
 		}
 	//	问题主要是出自<ul id="a1">之后和</ul>之前的“回车”和“空格”字符，复现里面打印出的#text就是这些“回车”和“空格”字符，也称文本节点，它们才是真正意义上的firstChild和lastChild，而不是我们想要获取的li，所以debug中将这些空白字符去掉即可。
 	
 	//访问节点兼容问题
 	//Element属性:
 	 function fun5(){
 			var ul=document.getElementById("ul");
 			// console.log(ul.firstElementChild.innerHTML); //first
 			// console.log(ul.lastElementChild.innerHTML); //last
 			console.log(ul.nextElementSibling.innerHTML); //next ==>mike
 			console.log(ul.previousElementSibling.innerHTML); //previous ==>hello
 		}
 	
 		
 </script>

![20200814110131747.png][]

[20200814110131747.png]: https://img-blog.csdnimg.cn/20200814110131747.png