Obteniendo los datos del DOM

8-3-2020

BOM vs. DOM

Se habla mucho en JS del DOM, que significa Document Object Model, y es todo lo que está en nuestra página web.

Pero este DOM está metido en algo más, el BOM, o Browser Objetc Model, donde está la ventana, el Window object.

Porque lo genial de JS es que podemos acceder y modificar algunas cosas en la ventana también, a nivel browser, y no sólo a lo que el usuario tiene en su pantalla.

Pero desde ya, con lo que más trabajamos es con el DOM, y accedemos a él usando algunos métodos (o funciones) del propio DOM:

Imaginemos que tenemos un H1 en el documento html con ID titulo y class título.

Ese ID del h1, que se llama título y que tiene una clase también llamada título, puede ser capturado por JS y podemos hacer lo que queramos.

Hay varias formas de acceder a la información:

console.log(document.getElementById('titulo'))
console.log(document.getElementsByClassName('titulo')[0])
console.log(document.getElementsByTagName('h1')[0])

console.log(document.querySelector('#titulo'))
console.log(document.querySelector('.titulo'))
console.log(document.querySelectorAll('h1')[1])

Referenciamos el DOM (con document), y usamos alguno de los métodos disponibles (por ejemplo getElementById).

 

Aclaraciones Importantes

JS usa camel case, es decir no separa las palabras con guiones sino con mayúsculas.

Si usamos Visual Studio Code podemos generar una plantilla de HTML de ejemplo con ! (me enteré y quiero compartirlo, aunque no es necesariamente sobre JS).

Si el método es en plural devolverá todos los elementos que haya en formato parecido al array llamado HTML collection. Si es en singular devuelve uno. Si hay varios devuelve el primero que encuentra.

El array HTML Collection no es un array propiamente dicha y no se puede usar el foreach loop.

querySelectorAll devuelve un array llamado NodeList que sí se puede usar con foreach, por lo que creo que usaré siempre querySelectorAll.

Lo cómodo es que desde allí podemos ubicar a cualquier elemento, basta con indicar si es un ID con el símbolo # o si es una clase con el símbolo .

 

Ejemplos de uso

 

 let colores = ['rojo','verde','azul']

for(var i=0; i<colores.length; i++) {
    console.log(colores[i])
}
colores.forEach(function(color){
    console.log(color)
})

var titulo = document.getElementById('titulo')

 

Cambiando el contenido existente con JS

Antes de realizar modificaciones, capturamos el elemento que está en el código HTML y lo metemos en una variable:

 
var titulo = document.querySelector('h1')
titulo.innerText = 'Nuevo título'
titulo.innerHTML = 'Nuevo título con código HTML'

Para hacer modificaciones en las clases de los elementos, usamos classList

titulo.classList.add('azul')
titulo.classList.remove('azul')

//asignamos un ID al contenido
titulo.id = 'titulo'

Veamos un ejemplo donde asignamos colores a una lista:

  • Item1
  • Item2
  • Item3
  • Item4
  • Item5
//capturamos todos los items "li", por eso usamos querySelectorAll y no querySelector, sino capturaríamos solamente el primer item de la lista

var items = document.querySelectorAll('li')

//como son 5 items li, hacemos dos arrays con colores para el texto y para el fondo
let coloresFont = ['blue','red','orange','purple','brown']
let coloresBg = ['black','gray','black','gray','black']

//con un for loop vamos a recorrer la items, que es un array (porque usamos querySelectorAll, que nos devuelve siempre un array)

for(var i=0; i<items.length; i++) {
    items[i].innerHTML = 'Elemento Nro. ' + (i+1) + '' 
    items[i].style.color = coloresFont[i]
    items[i].style.backgroundColor = coloresBg[i]
}

Creando nuevos elementos y quitando los existentes

Para crear nuevos elementos usamos createElement y para agregarle algo a un elemento existente usamos appendChild (para quitarle ese agregado usamos removeChild)

//Creamos un nuevo elemento (aún no se mostrará en la pantalla, sólo se crea en memoria)
var parrafo = document.createElement('p')
parrafo.innerHTML = 'Hola soy un párrafo'
parrafo.style.color = 'magenta' //agregamos <style="color:magenta;">
parrafo.id = 'texto' //asignamos un id
parrafo.classList.add('txt') //agregamos la clase texto

//sin el appendChild el párrafo nuevo está creado, pero no se imprime en la página en ninguna parte. AppendChild en Body significa que lo metemos en el body, al final de lo que sea que estuviera impreso hasta el momento.
document.body.appendChild(parrafo)

//document.body.removeChild(parrafo)
var texto = document.getElementById('texto')
document.body.removeChild(texto)

//el elemento lo crea dentro de un div vacío que pusimos en el html con el id "dst"
var dst = document.getElementById('dst')
dst.appendChild(parrafo)
document.body.removeChild(dst)