path: root/files/es/web/api/document/queryselectorall/index.html

---
title: Document.querySelectorAll()
slug: Web/API/Document/querySelectorAll
tags:
  - API
  - Buscando Elementos
  - DOM
  - Document
  - Encontrando Elementos
  - Localizando Elementos
  - Métodos
  - Referencia
  - Seleccionando Elementos
  - Selectores
  - Selectores CSS
  - querySelectorAll
translation_of: Web/API/Document/querySelectorAll
---
<div>{{ ApiRef("DOM") }}</div>

<p>El método <strong><code>querySelectorAll()</code></strong> de un {{domxref("Element")}} devuelve una {{domxref("NodeList")}} estática (no viva) que representa una lista de elementos del documento que coinciden con el grupo de selectores indicados.</p>

<div class="note">
<p><strong>Nota:</strong> Esto método se implementa en base al método {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} del mixin {{domxref("ParentNode")}}.</p>
</div>

<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>

<pre class="syntaxbox"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>);
</pre>

<h3 id="Parámetros" name="Parámetros">Parámetros</h3>

<dl>
 <dt><code>selectors</code></dt>
 <dd>Un {{domxref("DOMString")}} que contiene uno o más selectores para buscar coincidencias. Esta cadena de texto debe ser una cadena <a href="/en-US/docs/Web/CSS/CSS_Selectors">CSS selector</a> válida; si no lo es, se lanzará una excepción <code>SyntaxError</code>. Vea <a href="/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Locating DOM elements using selectors</a> para más información acerca de utilizar selectores para identificar elementos. Se pueden especificar varios selectores separándolos utilizando comas.</dd>
</dl>

<div class="note">
<p><strong>Nota:</strong> Los caracteres que no son parte de la sintaxis estándar de CSS deben ser escapados utilizando el caracter de barra invertida. Dado que JavaScript también utiliza el escapado por retroceso, se debe tener especial cuidado al escribir cadenas de texto literales utilizando estos caracteres. Vea {{anch("Escapando caracteres especiales")}} para más información.</p>
</div>

<h3 id="Valor_devuelto">Valor devuelto</h3>

<p>Una {{domxref("NodeList")}} <em>no viva</em> que contenga un objeto {{domxref("Element")}} para cada elemento que coincida con al menos uno de los selectores especificados o una {{domxref("NodeList")}} vacía en caso de que no haya coincidencias.</p>

<div class="note">
<p><strong>Nota:</strong> Si los selectores indicados incluyen un <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elemento CSS</a>, la lista devuelta siempre estará vacía.</p>
</div>

<h3 id="Excepciones">Excepciones</h3>

<dl>
 <dt><code>SyntaxError</code></dt>
 <dd>La sintaxis de la cadena de texto <code>selectors</code> no es válida.</dd>
</dl>

<h2 id="Ejemplos">Ejemplos</h2>

<h3 id="Obteniendo_una_lista_de_coincidencias">Obteniendo una lista de coincidencias</h3>

<p>Para obtener una {{domxref("NodeList")}} de todos los elementos {{HTMLElement("p")}} en el documento:</p>

<pre class="brush: js">var matches = document.querySelectorAll('p');</pre>

<p>Este ejemplo devuelve una lista de todos los elementos {{HTMLElement("div")}} del documento con una clase "<code>nota</code>" o "<code>alerta</code>":</p>

<pre class="brush: js">var matches = document.querySelectorAll('div.nota, div.alerta');
</pre>

<p>Aquí, se obtiene una lista de elementos <code>&lt;p&gt;</code> cuyo elemento padre inmediato es un {{domxref("div")}} con la clase <code>"highlighted"</code> y que está ubicado dentro de un contenedor cuyo ID es <code>"test"</code>.</p>

<pre class="brush: js">var container = document.querySelector('#test');
var matches = container.querySelectorAll('div.highlighted &gt; p');</pre>

<p>Este ejemplo usa un <a href="es/docs/Web/CSS/Selectores_atributo">selector de atributos</a> para devolver una lista de elementos {{domxref("iframe")}} en el documento que contienen un atributo llamado <code>"data-src"</code>:</p>

<pre class="brush: js">var matches = document.querySelectorAll('iframe[data-src]');</pre>

