1 files changed, 120 insertions, 0 deletions
diff --git a/files/es/web/api/element/matches/index.html b/files/es/web/api/element/matches/index.html
new file mode 100644
index 0000000000..eef4ae271d
--- /dev/null
+++ b/files/es/web/api/element/matches/index.html
@@ -0,0 +1,120 @@
+---
+title: Element.matches()
+slug: Web/API/Element/matches
+tags:
+  - API
+  - DOM
+  - Elemento
+  - Referencia
+  - metodo
+  - msMatchesSelector
+  - webkitMatchesSelector
+translation_of: Web/API/Element/matches
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>El método <strong><code>matches()</code></strong> comprueba si el {{domxref("Element")}} sería seleccionable por el selector CSS especificado en la cadena; en caso contrario, retorna <code>false</code>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">var <var>result</var> = <var>element</var>.matches(<var>selectorString</var>);
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<p><code><var>selectorString</var></code> es una cadena de texto que representa el selector a probar.</p>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p><code><var>result</var></code> es un {{domxref("Boolean")}}.</p>
+
+<h3 id="Excepciones">Excepciones</h3>
+
+<dl>
+ <dt><code>SYNTAX_ERR</code></dt>
+ <dd>La cadena especificada como selector no es válida.</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: html notranslate">&lt;ul id="aves"&gt;
+  &lt;li&gt;Loro de alas naranja&lt;/li&gt;
+  &lt;li class="amenazada"&gt;Ágila Filipina&lt;/li&gt;
+  &lt;li&gt;Gran Pelícano Blancpo/li&gt;
+&lt;/ul&gt;
+
+&lt;script type="text/javascript"&gt;
+  var aves = document.getElementsByTagName('li');
+
+  for (var i = 0; i &lt; aves.length; i++) {
+    if (aves[i].matches('.amenazada')) {
+      console.log('El ' + aves[i].textContent + ' está amenazada de extinción!');
+    }
+  }
+&lt;/script&gt;
+</pre>
+
+<p>Esto mostrará "El Águila Filipina está amenazada de extinción!" en el log de la consola, dado que el elemento tiene un atributo <code>class</code> con valor <code>amenazada</code>.</p>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Para navegadores que no soportan <code>Element.matches()</code> o <code>Element.matchesSelector()</code>, pero aun incorporan soporte para <code>document.querySelectorAll()</code>, existe un polyfill:</p>
+
+<pre class="notranslate">if (!Element.prototype.matches) {
+    Element.prototype.matches =
+        Element.prototype.matchesSelector ||
+        Element.prototype.mozMatchesSelector ||
+        Element.prototype.msMatchesSelector ||
+        Element.prototype.oMatchesSelector ||
+        Element.prototype.webkitMatchesSelector ||
+        function(s) {
+            var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+                i = matches.length;
+            while (--i &gt;= 0 &amp;&amp; matches.item(i) !== this) {}
+            return i &gt; -1;
+        };
+}</pre>
+
+<p>However, given the practicality of supporting older browsers, the following should suffice for most (if not all) practical cases (ej. soporte IE9+).</p>
+
+<pre class="brush: js notranslate">if (!Element.prototype.matches) {
+  Element.prototype.matches = Element.prototype.msMatchesSelector ||
+                              Element.prototype.webkitMatchesSelector;
+}
+</pre>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Observaciones</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-matches', 'Element.prototype.matches')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Definición Inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("api.Element.matches")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <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">Otros métodos que usan selectores: {{domxref("element.querySelector()")}} and {{domxref("element.closest()")}}.</div>
+ </li>
+</ul>