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.