HTML DOM element.nextElementSibling属性

最新推荐文章于 2025-03-10 23:52:25 发布

码农的N次方

最新推荐文章于 2025-03-10 23:52:25 发布

阅读量4k

点赞数 2

分类专栏： web前端，ES5 文章标签： html dom

web前端，ES5 专栏收录该内容

19 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>title</title>
	<style>
        *{margin:0;padding:0}
        li{width:30px;margin: 10px auto;list-style: none;}
    </style>
</head>
<body>
	<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
</ul>
</body>
</html>
<script type="text/javascript">
	var aLi=document.getElementsByTagName('li');
	var j=0;
	for(var i=0;i<aLi.length;i++){
		aLi[i].index=i;
			(function(index){
				aLi[i].οnmοuseοver=function(){
				this.style.color="red";
				if (index<3) {
					this.nextElementSibling.style.color="green";
				}
				alert(index+1);
			};
			
		})(i);
	};
</script>

HTML DOM element.nextElementSibling属性; 返回指定元素之后的下一个兄弟元素

使用nextElementSibling属性返回指定元素之后的下一个兄弟元素，（即：相同节点树层中的下一个元素节点）。

nextSibling属性与nextElementSibling属性的差别：