文章导航

previousElementSibling 属性

2018-11-8 14:53| 作者: admin| 查看: 53| 评论: 0|来自: 蚂蚁部落

previousElementSibling可以获取节点紧邻的上一个同级元素节点。

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

(1).previous:前一个。

(2).element:元素。

(3).sibling:兄弟。

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

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

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

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

如果要获取的元素节点不存在,那么此属性返回null。

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

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

语法结构:

[JavaScript] 纯文本查看 复制代码
prevElemNode = node.previousElementSibling

浏览器兼容:

(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>
<script> 
window.onload=function(){
  let oli = document.getElementsByTagName("li")[1];
  let oshow = document.getElementById("show");
  let previousEleLi = oli.previousElementSibling;
  oshow.innerHTML = previousEleLi.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/201811/08/145453ycyz4csaghsds4gm.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

第二个li元素的上一个同级元素节点自然是第一个里元素。

然后将第一个li元素的内容写入到div中。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script> 
window.onload=function(){
  let oul = document.getElementsByTagName("ul")[0];
  let childNodes=oul.childNodes;
  let oshow = document.getElementById("show");
  console.log(childNodes[4].nodeType);
  let previousEleLi = childNodes[4].previousElementSibling;
  oshow.innerHTML = previousEleLi.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/201811/08/145525xour3qno9botm3b6.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

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

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

a:3:{s:3:\"pic\";s:43:\"portal/201811/08/145543efmjr4tgn1grkwmt.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

其实这种想法是错误的,难道只有元素节点才有紧邻的统计子节点吗,文本节点或者注释节点也是可以的。

这里只是给一些没有注意到这一点的朋友做一个提醒,或许能够避免一些不必要的错误。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部