[HTML] 判断一个元素是否包含另一个元素

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>菜鸟教程(runoob.com)</title>
  </head>
  <body>
    <p id="demo">结果</p>
    <div class="a">
      <div class="b">
        <div class="c">
          <div class="d"></div>
        </div>
      </div>
    </div>
    <button onclick="testContain('d', 'b')">b包含d</button>
    <button onclick="testContain('d', 'e')">e不包含d</button>
    <button onclick="testContain('d', 'a')">a包含d</button>
    <button onclick="testContain('a', 'c')">c不包含a</button>

    <script>
      function testContain(clsInner, clsOuter) {
        var result = myFunction(clsInner, clsOuter)
        if (result) {
          document.querySelector('#demo').innerHTML = 'contain!'
        } else {
          document.querySelector('#demo').innerHTML = 'not contain!'
        }
      }
      function myFunction(clsInner, clsOuter) {
        var inner = document.querySelector('.' + clsInner)
        var outer = document.querySelector('.' + clsOuter)
        var node = inner.parentNode
        do {
          if (node === outer) {
            return true
          } else {
            node = node.parentNode
          }
        } while (node != null)
        return false
      }
    </script>
  </body>
</html>

html元素是否包含另外一个元素，以及classList属性

david2tdw / blog

[HTML] 判断一个元素是否包含另一个元素 #119