HTML - DOM元素contains()方法

contains() 方法检查 DOM 元素是否在其子树中包含另一个元素。它对于事件处理、元素选择和 DOM 遍历等任务非常有用。

语法

element.contains(childElement);

参数

参数	描述
childElement	要检查的 DOM 元素，看它是否包含在 parentElement 中。

返回值

contains() 方法返回布尔值：如果指定的元素是父元素的后代，则返回“true”；否则返回“false”。

HTML DOM 元素 'contains()' 方法示例

以下是一些在各种场景中contains()方法的示例，可用于检查DOM 元素（节点）之间的包含关系。

检查元素是否包含另一个元素

此示例演示如何检查 parentElement 是否包含 childElement（后代）。如果 childElement 是 parentElement 的后代，则返回“true”。

<!DOCTYPE html>
<html lang="en">
<head> 
    <style>
        .container { 
            margin-bottom: 10px;
            }
        .element { 
            border: 1px solid #f0ff0f; 
            padding: 8px; 
        }
    </style>
</head>

<body>
    <h2 align="center">HTML - DOM Element</h2>
    <h3 align="center">
        contains() Method - Checking Element Containment
    </h3>
    
    <div class="cont" id="pE">Parent Element
        <div class="ele" id="cE">Child Element</div>
    </div>

    <button onclick="checkContainment()">
        Check Containment
    </button>

    <div id="result"></div>

    <script>
        function checkContainment() {
            const resultElement = document.getElementById
            ('result');
            const parentContainsChild = 
            document.getElementById('pE').contains
            (document.getElementById('cE'));

            resultElement.textContent = 
            parentContainsChild
                ? 'Child Element contained by Parent.'
                :'Child Element not contained by Parent.';
        }
    </script>
</body>

</html>

检查元素是否包含自身

在此示例中，contains() 方法检查元素是否包含自身。它返回 true，因为元素确实包含自身。

<!DOCTYPE html>
<html lang="en">
<head> 
    <style>
        .element {
            border: 1px solid #ccc;
            margin-bottom: 10px;
        }
        .result {
            font-style: italic;
        }
    </style>
</head>

<body>
    <h2 align="center">HTML - DOM Element</h2>
    <h3 align="center">
        contains() Method - Self-Containment Check
    </h3>

    <div class="element" id="selfCon">
        Self-Contained Element
    </div>

    <button onclick="checkSelfContainment()">
        Check Self-Containment
    </button>

    <div class="result" id="selfConRes"></div>

    <script>
        function checkSelfContainment() {
            const resultElement = document.getElementById
            ('selfConRes');
            resultElement.textContent = 
            document.getElementById('selfCon').contains
            (document.getElementById('selfCon'))
                ? 'The element contains itself.'
                : 'The element does not contain itself.';
        }
    </script>
</body>

</html>

支持的浏览器

方法
contains()	是	是	是	是	是

html_dom_element_reference.htm

打印页面