DOM
Recuperando elementos

Por identificación

document.getElementById('uniqueID')

recuperará

<div id="uniqueID"></div>

Mientras exista un elemento con la ID dada, document.getElementById devolverá solo ese elemento. De lo contrario, se devolverá null .

Nota: las identificaciones deben ser únicas. Varios elementos no pueden tener la misma ID.

Por nombre de clase

document.getElementsByClassName('class-name')

recuperará

<a class="class-name">Any</a>
<b class="class-name">tag</b>
<div class="class-name an-extra-class">with that class.</div>

Si ningún elemento existente contiene la clase dada, se devolverá una colección vacía.

Ejemplo:

<p class="my-class">I will be matched</p>
<p class="my-class another-class">So will I</p>
<p class="something-else">I won't</p>

var myClassElements = document.getElementByClassName('my-class');
console.log(myClassElements.length); // 2
var nonExistentClassElements = document.getElementByClassName('nope');
console.log(nonExistentClassElements.length); // 0

Por nombre de etiqueta

document.getElementsByTagName('b')

recuperará

<b>All</b>
<b>of</b>
<b>the b elements.</b>

Si no existen elementos con el nombre de etiqueta dado, se devolverá una colección vacía.

Por CSS Selector

Considere seguir el código html

<ul>
  <li id=“one” class=“main”>Item 1</li>
  <li id=“two” class=“main”>Item 2</li>
  <li id=“three” class=“main”>Item 3</li>
  <li id=“four”>Item 4</li>
</ul>

El siguiente árbol dom se construirá basándose en el código html anterior

                      ul
    
                      |
    
     |          |         |         |
    
    li         li        li        li
     |          |         |         |
Item 1        Item 2    Item 3    Item 4

Podemos seleccionar elementos del árbol DOM con la ayuda de selectores de CSS. Esto es posible por medio de dos métodos de javascript: querySelector() y querySelectorAll() .

El método querySelector () devuelve el primer elemento que coincide con el selector css dado desde el DOM.

document.querySelector('li.main')

devuelve el primer elemento li quien es la clase main

document.querySelector('#two')

devuelve el elemento con id two

NOTA: Si no se encuentra ningún elemento se devuelve un null . Si la cadena del selector contiene un pseudo-elemento CSS, el retorno será null .

El método querySelectorAll () devuelve todos los elementos que coinciden con el selector css dado desde el DOM.

document.querySelectorAll('li.main')

devuelve una lista de nodos que contiene todos los elementos li cuya clase es main .

NOTA : Si no se encuentra ningún elemento, se devuelve una lista de nodos vacía. Si la cadena de selectores contiene un pseudo-elemento CSS, la elementList devuelta estará vacía

Selectores de consultas

En los navegadores modernos [1] , es posible usar el selector tipo CSS para consultar los elementos de un documento, de la misma forma que sizzle.js (utilizado por jQuery).

querySelector

Devuelve el primer Element en el documento que coincide con la consulta. Si no hay coincidencia, devuelve null .

// gets the element whose id="some-id"
var el1 = document.querySelector('#some-id');
 
// gets the first element in the document containing "class-name" in attribute class
var el2 = document.querySelector('.class-name');
 
// gets the first anchor element in the document
var el2 = document.querySelector('a');
 
// gets the first anchor element inside a section element in the document
var el2 = document.querySelector('section a');

querySelectorAll

Devuelve una lista de NodeList contiene todos los elementos del documento que coinciden con la consulta. Si ninguno coincide, devuelve un NodeList vacío.

// gets all elements in the document containing "class-name" in attribute class
var el2 = document.querySelectorAll('.class-name');
 
// gets all anchor elements in the document
var el2 = document.querySelectorAll('a');

// gets all anchor elements inside any section element in the document
var el2 = document.querySelectorAll('section a');