Navegar por el DOM
Query Selector

<< Document Object Model Manipular el DOM >>

Los siguientes métodos nos permiten acceder a los diferentes nodos del DOM. Muchos de ellos, además de usarlos desde document, también se pueden usar desde cualquier elemento HTML que tengamos referenciado en el código.

  • document.documentElement → Representa el elemento <html>
  • document.head → Representa el elemento
  • document.body → Representa el elemento
  • document.getElementById("id") → Devuelve el elemento que tiene el id especificado, o null si no existe.
  • document.getElementsByClassName("class") → Devuelve un array de elementos que tengan la clase CSS especificada. Al llamar a este método desde otro nodo distinto de document, buscará los elementos a partir de dicho nodo.
  • document.getElementsByTagName("HTML tag") → Devuelve un array con los elementos con la etiqueta HTML especificada (Por ejemplo "p" → párrafos), que estén dentro del nodo referenciado.
  • element.firstElementChild o element.lastElementChild → Devuelve el primer (o último) elemento HTML contenido (hijo) en el nodo actual. También existen las propiedades firstChild y lastChild. La diferencia es que estas últimas tienen en cuenta cualquier tipo de nodo, incluyendo texto y comentarios.
  • element.children → Devuelve una colección con todos los elementos HTML que contiene el nodo referenciado. La colección no es de tipo Array sino HTMLCollection, que es similar, pero más limitada. También podemos utilizar element.childNodes, pero en este caso nos devolverá también los nodos de texto y comentarios como parte de la colección.
  • element.parentNode → Devuelve el nodo padre de un elemento.
  • element.nextElementSibling → Devuelve el siguiente nodo del mismo nivel (el hermano). El método previousElementSibling devuelve el anterior. Estas propiedades solo tienen en cuenta nodos del tipo HTML. También tenemos las propiedades nextSibling o previousSibling que tienen en cuenta el texto y los comentarios.
<!DOCTYPE>
<html>
    <head>
        <title>JS Example</title>
        <script src="./index.js" defer></script>
    </head>
    <body>
          <ul>
              <li id="firstListElement">Element 1</li>
              <li>Element 2</li>
              <li>Element 3</li>
          </ul>
    </body>
</html>

Query Selector

Además de los métodos vistos anteriormente para obtener elementos del DOM, existen unos más avanzados que utilizan selectores CSS para devolver los elementos HTML que cumplan ciertas características. Estos métodos se pueden llamar desde document, o desde cualquier nodo HTML del DOM.

  • document.querySelector("selector") → Devuelve el primer elemento que coincide con el selector.
  • document.querySelectorAll("selector") → Devuelve una colección con todos los elementos que coinciden con el selector.
  • element.closest("selector") → Navega hacia arriba por el árbol del DOM hasta encontrar un nodo antecesor del actual que cumpla con el selector.
a  /* Elementos con la etiqueta HTML <a> */
.class /* Elementos con la clase "class" */
#id  /* Elementos con el id "id" */
.class1.class2 /* Elementos que tienen ambas clases, "class1" y "class2" */
.class1,.class2 /* Elementos que contienen o la clase "class1", o "class2" */
.class1 p /* Elementos <p> dentro de elementos con la clase "class1" */
.class1 > p /* Elementos <p> que son hijos inmediatos con la clase "class1" */
#id + p /* Elemento <p> que va después (siguiente hermano) de un elemento que tiene el id "id" */
#id ~ p /* Elementos que son párrafos <p> y hermanos de un elemento con el id "id" */
.class[attrib] /* Elementos con la clase  "class" y un atributo llamado "attrib" */
.class[attrib="value"] /* Elementos con la clase "class" y un atributo "attrib" con el valor "value" */
.class[attrib^="value"] /* Elementos con la clase "class" y cuyo atributo "attrib" comienza con "value" */
.class[attrib*="value"] /* Elementos con la clase "class" cuyo atributo  "attrib" en su valor contiene "value" */
.class[attrib$="value"] /* Elementos con la clase "class" y cuyo atributo "attrib" acaba con "value" */

Ejemplo usando querySelector() y querySelectorAll():

<!DOCTYPE>
<html>
    <head>
        <title>JS Example</title>
        <script src="./index.js" defer></script>
    </head>
    <body>
        <div id="div1">
          <p>
              <a class="normalLink" href="hello.html" title="hello world">Hello World</a>
              <a class="normalLink" href="bye.html" title="bye world">Bye World</a>
              <a class="specialLink" href="helloagain.html" title="hello again">Hello Again World</a>
          </p>
        </div>
    </body>
</html>

<< Document Object Model Manipular el DOM >>