<p>Aquí, un selector de atributo se utiliza para devolver una lista de los elementos de una lista cuyo ID es <code>"userlist"</code> que tiene un atributo <code>"data-active"</code> cuyo valor es <code>"1"</code>:</p>

<pre class="brush: js">var container = document.querySelector('#userlist');
var matches = container.querySelectorAll('li[data-active="1"]');</pre>

<h3 id="Accediendo_a_las_coincidencias">Accediendo a las coincidencias</h3>

<p>Una vez que se devuelve la {{domxref("NodeList")}} de los elementos que coinciden, se puede examinar como cualquier <code>array</code>. Si el array está vacío (lo que significa que su propiedad <code>length</code> es 0), entonces es que no se encontraron coincidencias.</p>

<p>En cualquier caso, se puede simplemente utilizar la notación estándar de los arrays para acceder al contenido de la lista. Se puede usar cualquier sentencia de iteración, como por ejemplo:</p>

<pre class="brush: js">var highlightedItems = userList.querySelectorAll('.highlighted');

highlightedItems.forEach(function(userItem) {
  deleteUser(userItem);
});</pre>

<h2 id="Notas_de_usuario">Notas de usuario</h2>

<p><code>querySelectorAll()</code> se comporta de forma diferente que la mayoría de librerías DOM de JavaScript, que pueden llevar a resultados inesperados.</p>

<h3 id="HTML">HTML</h3>

<p>Considere este HTML, con sus tres bloques anidados {{HTMLElement("div")}}.</p>

<pre class="brush: html">&lt;div class="outer"&gt;
  &lt;div class="select"&gt;
    &lt;div class="inner"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>

<h3 id="JavaScript">JavaScript</h3>

<pre class="brush: js">var select = document.querySelector('.select');
var inner = select.querySelectorAll('.outer .inner');
inner.length; // 1, not 0!
</pre>

<p>En este ejemplo, cuando se selecciona <code>".outer .inner"</code> en el contexto el <code>&lt;div&gt;</code> con la clase <code>"select"</code>, el elemento con la clase <code>".inner"</code> todavía es encontrado, aun sabiendo que <code>.outer</code> no es descendiente del elemento base sobre el que se realiza la búsqueda (<code>".select"</code>). Por defecto, <code>querySelectorAll()</code> sólo verifica que el último elemento en el selector se encuentra dentro del rango de búsqueda.</p>

<p>La pseudo-clase {{cssxref(":scope")}} recupera el comportamiento esperado, encontrando coincidencias sólo en selectores descendientes del elemento base:</p>

<pre class="brush: js">var select = document.querySelector('.select');
var inner = select.querySelectorAll(':scope .outer .inner');
inner.length; // 0
</pre>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentario</th>
  </tr>
  <tr>
   <td>{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
   <td>{{Spec2("DOM WHATWG")}}</td>
   <td>Estándar vivo</td>
  </tr>
  <tr>
   <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
   <td>{{Spec2("Selectors API Level 2")}}</td>
   <td>Sin cambios</td>
  </tr>
  <tr>
   <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
   <td>{{Spec2("DOM4")}}</td>
   <td>Definición inicial</td>
  </tr>
  <tr>
   <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td>
   <td>{{Spec2("Selectors API Level 1")}}</td>
   <td>Definición original</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>

<div>


<p>{{Compat("api.Document.querySelectorAll")}}</p>
</div>

<h2 id="Ver_también" name="Ver también">Ver también</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Localizando elementos DOM utilizando selectores</a></li>
 <li><a href="/es/docs/Web/CSS/Selectores_atributo">Selectores de atributo</a></li>
 <li><a href="/es/docs/Learn/CSS/Introduction_to_CSS/Selectores_de_Atributos">Selectores de atributo</a> en el área de aprendizaje de MDN</li>
 <li>{{domxref("Element.querySelector()")}} y {{domxref("Element.querySelectorAll()")}}</li>
 <li>{{domxref("Document.querySelector()")}}</li>
 <li>{{domxref("DocumentFragment.querySelector()")}} y {{domxref("DocumentFragment.querySelectorAll()")}}</li>
 <li>{{domxref("ParentNode.querySelector()")}} y {{domxref("ParentNode.querySelectorAll()")}}</li>
 <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="Code_snippets/QuerySelector">Snippets de código para <code>querySelector()</code></a></li>
</ul>