正文

掌握原生JS获取前一个元素的5种实用方法，轻松实现元素定位与操作

/0 浏览量
0418

在开发网页时，经常需要对页面上的元素进行操作，比如定位、修改样式、添加事件监听等。其中，获取元素的前一个兄弟元素是一个常见的需求。下面，我将介绍五种原生JS获取前一个元素的实用方法，帮助大家轻松实现元素定位与操作。

方法一：使用 previousElementSibling 属性

previousElementSibling 属性是 DOM 标准提供的一个属性，可以用来获取当前元素的前一个兄弟元素。这个方法简单易用，只需将当前元素作为参数传入即可。

var prevElement = currentElement.previousElementSibling;

方法二：使用 children 属性结合循环

如果当前元素是父元素，并且需要获取它的第一个子元素的前一个兄弟元素，可以使用 children 属性结合循环来实现。

var children = parentElement.children;
var prevElement = null;
for (var i = 0; i < children.length; i++) {
  if (children[i] === currentElement) {
    if (i > 0) {
      prevElement = children[i - 1];
    }
    break;
  }
}

方法三：使用 parentNode 和 children 属性

如果当前元素是父元素的第一个子元素，需要获取它的前一个兄弟元素，可以使用 parentNode 和 children 属性。

var children = parentElement.children;
var prevElement = children[children.length - 1];

方法四：使用 querySelector 和 previousElementSibling

querySelector 方法可以用来选择匹配指定 CSS 选择器的元素。结合 previousElementSibling 属性，可以用来获取当前元素的前一个兄弟元素。

var prevElement = currentElement.previousElementSibling;
var selector = 'CSS选择器';
var prevSibling = document.querySelector(selector);

方法五：使用递归函数

如果需要获取当前元素的前一个兄弟元素的前一个兄弟元素，可以使用递归函数来实现。

function getPreviousSibling(element) {
  var prevElement = element.previousElementSibling;
  if (prevElement) {
    return getPreviousSibling(prevElement);
  }
  return null;
}

总结

以上就是五种原生JS获取前一个元素的实用方法。在实际开发中，可以根据具体情况选择合适的方法来实现元素定位与操作。希望这些方法能帮助到大家！

-- 展开阅读全文 --