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

JavaScript previousSibling

2018-9-30 13:40| 作者: admin| 查看: 1068| 评论: 0|来自: 蚂蚁部落

此属性可以获取指定元素紧邻的前一个节点。

特别说明,此属性对于元素前一个兄弟节点类型没有限制。

previousElementSibling属性与之不同,它限定前一个兄弟节点必须是元素节点。

关于previousElementSibling用法可以参阅JavaScript previousElementSibling属性一章节。

语法结构:

[JavaScript] 纯文本查看 复制代码
prevNode = elementNodeReference.previousSibling;

浏览器兼容:

(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 type="text/css">
*{
    margin:0px;
    padding:0px;
    border:0px;
}
body{font-size:12px}
#demo{
    overflow:hidden;
    width:280px;
}
#demo li{
    list-style-type:none;
    height:22px;
    text-align:left;
    text-indent:15px;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
  let oli = document.getElementsByTagName("li")[1];
  let odiv = document.getElementById("antzone");
  let previousNode = oli.previousSibling;
  odiv.innerHTML = previousNode.nodeName;
}
</script>
</head>
<body>
<div id="demo">
  <ul>
    <li>蚂蚁部落一</li>
    <li>蚂蚁部落二</li>
    <li>蚂蚁部落三</li>
    <li>蚂蚁部落四</li>
    <li>蚂蚁部落五</li>
  </ul>
</div>
<div id="antzone"></div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/30/134202uab77mrzt112mr57.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码会获取第二个li元素的前一个兄弟节点,有上面截图可以看到,是文本节点。

HTML代码部分截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/30/134214qrw2qzsql2xcwtyb.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

第二个li元素它紧邻的是空格,在JavaScript中,空格与换行会被认作文本节点。

代码修改如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
*{
    margin:0px;
    padding:0px;
    border:0px;
}
body{font-size:12px}
#demo{
    overflow:hidden;
    width:280px;
}
#demo li{
    list-style-type:none;
    height:22px;
    text-align:left;
    text-indent:15px;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
  let oli = document.getElementsByTagName("li")[1];
  let odiv = document.getElementById("antzone");
  let previousNode = oli.previousSibling;
  odiv.innerHTML = previousNode.nodeName;
}
</script>
</head>
<body>
<div id="demo">
  <ul>
    <li>蚂蚁部落一</li><li>蚂蚁部落二</li>
    <li>蚂蚁部落三</li>
    <li>蚂蚁部落四</li>
    <li>蚂蚁部落五</li>
  </ul>
</div>
<div id="antzone"></div>
</body>
</html>

将第二个li元素与第一个li元素紧挨起来,这样它的前面就没有空格或者换行这些文本节点。

它紧邻的前一个兄弟节点就是第一个li元素。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部