IE中.contains()方法返回false，求兼容替代方案附示例代码

I totally get the frustration—Internet Explorer's native contains() method can be finicky, often returning false when you expect true, especially with edge cases or older IE versions. Let's break down reliable alternatives that work across all IE releases:

1. Recursive DOM Traversal (Works for All IE Versions) #

This is the most bulletproof method for older IE (like IE8 and below). It manually climbs up the DOM tree from the child element until it either finds the parent or hits the top of the tree.

function isDescendant(parent, child) {
  let currentNode = child.parentNode;
  while (currentNode !== null) {
    if (currentNode === parent) {
      return true;
    }
    currentNode = currentNode.parentNode;
  }
  return false;
}

How to use it with your example: #

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV { border: 1px solid black; }
</style>
</head>
<body>
<div id="myDIV">
  <p>I am a p element inside div, and I have a <span id="mySPAN">span</span> element inside of me.</p>
</div>
<p>I am a p element outside div, and I have a <span id="mySPAN2">span</span> element inside</p>
<button onclick="checkRelation()">Check Parent-Child</button>

<script>
function isDescendant(parent, child) {
  let currentNode = child.parentNode;
  while (currentNode !== null) {
    if (currentNode === parent) {
      return true;
    }
    currentNode = currentNode.parentNode;
  }
  return false;
}

function checkRelation() {
  const parent = document.getElementById('myDIV');
  const spanInside = document.getElementById('mySPAN');
  const spanOutside = document.getElementById('mySPAN2');
  
  alert(`Inner span is inside div? ${isDescendant(parent, spanInside)}`); // true
  alert(`Outer span is inside div? ${isDescendant(parent, spanOutside)}`); // false
}
</script>
</body>
</html>

2. compareDocumentPosition() (IE9+) #

If you only need to support IE9 and newer, this method uses a bitmask to check element relationships. A return value including the 16 flag means the child is a descendant of the parent.

function isDescendant(parent, child) {
  return !!(parent.compareDocumentPosition(child) & 16);
}

This is more concise, just note it won't work on IE8 or earlier.

3. Edge Case Checks to Avoid False Returns #

Before using any alternative, double-check these common pitfalls that cause contains() to fail in IE:

• Ensure you're passing element nodes (not text nodes) to the function.
• Verify both elements belong to the same document (cross-document elements like those from iframes can break contains()).
• For IE8, avoid using contains() on the root <html> element—use the recursive method instead.

Content from Stack Exchange, question author Sidal