JS 节点属性和Element属性

最新推荐文章于 2024-04-18 17:50:16 发布

凌冰_

最新推荐文章于 2024-04-18 17:50:16 发布

阅读量268

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/hlx20080808/article/details/108000104

版权

JS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

节点属性

parentNode	返回节点的父节点
childNodes	返回子节点集合，childNodes[i]
firstChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastChild	返回节点的最后一个子节点
nextSibling	下一个节点
previousSibling	上一个节点

Element属性

firstElementChild	返回节点的第一个子节点
lastElementChild	返回节点的最后一个子节点
nextElementSibling	下一个节点
previousElementSibling	上一个节点

案例：

<!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>
		<p>mike</p>
	</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>