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

打印页面