📜  HTML | DOM previousElementSibling 属性(1)

📅  最后修改于: 2023-12-03 15:15:35.562000             🧑  作者: Mango

HTML | DOM previousElementSibling 属性

简介

HTML DOM 中的 previousElementSibling 属性是指元素节点的前一个兄弟元素节点,即在同一父级节点下,前一个与该元素节点同级别的元素节点。

该属性用于获取和操作DOM中的元素节点,如需要查找当前元素节点之前的元素节点,就可以使用该属性。

语法
element.previousElementSibling

其中,element 是需要获取前一个兄弟元素节点的元素节点。

该属性返回一个元素节点对象,如果该元素节点没有前一个兄弟元素节点,则返回 null

示例

以下代码段展示了如何使用 previousElementSibling 属性获取和操作前一个兄弟元素节点:

<body>
  <p>这是段落1</p>
  <p>这是段落2</p>
  <p>这是段落3</p>

  <script>
    const currentElement = document.querySelector('p:nth-child(2)');
    const previousElement = currentElement.previousElementSibling;

    console.log(previousElement.textContent); // 输出 "这是段落1"
  </script>
</body>

在上述代码中,我们选取第二个段落元素节点作为当前元素节点,使用 previousElementSibling 属性获取到其前一个兄弟元素节点,并输出其文本内容。最终输出结果为该段落元素节点的前一个兄弟元素节点所包含的文本内容。

兼容性

previousElementSibling 属性可以在所有主流浏览器中使用,包括 Chrome、Firefox、Safari、Edge 和 IE9+。

总结

previousElementSibling 属性可以用于在DOM中查找指定元素节点的前一个兄弟元素节点,并进行元素操作。该属性的使用方式简单明了,易于掌握,同时具有较好的兼容性。