Selectors "Selectores"

Obtener elementos en el DOM "Document Object Model"

querySelectorAll()

Utilizamos la funcion document.querySelectorAll() para encontrar todos los elementos coincidentes en una página. Puede usar cualquier selector CSS válido.

  
  <section class="section" data-section="1"></section>
  <section class="section" data-section="2"></section>
  <section class="section" data-section="3"></section>
  

  
  // Get all elements with tag section
  let selectAllSections = document.querySelectorAll('section');

  // Get all elements with class
  let selectAllByClass = document.querySelectorAll('.section');

  // Get all elements with data-attribute
  let selectAllDataAttr = document.querySelectorAll('[data-section]');

  console.dir(selectAllSections); //-> NodeList(3);
  console.dir(selectAllByClass); //-> NodeList(3)
  console.dir(selectAllDataAttr); //-> NodeList(3)
  

querySelector()

Utilizamos la funcion document.querySelector() para encontrar el primer elemento coincidente en una página. Puede usar cualquier selector CSS válido.

  
  <section class="section" data-section="1"></section>
  <section class="section" data-section="2"></section>
  <section class="section" data-section="3"></section>
  

  
  // Get all elements with tag section
  let selectFirstSection = document.querySelector('section');

  // Get all elements with data-attribute
  let selectDataAttr = document.querySelector('[data-section="2"]');

  console.dir(selectFirstSection); //-> section.section
  console.dir(selectDataAttr); //-> section.section
  

Si en el momento de encontrar algun elemento y este no existe en documento, la funcion nos devuelve el valor de nulo. Para esta situacion podemos utilizar condiciones para evitar valores nulos.

getElementById()

Utilizamos la funcion getElementById() para encontrar el elemento coincidente al identificador.

  
  <section class="section" data-section="1"></section>
  <section in="section_2" class="section" data-section="2"></section>
  <section class="section" data-section="3"></section>
  

  
  let selectById = document.getElementById('section_2');

  console.dir(selectById); //-> section#section_2.section
  

getElementsByClassName()

Utilizamos la funcion getElementsByClassName() para encontrar todos los elementos coincidente a clase o grupos de clases.

  
  <section class="section" data-section="1"></section>
  <section class="section" data-section="2"></section>
  <section class="section" data-section="3"></section>
  

  
  let selectByClass = document.getElementsByClassName('section');

  console.dir(selectByClass); //-> HTMLCollection(3)
  

Importante que esta funcion devuelve una colección de elementos HTML en tiempo real. Si se agrega o elimina algun elemento del DOM después de definir dentro de variable, la coleccion se actualiza automáticamente para reflejar el DOM actual.

getElementsByTagName()

Utilizamos la funcion getElementsByTagName() para encontrar todos los elementos coincidente a etiqueta HTML.

  
  <section class="section" data-section="1"></section>
  <section class="section" data-section="2"></section>
  <section class="section" data-section="3"></section>
  

  
  let selectByTag = document.getElementsByTagName('section');

  console.dir(selectByTag); //-> HTMLCollection(3)
  

matches()

Utilizamos la funcion getElementsByTagName() para verificar si un elemento sería seleccionado por un selector particular o un conjunto de selectores. Devuelve verdadero si el elemento es una coincidencia o existe en el DOM, y falso cuando no.

  
  <section class="section" data-section="1"></section>
  <section class="section" data-section="2"></section>
  <section class="section" data-section="3"></section>
  

  
  let selectById = document.querySelector('#section_2');

  if(selectById.matches('.section')) {
    console.log('It matches!');
  }
  else {
    console.log('Not a match!');
  }
  //-> It matches!