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

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

定义和用法

nextElementSibling 属性返回指定元素之后的下一个兄弟元素(相同节点树层中的下一个元素节点)。

nextSibling 属性与 nextElementSibling 属性的差别:

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

nextElementSibling属性为只读属性。

提示: 使用 previousElementSibling 属性返回指定元素的前一个元素。

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

浏览器支持

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

语法

node.nextElementSibling

技术细节

返回值: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 及以下版本不支持 nextElementSibling 属性。</p>

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

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

</body>
</html>

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

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2021年12月10日 下午2:56
下一篇 2021年12月10日 下午3:05

相关推荐

发表回复

登录后才能评论