您的位置:首页> 前端教程> JS教程
文章导航

JavaScript nextElementSibling 属性

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

nextElementSibling 属性返回当前节点的下一个兄弟元素节点,只读属性。

为了便于记忆和理解,nextElementSibling 可以分解成三个单词:

(1).next:下一个。

(2).element:元素。

(3).sibling:兄弟。

由此可以得出,此属性返回的节点必须要满足三个条件:

(1).必须是元素节点。

(2).必须是同级节点。

(3).必须是紧邻的下一个节点。

如果不存在同时满足上述条件的节点,那么此属性返回 null。

功能与 nextSibling 属性类似,唯一的不同是:

nextSibling 没有对节点的类型做限定,而 nextElementSibling 限定必须是元素节点。

语法结构:

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

浏览器支持:

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

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

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

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

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

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

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
ul {
  width :150px;
  list-style-type: none;
  border: 2px dotted green;
  padding-left:10px
}
ul li {
  height :25px;
  line-height :25px;
  font-size :12px;
  padding: 0;
}
#show {
  width :160px;
  border: 2px dotted green;
  text-align: center;
  font-size: 12px;
}
</style>
<script> 
window.onload = ()=> {
  let oLi = document.getElementsByTagName("li")[1];
  let oShow = document.getElementById("show");
  let nextLi = oLi.nextElementSibling;
  oShow.innerHTML = nextLi.innerHTML;
}
</script>
</head>
<body>
  <ul>
    <li>蚂蚁部落一</li>
    <li>蚂蚁部落二</li>
    <li>蚂蚁部落三</li>
    <li>蚂蚁部落四</li>
    <li>蚂蚁部落五</li>
  </ul>
  <div id="show"></div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/202003/28/132732ekh7d7rjsjf1asnh.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

对上述代码进行一下分析:

(1).li 元素在集合中的索引位置从 0 开始计算。

(2).于是,let oLi = document.getElementsByTagName("li")[1]获取第二个 li 元素。

(3).那么,第二个 li 元素的下一个元素节点就是第三个 li 元素。

(4).最后将文本"蚂蚁部落三" 写入 div 元素。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
ul {
  width :150px;
  list-style-type: none;
  border: 2px dotted green;
  padding-left:10px
}
ul li {
  height :25px;
  line-height :25px;
  font-size :12px;
  padding: 0;
}
#show {
  width :160px;
  border: 2px dotted green;
  text-align: center;
  font-size: 12px;
}
</style>
<script> 
window.onload= ()=> {
  let oUl = document.getElementsByTagName("ul")[0];
  let childNodes=oUl.childNodes;
  let oShow = document.getElementById("show");
  console.log(childNodes[4].nodeType);
  let nextEleLi = childNodes[4].nextElementSibling;
  oShow.innerHTML = nextEleLi.innerHTML;
}
</script>
</head>
<body>
<ul>
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
  <li>蚂蚁部落四</li>
  <li>蚂蚁部落五</li>
</ul>
<div id="show"></div>
</body>
</html>

谷歌开发者工具控制台打印效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/202003/28/132800qrqz7z32c22nnn2f.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

控制台打印内容是 3,说明 ul 元素下索引值为 4 的子节点是文本节点。

在标准浏览器中,空格与换行被解读为文本节点。

再来看页面 div 中显示的内容,截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/202003/28/132809qao0l8bygl7dbj0a.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

很多朋友下意识的认为 nextElementSibling 等类似属性的引用者总是元素节点对象。

这种想法是错误的,不仅元素节点才有紧邻的同级节点,文本节点或注释节点也可以有。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部