Skip to content

在 DOM 中,如何判定 a 元素是否是 b 元素的子元素?

参考答案:

在 DOM 中,可以使用 Node.contains()Node.compareDocumentPosition() 方法判断元素之间的包含关系。


方法一:contains

js
b.contains(a)

说明:当 ab 的子节点(包括后代)时,返回 true,否则返回 false

js
const a = document.querySelector('#child');
const b = document.querySelector('#parent');
console.log(b.contains(a)); // true 表示 a 是 b 的子元素或后代

方法二:compareDocumentPosition

js
(b.compareDocumentPosition(a) & Node.DOCUMENT_POSITION_CONTAINED_BY) !== 0

说明:如果 ab 包含(即 ab 的后代节点),返回 true

题目要点:

  • 推荐使用 b.contains(a),语义清晰,兼容性好。
  • compareDocumentPosition 更细粒度,适合需要精确判断各种节点关系的场景。