DOM小测28期直播答疑文字版整理之DOM原生API contains()和compareDocumentPosition()

本题主要考察如何判断DOM节点文档前后位置，父子关系等。我看了下最后的回答，近9成的回答使用了非常啰嗦的方法，比例之高，实在出乎意料。实际上，本题有非常简单、寥寥数行就能实现的方法，只要你知道下面这两个很有用的DOM原生API，一个是contains()方法，判断DOM元素或节点是否包含另一个DOM元素或节点；另一个是compareDocumentPosition()方法，判断两个DOM元素或节点的文档位置。

一、contains()方法

contains()方法用于判断一个DOM元素或节点是否包含另一个DOM元素或节点。其语法如下：

element.contains(otherElement)

其中，element是要被判断是否包含otherElement的DOM元素或节点。

二、compareDocumentPosition()方法

compareDocumentPosition()方法用于判断两个DOM元素或节点的文档位置。其语法如下：

element.compareDocumentPosition(otherElement)

其中，element是要被判断与otherElement比较文档位置的DOM元素或节点。

compareDocumentPosition()方法会返回一个数字，表示element与otherElement的文档位置。这个数字可以是以下几个值之一：

• 0：两个DOM元素或节点相同。
• 1：element在otherElement之前。
• 2：element在otherElement之后。
• 4：element是otherElement的子元素。
• 8：element是otherElement的父元素。
• 16：element和otherElement没有包含关系。

三、这两个方法在DOM小测28期直播答疑中的应用

DOM小测28期直播答疑中，有大量的题目涉及到如何判断DOM节点文档前后位置，父子关系等。下面我们通过几个示例来说明如何使用contains()和compareDocumentPosition()方法来解决这些问题。

• 示例1：判断两个DOM元素是否相等

if (element1.contains(element2) && element2.contains(element1)) {
  console.log("两个DOM元素相等");
} else {
  console.log("两个DOM元素不相等");
}

• 示例2：判断一个DOM元素是否包含另一个DOM元素

if (element1.contains(element2)) {
  console.log("element1包含element2");
} else {
  console.log("element1不包含element2");
}

• 示例3：判断两个DOM元素的文档位置

var position = element1.compareDocumentPosition(element2);

if (position & 1) {
  console.log("element1在element2之前");
} else if (position & 2) {
  console.log("element1在element2之后");
} else if (position & 4) {
  console.log("element1是element2的子元素");
} else if (position & 8) {
  console.log("element1是element2的父元素");
} else {
  console.log("element1和element2没有包含关系");
}

四、结语

contains()和compareDocumentPosition()方法是两个非常有用的DOM原生API，可以帮助我们快速判断DOM节点文档前后位置，父子关系等。在DOM小测28期直播答疑中，这两个方法被大量使用。希望大家能够熟练掌握这两个方法，以便在以后的开发中能够更加高效地解决问题。

附：contains()方法和compareDocumentPosition()方法的更多使用示例

• contains()方法

• 判断一个DOM元素是否包含一个文本节点

if (element.contains(textNode)) {
  console.log("element包含textNode");
} else {
  console.log("element不包含textNode");
}

• 判断一个DOM元素是否包含一个注释节点

if (element.contains(commentNode)) {
  console.log("element包含commentNode");
} else {
  console.log("element不包含commentNode");
}

• compareDocumentPosition()方法

• 判断两个DOM元素是否相邻

if (element1.compareDocumentPosition(element2) & 1) {
  console.log("element1和element2相邻");
} else {
  console.log("element1和element2不相邻");
}

• 判断两个DOM元素是否在同一个文档中

if (element1.compareDocumentPosition(element2) & 16) {
  console.log("element1和element2在同一个文档中");
} else {
  console.log("element1和element2不在同一个文档中");
}