大家好,又见面了,我是你们的朋友全栈君。
对于nextSibling属性,在W3school中的定义为:
nextSibling 属性返回指定节点之后紧跟的节点,在相同的树层级中。
注意所返回的节点必须是与上一个节点是同级关系,且彼此之间不能有空格,否则将会返回:undefined
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css" media="screen">
</head>
<body>
<!-- <p id="p">this is a test project!</p> <p id="p2">this is a test project2.</p>-->
<ul>
<li id="a">hello</li>
<li id="b">world</li>
</ul>
<script type="text/javascript" src="scripts/test.js"></script>
</body>
</html>
test.js
window.onload=function(){
/* var a=document.getElementById("p");
a.style.color="black";*/
var a=document.getElementById("a").nextSibling.id;
alert(a);
}
返回结果如下图:
在此我把它改动一下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css" media="screen">
</head>
<body>
<!-- <p id="p">this is a test project!</p> <p id="p2">this is a test project2.</p>-->
<ul>
<li id="a">hello</li><li id="b">world</li>
</ul>
<script type="text/javascript" src="scripts/test.js"></script>
</body>
</html>
test.js
window.onload=function(){
/* var a=document.getElementById("p");
a.style.color="black";*/
var a=document.getElementById("a").nextSibling.id;
alert(a);
}
返回结果如下:
在此我得再提一次,我只是做了一次小小的改动,如下图将无序列表中的
- 元素之间的距离改了一下,将红色的部分缩进了一下。而返回的结果完全不同。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/158516.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...