En CSS, los selectores son patrones que se utilizan para seleccionar los elementos a los que se quiere dar estilo, los selectores también son útiles en javascript y a continuación hay algunos ejemplos de cómo usarlos.
Selectores básicos en JavaScript
— Utilice el método .querySelector
const div = document.querySelector('div');
// Primer elemento div en el documento
const p = div.querySelector('p');
// Primer elemento p dentro de un div
— Para obtener todos los elementos coincidentes, utilice el método document.querySelectorAll
const div = document.querySelectorAll('div');
// NodeList de todos los elementos div
Selectores por IDs
Para obtener un elemento por su ID, utilice un # antes del ID del elemento.
// Primera Forma
document.querySelector('#id');
// Segunda Forma
document.getElementById('id');
Selectores por classes
Para obtener elementos por clase, use un . antes del nombre de la clase.
document.querySelectorAll('.myElementClass')
Selectores por nombre de etiqueta
Para obtener elementos por nombre de etiqueta, simplemente introduzca el nombre de la etiqueta.
document.querySelectorAll('body')
// Tambien de esta forma
document.getElementsByTagName('body')
Seleccionar todo los elementos
Para obtener todos los elementos use *
document.querySelectorAll('*')
Seleccionar varios selectores
Para utilizar varios selectores, separamos cada uno de ellos con un ,.
<html>
<body>
<p>Hola, soy GodoFredo</p>
<a href="http://facebook.com/godofredo.io">Mi Facebook</a>
<a href="https://twitter.com/godofredoninja">mi Twitter</a>
</body>
</html>
document.querySelectorAll('p, a') // => NodeList[p,a,a]
En los ejemplos anteriores, hicimos consultas básicas, pero se pueden hacer otras cosas como obtener elementos por orden o por padre.
Seleccionar al hijo de un elemento
Hay dos variantes de esto, una obtiene el hijo de un elemento sin importar cuán profundo esté en el árbol, y la otra obtiene el hijo directo de un elemento.
<html>
<body>
<p>Hola, soy GodoFredo</p>
<div>
<a href="http://facebook.com/godofredo.io">Mi Facebook</a>
<p>
Sigueme tambien en Twitter:
<a href="https://twitter.com/godofredoninja">mi Twitter</a>
</p>
</div>
</body>
</html>
Con el HTML de arriba como ejemplo, veremos estas dos variantes.
— Hijo directo
document.querySelector('div > a');
// <a href="http://facebook.com/godofredo.io">Mi Facebook</a>
— Seleccionar todo los hijos
document.querySelectorAll('div a');
// => NodeList[a,a]
Obtener elementos por orden
Hay dos maneras de hacer esto también. Considere el siguiente HTML.
<html>
<body>
<div>
<a href="http://facebook.com/godofredo.io">Mi Facebook</a>
<pre>Sigueme tambien en Twitter:</pre>
<p>Hola, yo no soy GodoFredo</p>
</div>
<p>Hola, soy GodoFredo</p>
</body>
</html>
— Colocados después
document.querySelector('div + p')
// <p>Hola, soy GodoFredo</p>
— Con ~, seleccionas el elemento que sigue detrás.
document.querySelector('a ~ p')
// <p>Hola, yo no soy GodoFredo</p>
Seleccionar un elemento por su atributo
Un selector de atributos comienza con [ y termina con ] y se utiliza de esta manera.
<html>
<body>
<p style="color:blue;">Hola soy un estilo</p>
<p>Hola no tengo estilo</p>
</body>
</html>
document.querySelector('p[style]')
// <p style="color:blue;">Hola soy un estilo</p>
seleccionar un elemento verificando el valor de su atributo
Para comprobar un valor de atributo utilizamos el símbolo =.
<html>
<body>
<p>Hola, soy GodoFredo</p>
<a href="http://godofredo.ninja">Mi Pagina</a>
<a href="https://twitter.com/godofredoninja">mi Twitter</a>
</body>
</html>
document.querySelector('a[href="https://godofredo.ninja"]')
// <a href="http://godofredo.ninja">Mi Pagina</a>
— Compruebe si el atributo comienza con....
document.querySelector('a[href^="https://godofredo"]')
// <a href="http://godofredo.ninja">Mi Pagina</a>
— Compruebe si el final atributo termina con...
document.querySelectorAll('a[href$=".com"]')
// NodeList[a]
— Compruebe si el atributo contiene una subcadena
document.querySelectorAll('a[href*="fredo"]')
// NodeList[a,a]
Selectores avanzados
— :focus Selecciona el elemento que actualmente tiene el focus.
— :visited Se utiliza con una etiqueta y selecciona los enlaces que han sido visitados.
— :link También se utiliza con una etiqueta, pero en este caso, selecciona los enlaces que no han sido visitados.
— :enabled Selecciona los elementos que están habilitados (no deshabilitados)
<html>
<body>
<p>Hola, soy GodoFredo</p>
<p>¿Cómo estas?</p>
<a href="http://facebook.com/godofredo.io">Mi Facebook</a>
<a href="https://twitter.com/godofredoninja">mi Twitter</a>
<button disabled="true"> Estoy deshabilitado </button>
</body>
</html>
document.querySelectorAll(':enabled') // => NodeList[p,p,a,a]
— :disabled Selecciona los elementos que han sido desactivados
document.querySelector(':disabled')
// <button disabled="true"> Estoy deshabilitado </button>
— :last-child Selecciona el elemento que es el último hijo de su padre
— :first-child Selecciona el elemento que es el primer hijo de su padre
document.querySelector('p:first-child') // => <p>Hola, soy GodoFredo</p>
— :first-of-type Selecciona el elemento que es el primer hijo de su padre y es del mismo tipo
document.querySelector('a:first-of-type')
// <a href="http://facebook.com/godofredo.io">Mi Facebook</a>
— :last-of-type Selecciona el elemento que es el último hijo de su padre y es del mismo tipo
document.querySelector('p:last-of-type');
// <p>¿Cómo estas?</p>
— :not Selecciona los elementos que no coinciden con el selector
document.body.querySelector(':not(a)')
// <p>Hola, soy GodoFredo</p>
— :nth-child(n) Esto selecciona el elemento que es el n hijo de su padre.
<html>
<body>
<div class="div-uno">
<p>Hola, soy GodoFredo</p>
<a href="http://facebook.com/godofredo.io">Mi Facebook</a>
<a href="https://twitter.com/godofredoninja">mi Twitter</a>
</div>
<div class="div-dos">Hola</div>
</body>
</html>
document.querySelector('div:nth-child(2)')
// <div class="div-dos">Hola</div>
Mix and match
Estos selectores se pueden mezclar para realizar algunas comprobaciones complejas.
— Un botón desactivado de la clase 'btn'.
<html>
<body>
<div>
<p>Hola, soy GodoFredo</p>
<p>¿Cómo estas?</p>
<a href="http://facebook.com/godofredo.io">Mi Facebook</a>
<a href="https://twitter.com/godofredoninja">mi Twitter</a>
</div>
<button disabled="true"> Estoy deshabilitado </button>
<button disabled="true" class="btn"> Estoy deshabilitado. mi clase es .btn</button>
</body>
</html>
document.querySelector('button.btn:disabled')
// <button disabled="true" class="btn"> Estoy deshabilitado. mi clase es .btn</button>
Conclusión
Estas son sólo algunas de las formas en que puede utilizar los selectores en javascript y si desea saber más, aquí tiene un enlace a una referencia de selectores de CSS.
