HTML DOM Element closest() 方法

جدول الدروس

دليل مرجعي JS

JavaScript

نافذة

DOM HTML

API شبكة الويب

HTML Object

</a></li> <li><a href="/ar/jsref/dom_obj_time.html" title="موضوع Time DOM HTML"><time></a></li> <li><a href="/ar/jsref/dom_obj_title.html" title="موضوع Title DOM HTML"><title></a></li> <li><a href="/ar/jsref/dom_obj_track.html" title="موضوع Track DOM HTML"><track></a></li> <li><a href="/ar/jsref/dom_obj_u.html" title="موضوع Underline DOM HTML"><u></a></li> <li><a href="/ar/jsref/dom_obj_ul.html" title="موضوع Ul DOM HTML"><ul></a></li> <li><a href="/ar/jsref/dom_obj_var.html" title="موضوع Variable DOM HTML"><var></a></li> <li><a href="/ar/jsref/dom_obj_video.html" title="موضوع Video DOM HTML"><video></a></li> </ul> <h2>其他参考手册</h2> <ul> <li><a href="/ar/jsref/obj_cssstyledeclaration.html" title="موضوع CSSStyleDeclaration">CSSStyleDeclaration</a></li> <li><a href="/ar/jsref/jsref_type_conversion.html" title="تحويلات نوع JavaScript">JS 类型转换</a></li> </ul> </div> <div><h3><center> 选修课 </center><h3> <h2>课程推荐：</h2> <ul> <li><a href="/ar/howto/index.html" title="صندوق الأدوات CodeW3C.com">صندوق الأدوات CodeW3C.com</a></li> </ul> </div> </div> <div id="maincontent"> <div class="idea"> <a href="/"><button>English</button></a> <a href="/zh/"><button>中文</button></a> <a href="/oldzh/"><button>繁體中文</button></a> <a href="/ru/"><button>Русский</button></a> <a href="/fr/"><button>Français</button></a> <a href="/de/"><button>Deutsch</button></a> <a href="/es/"><button>Español</button></a> <a href="/pt/"><button>Português</button></a> <a href="/ja/"><button>日本語</button></a> <a href="/ko/"><button>한국어</button></a> <a href="/it/"><button>Italiano</button></a> <a href="/ar/"><button>عربي</button></a> <a href="/hi/"><button>हिंदी</button></a> <a href="/bn/"><button>বাংলা</button></a> <a href="/ms/"><button>Bahasa Malaysia</button></a> <a href="/my/"><button>မြန်မာ</button></a> <a href="/vi/"><button>Tiếng Việt</button></a> <a href="/th/"><button>ภาษาไทย</button></a> <a href="/lo/"><button>ລາວ</button></a> <a href="/id/"><button>Bahasa Indonesia</button></a> <a href="/ur/"><button>اردو</button></a> <a href="/ha/"><button>Hausa</button></a> <a href="/pl/"><button>Język polski</button></a> <a href="/pa/"><button>ਪੰਜਾਬੀ</button></a> <a href="/sv/"><button>Svenska</button></a> <a href="/da/"><button>Dansk</button></a> <a href="/nl/"><button>Nederlands</button></a> <a href="/tr/"><button>Türkçe</button></a> <a href="/fi/"><button>suom.</button></a> <a href="/el/"><button>Ελληνικά</button></a> <a href="/fa/"><button>فارسی</button></a> <a href="/sw/"><button>Kiswahili</button></a> <a href="/te/"><button>తెలుగు</button></a> <a href="/tl/"><button>wikang Galu</button></a> </div> <h1>HTML DOM Element closest() 方法</h1> <div class="prenextnav-ref"> <ul> <li> الصفحة السابقة <a href="/ar/jsref/met_node_clonenode.html" title="طريقة cloneNode() لموضوع Element DOM HTML">cloneNode()</a></li> <li> الصفحة التالية <a href="/ar/jsref/met_node_comparedocumentposition.html" title="طريقة compareDocumentPosition() لموضوع Element DOM HTML">compareDocumentPosition()</a></li> <li> العودة إلى المستوى السابق <a href="/ar/jsref/dom_obj_all.html" title="موضوع Elements DOM HTML">موضوع Elements DOM HTML</a></li> </ul> </div> <div> <h2>定义和用法</h2> <p><code>closest()</code> 方法在 DOM 树中搜索与指定 CSS 选择器匹配的元素。</p> <p><code>closest()</code> 方法从元素本身开始，然后是祖先（父，祖元素，...），直到找到匹配项。</p> <p>如果未找到匹配项，则 <code>closest()</code> 方法返回 <code>null</code>。</p> <h3>另请参阅：</h3> <p><a href="/ar/cssref/css_selectors.html" title="دليل مرجعي لقوائم CSS">完整的 CSS 选择器参考手册</a></p> <p><a href="/ar/jsref/met_element_matches.html" title="طريقة matches() لموضوع Element DOM HTML">Element matches() 方法</a></p> </div> <div> <h2>实例</h2> <h3>例子 1</h3> <p>找到与 CSS 选择器 ".container" 匹配的最接近的元素：</p> <pre class="language-js"> const element = document.getElementById("myElement"); const closest = element.closest(".container"); </pre> <p class="tiy"><a target="_blank" href="/ar/tiy/t.html?f=jsck_element_closest_1">亲自试一试</a></p> <h3>例子 2</h3> <p>Find the closest element that matches ".container" or ".wrapper":</p> <pre class="language-js"> const element = document.getElementById(".container, .wrapper"); const closest = element.closest(".container"); </pre> <p class="tiy"><a target="_blank" href="/ar/tiy/t.html?f=jsck_element_closest_2">亲自试一试</a></p> </div> <div> <h2>语法</h2> <pre><i>element</i>.closest(<i>selectors</i>)</pre> <h3>参数</h3> <table class="dataintable"> <tr> <th style="width: 25%;">参数</th> <th>描述</th> </tr> <tr> <td><i>selectors</i></td> <td> <p>必需。一个或多个（逗号分隔的）要匹配的 CSS 选择器。</p> <p>请参阅我们的完整 <a href="/ar/cssref/css_selectors.html" title="دليل مرجعي لقوائم CSS">دليل مرجعي لقوائم CSS</a>。</p> </td> </tr> </table> <h3>返回值</h3> <table class="dataintable"> <tr> <th style="width: 25%;">类型</th> <th>描述</th> </tr> <tr> <td>对象</td> <td> <p>与指定 CSS 选择器匹配的最接近的祖先元素或元素本身。</p> <p>如果没有找到匹配项，则返回 null。</p> <p>如果选择器无效，则引发 SYNTAX_ERR 异常。</p> </td> </tr> </table> </div> <div> <h2>浏览器支持</h2> <p>首个完全支持 <code>closest()</code> 方法的浏览器版本：</p> <table class="browser-support"> <tr> <th class="bsChrome">Chrome</th> <th class="bsEdge">Edge</th> <th class="bsFirefox">Firefox</th> <th class="bsSafari">Safari</th> <th class="bsOpera">Opera</th> </tr> <tr> <td>Chrome<br>41</td> <td>Edge<br>15</td> <td>Firefox<br>35</td> <td>Safari<br>9</td> <td>Opera<br>28</td> </tr> <tr> <td>مارس 2015</td> <td>2017 ٢ ٠ ٤ٯ</td> <td>2015 ٢ ١٤ٯ</td> <td>2015 ٢٠ ١٤ٯ</td> <td>مارس 2015</td> </tr> </table> </div> <div class="prenextnav-ref"> <ul> <li> الصفحة السابقة <a href="/ar/jsref/met_node_clonenode.html" title="طريقة cloneNode() لموضوع Element DOM HTML">cloneNode()</a></li> <li> الصفحة التالية <a href="/ar/jsref/met_node_comparedocumentposition.html" title="طريقة compareDocumentPosition() لموضوع Element DOM HTML">compareDocumentPosition()</a></li> <li> العودة إلى المستوى السابق <a href="/ar/jsref/dom_obj_all.html" title="موضوع Elements DOM HTML">موضوع Elements DOM HTML</a></li> </ul> </div><div style="background-color:#fcfdf8; padding:0;"> </div> </div>  <div id="sidebar"> <div><h3><center> ادوات الصندوق </center><h3> <h5 id="tools_reference"><a href="/ar/jsref/index.html">مرجع JavaScript و HTML DOM</a></h5> <h5 id="tools_example"><a href="/ar/js/js_examples.html">مثال JavaScript</a></h5> <h5 id="tools_quiz"><a href="/ar/js/js_quiz.html">اختبار JavaScript</a></h5> <h5 id="tools_tutorial"><a href="/ar/js/index.html">دروس JavaScript</a></h5> </div> <div><h3><center> روابط الممولين </center><h3> <div id="sbtg"> <script src="/myjs/zzsr.js"></script> </div> </div> </div> <div id="footer"> <p id="p1"> المحتوى الذي يقدمه CodeW3C.com مخصص فقط للتعليم والتدريب، ولا يضمن دقة المحتوى. لا يتحمل الموقع أي مسؤولية عن المخاطر التي قد تنشأ من استخدام محتوى هذا الموقع. حقوق النشر محفوظة، جميع الحقوق محفوظة. </p> <p id="p2"> <a href="/ar/about/index.html" title="عن CodeW3C.com">عن CodeW3C.com</a> <a href="/ar/about/about_helping.html" title="مساعدة CodeW3C.com">مساعدة CodeW3C.com</a> <a href="/ar/about/about_use.html" title="عن الاستخدام">شروط الاستخدام</a> <a href="/ar/about/about_privacy.html" title="عن الخصوصية">شروط الخصوصية</a> <a href="http://www.comfortsoftwaregroup.com/" target="_blank"><img src="/comfortsoftwaregroup.png"></a> <a href="http://www.ce4e.com/" target="_blank"><img src="/poweredby.png" alt="ممكن بفضل Ce4e.com"></a> </p> </div> </div>  <script src="/myjs/tongji.js"></script> </body> </html>