文章导航

JavaScript nextElementSibling

2019-1-13 10:59| 作者: admin| 查看: 1045| 评论: 0|来自: 蚂蚁部落

nextElementSibling属性返回当前节点的下一个兄弟元素节点,HTML5新增。

如果不存在一个这样的元素节点,则属性返回null。

考虑到低版本IE浏览器的兼容问题,很多时候,通过对nextSibling进行兼容性处理,以达到nextElementSibling属性相同的效果,相信未来此属性一定会得到广泛应用,此属性与nextSibling属性非常类似,在某些场景下甚至表现完全相同。

首先简单介绍一下两个属性之间的区别,属性的名称体现了两者的本质区别,nextElementSibling属性多了一个"element"限定,也就是说此属性返回的节点必须满足如下两个条件,首先必须是兄弟节点,第二个必须是元素节点;nextSibling返回下一个兄弟节点,没有"element"限定,可以是元素节点,也可以是文本或注释等节点,更加博爱宽容,但是很多时候宽容与博爱不但无用,甚至有害,这也是nextElementSibling属性的价值所在。

关于nextSibling属性基本用法可以参阅JavaScript nextSibling一章节。

语法结构:

[JavaScript] 纯文本查看 复制代码
elementNodeReference.nextElementSibling;

浏览器支持:

(1).IE9+浏览器支持此属性。

(2).edge浏览器支持此属性。

(3).谷歌浏览器支持此属性。

(4).opera浏览器支持此属性。

(5).火狐浏览器支持此属性。

(6).safria浏览器支持此属性。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
ul li{
  list-style-type:none;
  text-align:left;
  font-size:14px;
}
</style>
<script> 
window.onload=()=>{
  let li = document.getElementsByTagName("li")[1];
  let ant = document.getElementById("ant");
  let bottom = document.getElementById("bottom");
  let nextLi = li.nextElementSibling;
  ant.innerHTML = nextLi.innerHTML;
}
</script>
</head>
<body>
  <ul>
    <li>蚂蚁部落欢迎您的到来</li>
    <li>只有努力才会有美好的明</li>
    <li>没有人一开始就是高手,都是从菜鸟开始</li>
    <li>每一天都是新的需要好好珍惜</li>
    <li>怨天尤人是没有任何作用的</li>
    <li>今天你写代码了吗</li>
    <li>本站的url地址是www.softwhy.com</li>
  </ul>
  <div id="ant"></div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/13/110122ozk0zr113u3dh363.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).集合元素的索引从0开始,所以document.getElementsByTagName("li")[1]获取第二个li元素。

(2).那么第二个li元素的下一个兄弟元素节点自然是第三个li元素。

(3).最后,将第三个li元素的内容写入div。

可以看到nextElementSibling属性返回的一定是元素节点,这也正是它与nextSibling属性的本质区别。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
ul li{
  list-style-type:none;
  text-align:left;
  font-size:14px;
}
</style>
<script> 
window.onload=()=>{
  let li = document.getElementsByTagName("li")[1];
  let ant = document.getElementById("ant");
  let bottom = document.getElementById("bottom");
  let str="";
  li.nextElementSibling;
  li.nextSibling;
  str=str+"nextElementSibling:"+li.nextElementSibling.innerHTML+"<br>";
  str=str+"nextSibling:"+li.nextSibling.innerHTML
  ant.innerHTML = str;
}
</script>
</head>
<body>
  <ul>
    <li>蚂蚁部落一</li>
    <li>蚂蚁部落二</li><li>蚂蚁部落三</li>
    <li>蚂蚁部落四</li>
    <li>蚂蚁部落五</li>
    <li>蚂蚁部落六</li>
    <li>蚂蚁部落七</li>
  </ul>
  <div id="ant"></div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/13/110203yzxlan48lm1v2z4l.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码中,两个属性的作用完全相同,都可以返回第三个li元素。

当然我们知道两个属性是有差别的,再来看一段代码实例,演示了两者的区别:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
ul li{
  list-style-type:none;
  text-align:left;
  font-size:14px;
}
</style>
<script> 
window.onload=()=>{
  let li = document.getElementsByTagName("li")[1];
  let ant = document.getElementById("ant");
  let bottom = document.getElementById("bottom");
  let str="";
  li.nextElementSibling;
  li.nextSibling;
  str=str+"nextElementSibling返回元素类型"+li.nextElementSibling.nodeType+"<br>";
  str=str+"nextSibling返回元素类型"+li.nextSibling.nodeType
  ant.innerHTML = str;
}
</script>
</head>
<body>
  <ul>
    <li>蚂蚁部落欢迎您的到来</li>
    <li>只有努力才会有美好的明</li>
    <li>没有人一开始就是高手,都是从菜鸟开始</li>
    <li>每一天都是新的需要好好珍惜</li>
    <li>怨天尤人是没有任何作用的</li>
    <li>今天你写代码了吗</li>
    <li>本站的url地址是www.softwhy.com</li>
  </ul>
  <div id="ant"></div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/13/110237tcfezfmifmc0e5s5.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

特别说明:nodeType返回一个数字,用于表示节点的类型,1表示元素节点,3表示文本节点。

与前面的代码相比,唯一区别就是将第二个li与第三个li单独一行排列。

此时,两个属性的区别得以体现,nextSibling属性返回下一个兄弟节点,在标准浏览器中,会将空白和换行看做为本节点,第二个li元素后面紧邻的是空白和换行,所以返回文本节点;nextElementSibling返回下一个兄弟元素节点,那么会忽略第二个li后面的空白和换行,获取第三个li元素。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部