JavaScript获取父元素的多种方法

1. 通过parentNode属性获取父元素

JavaScript中，可以通过parentNode属性来获取元素的父元素。parentNode属性返回指定元素的直接父元素，在DOM树结构中是当前元素的直接上级。

var childElement = document.getElementById('child');
var parentElement = childElement.parentNode;
console.log(parentElement);

通过上述代码，我们可以得到一个名为parentElement的变量，它将保存childElement的父元素。

2. 通过parentElement属性获取父元素

另一种获取父元素的方法是使用parentElement属性。和parentNode类似，parentElement属性返回指定元素的直接父元素。

var childElement = document.getElementById('child');
var parentElement = childElement.parentElement;
console.log(parentElement);

通过上述代码，我们同样可以得到childElement的父元素，保存在名为parentElement的变量中。

3. 通过offsetParent属性获取父元素

另一个获取父元素的方法是使用offsetParent属性。offsetParent属性返回距离指定元素最近的已定位（positioned）祖先元素。

var childElement = document.getElementById('child');
var offsetParent = childElement.offsetParent;
console.log(offsetParent);

上述代码将返回childElement的最近的已定位祖先元素。

4. 通过closest方法获取父元素

在现代浏览器中，我们可以使用closest方法来获取离当前元素最近的指定选择器的父元素。

var childElement = document.getElementById('child');
var parentElement = childElement.closest('.parent');
console.log(parentElement);

上述代码将返回childElement的最近的class为parent的父元素。

5. 通过jQuery的parent方法获取父元素

如果使用了jQuery库，我们可以使用parent方法来获取元素的父元素。

var childElement = $('#child');
var parentElement = childElement.parent();
console.log(parentElement);

上述代码将返回childElement的父元素。

6. 通过jQuery的parents方法获取所有父元素

和parent方法不同，parents方法会获取指定元素的所有父元素，直到根元素为止。

var childElement = $('#child');
var parentElements = childElement.parents();
console.log(parentElements);

上述代码将返回childElement的所有父元素。

7. 通过jQuery的closest方法获取最近的父元素

类似于JavaScript的closest方法，jQuery的closest方法也可以用来获取最近的指定选择器的父元素。

var childElement = $('#child');
var parentElement = childElement.closest('.parent');
console.log(parentElement);

上述代码将返回childElement的最近的class为parent的父元素。

总结

本文介绍了JavaScript中获取父元素的多种方法，包括使用parentNode、parentElement、offsetParent、closest等DOM API，以及使用jQuery的parent、parents、closest方法。不同的方法适用于不同的场景，开发者可以根据实际需求选择合适的方法来获取父元素。