1 files changed, 148 insertions, 0 deletions
diff --git a/files/ar/web/api/element/closest/index.html b/files/ar/web/api/element/closest/index.html
new file mode 100644
index 0000000000..5ad476bb9d
--- /dev/null
+++ b/files/ar/web/api/element/closest/index.html
@@ -0,0 +1,148 @@
+---
+title: Element.closest()
+slug: Web/API/Element/closest
+tags:
+  - دوم
+  - مرجع
+  - واجهة برمجة تطبيقات
+translation_of: Web/API/Element/closest
+---
+<div>{{APIRef('DOM')}}</div>
+
+<div dir="rtl">ال <code><strong>closest()</strong></code> method تجتاز {{domxref ("Element")}} والأصل(يتجهون نحو جذر المستند) حتى يعثروا على عقدة تتطابق مع الstring المحدد. سيعود نفسه أو أسلاف مطابقة. إذا لم يكن هناك مثل هذا العنصر ، فإنه يعيد <code>null</code>.</div>
+
+<h2 id="تركيب_الجملة">تركيب الجملة</h2>
+
+<pre class="syntaxbox notranslate">var <var>closestElement</var> = <var>targetElement</var>.closest(<var>selectors</var>);
+</pre>
+
+<h3 id="المعاملات">المعاملات</h3>
+
+<ul>
+ <li><code><var>selectors</var></code> is a {{domxref("DOMString")}} containing a selector list.<br>
+  ex: <code>p:hover, .toto + q</code></li>
+</ul>
+
+<h3 id="القيمة_المرجعة">القيمة المرجعة</h3>
+
+<ul>
+ <li><code><var>closestElement</var></code> is the {{domxref("Element")}} which is the closest ancestor of the selected element. It may be <code>null</code>.</li>
+</ul>
+
+<h3 id="استثناءات">استثناءات</h3>
+
+<ul>
+ <li>{{exception("SyntaxError")}} is thrown if the <code><var>selectors</var></code> is not a valid selector list string.</li>
+</ul>
+
+<h2 id="مثال">مثال</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;article&gt;
+  &lt;div id="div-01"&gt;Here is div-01
+    &lt;div id="div-02"&gt;Here is div-02
+      &lt;div id="div-03"&gt;Here is div-03&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/article&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">var el = document.getElementById('div-03');
+
+var r1 = el.closest("#div-02");
+// returns the element with the id=div-02
+
+var r2 = el.closest("div div");
+// returns the closest ancestor which is a div in div, here it is the div-03 itself
+
+var r3 = el.closest("article &gt; div");
+// returns the closest ancestor which is a div and has a parent article, here it is the div-01
+
+var r4 = el.closest(":not(div)");
+// returns the closest ancestor which is not a div, here it is the outmost article</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p dir="rtl">بالنسبة للمتصفحات التي لا تدعم ()Element.closest ، ولكنها تدعم ال()element.matches (أو ما يعادله سابقًا ، بمعنى IE9 +) ، توجد تعبئة متعددة:</p>
+
+<pre class="brush: js notranslate">if (!Element.prototype.matches) {
+  Element.prototype.matches = Element.prototype.msMatchesSelector ||
+                              Element.prototype.webkitMatchesSelector;
+}
+
+if (!Element.prototype.closest) {
+  Element.prototype.closest = function(s) {
+    var el = this;
+
+    do {
+      if (Element.prototype.matches.call(el, s)) return el;
+      el = el.parentElement || el.parentNode;
+    } while (el !== null &amp;&amp; el.nodeType === 1);
+    return null;
+  };
+}</pre>
+
+<p dir="rtl">ومع ذلك ، إذا كنت تحتاج بالفعل إلى دعم IE 8 ، فإن polyfill التالي سيقوم بالمهمة ببطء شديد ، ولكن في النهاية. ومع ذلك ، ستدعم فقط محددات CSS 2.1 في IE 8 ، ويمكن أن تسبب تأخر كبير في إنتاج المواقع .</p>
+
+<pre class="brush: js notranslate">if (window.Element &amp;&amp; !Element.prototype.closest) {
+  Element.prototype.closest =
+  function(s) {
+    var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+        i,
+        el = this;
+    do {
+      i = matches.length;
+      while (--i &gt;= 0 &amp;&amp; matches.item(i) !== el) {};
+    } while ((i &lt; 0) &amp;&amp; (el = el.parentElement));
+    return el;
+  };
+}
+</pre>
+
+<h2 id="مواصفات">مواصفات</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">مواصفات</th>
+   <th scope="col">الحالة</th>
+   <th scope="col">تعليق</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>تعريف ابتدائي.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="التوافق_مع_المتصفحات">التوافق مع المتصفحات</h2>
+
+<div>
+<div class="hidden" dir="rtl">يتم إنشاء جدول التوافق في هذه الصفحة من البيانات المنظمة. إذا كنت ترغب في المساهمة في البيانات ، يرجى مراجعة https://github.com/mdn/browser-compat-data وإرسال طلب سحب إلينا.</div>
+
+<p>{{Compat("api.Element.closest")}}</p>
+
+<h3 id="ملاحظات_التوافق">ملاحظات التوافق</h3>
+
+<ul dir="rtl">
+ <li>في Edge 15-18 <code>document.createElement(tagName).closest(tagName)</code> ستعيد <code>null</code> ذا كان العنصر غير متصل أولاً (بشكل مباشر أو غير مباشر) بObject السياق ، على سبيل المثال {{domxref ("Document")}}<br>
+  Object في حالة DOM العادي.</li>
+</ul>
+</div>
+
+<h2 id="إقرأ_أيضا">إقرأ أيضا</h2>
+
+<ul>
+ <li>The {{domxref("Element")}} interface.</li>
+ <li>
+  <div class="syntaxbox"><a href="/en-US/docs/Web/Guide/CSS/Getting_started/Selectors">The syntax of Selectors</a></div>
+ </li>
+ <li>
+  <div class="syntaxbox">Other methods that take selectors: {{domxref("element.querySelector()")}} and {{domxref("element.matches()")}}.</div>
+ </li>
+</ul>