HTML DOM previousElementSibling 属性 | DOM 对象:HTML DOM 元素对象

返回到:DOM 对象:HTML DOM 元素对象

定义和用法

previousElementSibling 属性返回指定元素的前一个兄弟元素(相同节点树层中的前一个元素节点)。

previousSibling 属性与 previousElementSibling 属性的差别:

  • previousSibling 属性返回元素节点之前的兄弟节点(包括文本节点、注释节点);
  • previousElementSibling 属性只返回元素节点之前的兄弟元素节点(不包括文本节点、注释节点);

previousElementSibling 属性为只读属性。

提示: 使用 nextElementSibling 属性返回指定元素的下一个兄弟元素。

提示: 使用 children 属性返回指定元素的任何子元素。

浏览器支持

属性谷歌IE火狐苹果opera
previousElementSibling2.09.03.54.010.0

语法

node.previousElementSibling 

技术细节

返回值:Node 对象,表示元素的前一个兄弟元素,如果没有前一个兄弟元素则返回 null。
DOM 版本DOM 3

实例

返回上一个列表选项的 HTML 内容:

<!DOCTYPE html>
<html>
	<title>Web176教程网(web176.com)</title>
<body>

<p>实例列表:</p>

<ul>
  <li id="item1">咖啡 (第一项)</li>
  <li id="item2">西瓜 (第二项)</li>
</ul>

<p>点击以下按钮,获取列表中第二个 li 元素节点之前的兄弟元素的内容。</p>

<button onclick="myFunction()">点我</button>

<p><strong>注意:</strong> IE8 及以下版本不支持 previousElementSibling 属性。</p>

<p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementById("item2").previousElementSibling.innerHTML; 
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

作者:terry,如若转载,请注明出处:https://www.web176.com/javascriptbook/domtips/4503.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2021年12月10日 下午5:50
下一篇 2021年12月14日 上午10:45

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注