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

列印頁面