JavaScript获取父级元素用法介绍

在JavaScript中，获取父级元素是非常常见的操作，它允许我们在操作元素时，能够直接访问其父级元素的属性和方法。本文将详细介绍JavaScript中获取父级元素的几种常用方法和用法，并给出相应的代码示例。

1. parentNode属性

使用parentNode属性是最简单的一种方式来获取元素的父级元素。该属性返回指定元素的父节点。

let childElement = document.getElementById('childId');
let parentElement = childElement.parentNode;

在上述代码中，我们首先通过元素的id获取到子元素childElement，然后使用parentNode属性获取到其父级元素parentElement。

2. parentElement属性

parentElement属性与parentNode属性类似，同样可以用来获取元素的父级元素。不同的是，parentElement只返回元素节点的父元素，而parentNode会返回包括元素节点和文本节点在内的所有节点的父节点。

let childElement = document.getElementById('childId');
let parentElement = childElement.parentElement;

上述代码中的用法与前面的示例相同，通过元素的id获取到子元素childElement，然后使用parentElement属性获取到其父级元素parentElement。

3. closest方法

closest方法允许我们在元素自身及其祖先元素中查找与指定选择器匹配的元素。该方法会返回最接近的匹配的祖先元素，如果没有匹配的则返回null。

let childElement = document.getElementById('childId');
let parentElement = childElement.closest('.parentClass');

在上述代码中，我们首先通过元素的id获取到子元素childElement，然后使用closest方法获取到最接近的类名为parentClass的祖先元素parentElement。

4. 数据属性

还可以通过设置数据属性来获取父级元素。数据属性是HTML5的一个特性，允许我们在HTML元素中存储自定义数据。

let childElement = document.getElementById('childId');
let parentElement = childElement.dataset.parent;

在上述代码中，我们首先通过元素的id获取到子元素childElement，然后使用数据属性dataset.parent获取到存储在该子元素上的父级元素parentElement。

需要注意的是，数据属性的名称必须遵循特定的格式，即以data-开头，并使用小写字母和连字符命名。

5. 获取多个父级元素

以上介绍的方法都是用来获取单个父级元素的，如果需要获取多个父级元素，我们可以使用递归的方式来实现。

function getAllParents(element) {
  let parents = [];
  while(element.parentNode) {
    element = element.parentNode;
    parents.push(element);
  }
  return parents;
}

let childElement = document.getElementById('childId');
let parentElements = getAllParents(childElement);

在上述代码中，我们定义了一个名为getAllParents的函数，该函数接收一个元素作为参数，利用while循环和parentNode属性，一直向上获取父级元素，并将其添加到parents数组中。最后，调用getAllParents函数，传入子元素childElement，就可以获取到所有的父级元素parentElements。