DOM中判断元素子元素关系的方法

在 DOM 中，判断一个元素是否是另一个元素的子元素，可以使用以下几种方法：

1. 使用 Node.contains() 方法

Node.contains() 方法用于判断一个节点是否是另一个节点的后代节点（包括子节点、孙节点等）。

const a = document.querySelector('#a');
const b = document.querySelector('#b');

if (b.contains(a)) {
  console.log('a 是 b 的子元素或后代元素');
} else {
  console.log('a 不是 b 的子元素或后代元素');
}

2. 使用 parentElement 属性

通过遍历 parentElement 属性，可以判断 a 是否是 b 的直接子元素或间接子元素。

const a = document.querySelector('#a');
const b = document.querySelector('#b');

let isChild = false;
let currentElement = a;

while (currentElement.parentElement) {
  if (currentElement.parentElement === b) {
    isChild = true;
    break;
  }
  currentElement = currentElement.parentElement;
}

if (isChild) {
  console.log('a 是 b 的子元素或后代元素');
} else {
  console.log('a 不是 b 的子元素或后代元素');
}

3. 使用 closest() 方法

Element.closest() 方法用于获取与指定选择器匹配的最近的祖先元素。如果 a 的最近祖先元素是 b，则说明 a 是 b 的子元素。

const a = document.querySelector('#a');
const b = document.querySelector('#b');

if (a.closest('#b') === b) {
  console.log('a 是 b 的子元素或后代元素');
} else {
  console.log('a 不是 b 的子元素或后代元素');
}

4. 使用 compareDocumentPosition() 方法

Node.compareDocumentPosition() 方法可以比较两个节点的位置关系。通过检查 a 是否在 b 的子树中，可以判断 a 是否是 b 的子元素。

const a = document.querySelector('#a');
const b = document.querySelector('#b');

if (b.compareDocumentPosition(a) & Node.DOCUMENT_POSITION_CONTAINED_BY) {
  console.log('a 是 b 的子元素或后代元素');
} else {
  console.log('a 不是 b 的子元素或后代元素');
}

总结

• Node.contains() 是最简单和常用的方法，适用于大多数场景。
• parentElement 遍历适合需要精确控制遍历层级的情况。
• closest() 方法适合需要根据选择器判断的情况。
• compareDocumentPosition() 提供了更底层的节点位置关系判断。

根据具体需求选择合适的方法即可。