HTML - DOM 元素 closest() 方法

**closest()** 方法簡化了查詢與指定選擇器匹配的最近祖先（前驅）元素的過程。

它返回當前元素（或當前元素本身）的最近祖先，該祖先與給定的 CSS 選擇器匹配。如果不存在這樣的祖先，則返回 null。

語法

element.closest(selectors);

引數

方法	描述
選擇器	一個或多個 CSS 選擇器的字串。

返回值

此方法返回一個與最近祖先匹配的元素物件，如果未找到則返回 null。如果選擇器無效，則會丟擲 SYNTAX_ERR 異常。

HTML DOM 'closest()' 方法示例

以下是一些在各種場景中使用 closest() 方法的示例，可用於檢查**DOM 元素**（物件）之間的關係。

查詢最近祖先（前驅）

此示例幫助我們根據給定的選擇器查詢最近的祖先元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .parent {
            border: 2px solid #ccc; 
            margin: 10px; 
            padding: 4px;
        }
        .highlight {
            background-color: yellow;
        }
        .grandparent{
            border: 2px solid;
        }
        .ch{
            border: 2px solid;
            padding: 4px;
        }
    </style>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h1>closest() Method</h1>
    <p>
        Click button and highlight the closest parent.
    </p>
    
    <div class="grandparent">
        Grandparent
        <div class="parent">
            Parent
            <div class="ch" id="Ele">Target Element</div>
        </div>
    </div>
    <br>
    <button onclick="highlightClosest()">
        Highlight Closest Parent
    </button>
    
    <script>
        function highlightClosest() {
            const closestParent = document.getElementById
            ('Ele').closest('.parent');
            closestParent.classList.add('highlight');
        }
    </script>
</body>

</html>

查詢最近元素

此示例突出顯示了包裝器類中最接近的元素，如果未找到元素，則它只會顯示一條警報訊息，提示“未找到元素”。

<!DOCTYPE html>
<html lang="en">
<head> 
    <style>
        .container, .wrapper {
            padding: 10px;
            text-align: center;
        }
        .child { 
            background-color: lightblue;
        }
        .highlight {
            background-color: red !important;
        }
    </style>
</head>

<body>
    <h1 align="center">HTML - DOM Element</h1>
    <h2 align="center">closest() Method</h2>
    <p>Finds closest element within 'wrapper' class.</p>
    
    <div class="wrapper">
        <div class="child" id="Ele">Target Element</div>
    </div>
    <div class="container">
        <div class="child">Another Target Element</div>
    </div>
    <button onclick="highlightClosest()">
        Highlight Closest .wrapper
    </button>
    
    <script>
        function highlightClosest() {
            const element=document.getElementById('Ele');
            const closestContainerOrWrapper = 
            element.closest('.container, .wrapper');
                
            closestContainerOrWrapper.classList.add
            ('highlight');
        }
    </script>
</body>

</html>

支援的瀏覽器

方法
closest()	是 41.0	是 15.0	是 35.0	是 9.0	是 28.0

html_dom_element_reference.htm

列印頁面