js parents 实现
获取父元素的方法
在JavaScript中,可以通过parentElement或parentNode属性获取当前元素的父元素。两者在大多数情况下返回相同结果,但存在细微差异:
parentElement返回的是父级HTMLElement对象parentNode返回的是父级Node对象(可能是文本节点等非元素节点)
const child = document.getElementById('child');
const parent1 = child.parentElement;
const parent2 = child.parentNode;
遍历祖先元素
使用closest()方法可以查找匹配选择器的最近祖先元素,该方法向上遍历DOM树直到找到匹配项:
const element = document.querySelector('li');
const list = element.closest('ul');
多层级父元素访问
通过递归或循环可以访问多级父元素。以下示例展示如何查找所有祖先元素:
function getAllParents(element) {
const parents = [];
let current = element.parentElement;
while(current) {
parents.push(current);
current = current.parentElement;
}
return parents;
}
事件委托中的父元素
事件委托常利用父元素处理子元素事件,通过event.target和event.currentTarget区分事件源和当前处理元素:
document.getElementById('parent').addEventListener('click', function(event) {
if(event.target.classList.contains('child')) {
// 处理子元素点击
}
});
jQuery中的父元素方法
如果使用jQuery库,相关方法更加丰富:
parent()- 获取直接父元素parents()- 获取所有祖先元素closest()- 获取匹配选择器的最近祖先元素
$('.child').parent();
$('.child').parents('div');
$('.child').closest('.container');
注意事项
访问父元素时需注意以下情况:

- 某些元素如
<html>的父元素为document - 新创建的尚未插入DOM树的元素没有父元素
- 动态修改DOM后父元素引用可能需要更新






