getAttribute y setAttribute y el DOM

Este post está dedicado a los frontend novatos (En ello me incluyo) que están empezando en el mudno del desarrollo web. Como ya seguramente sabrán, cuando se habla de frontend javascript está en el trono absoluto. Javascript es un lenguaje de programación que corre únicamente en los navegadores, es decir, de parte del cliente (A menos claro que lo ejecutes en un entorno diferente a el del navegador, por ejemplo, Node.js) cada día crece más y me arriesgo a decir que puede ser unos de los lenguajes de programación más importantes de la época, ya que su funcionalidad es inmensa.

Sí, sí, javascript es una maravilla, se está comiendo al mundo, es super importante y necesario. BASTA! ya todos seguramente habrán escuchado eso antes, y aunque casi siempre es cierto, todas las funcionalidades que tiene a veces lo puede volver un poco tedioso de aprender. No porque sea difícil, sino por los distintos campos que abarca que hace que te crezca la nariz 200px (Ba dum ts) al decir: “Yo sé JavaScript”.

Bueno, este blog está dedicado un poco a facilitarle la vida a los frontend que estan empezando a ver el mundo de Javascript con don funciones de Javascript sumamente útiles para interactuar con el DOM.

Para lo que no lo sepan, DOM (Document Object Model) es la forma en que JavaScript entiende e interactua con el HTML en forma de objeto. Básicamente el DOM es un objeto con varias llaves anidadas en su interior que representan los elementos html existentes. Como se ve en el gráfico de arriba.
A veces interactuar con él, sobre todo para los principiantes (de nuevo, me incluyo en ello) y por eso he decidido arriesgarme y aportar con mi poco conocimiento a la comunidad.
Ya basta de explicaciones, y vamos a codear!

<script>
	document.createElement('img')
</scrip>

para los que no lo sepan, arriba he creado un elemento img en el DOM. Pero no es visible, ¿por qué? porque necesita lanzarlo de alguna manera para que exista en el dom, y agregarles unos atributos de html para que funcione como debería.

Ahí entran las protagonistas de este blog

<script>const img = document.createElement('img')
	img.setAttribute('src', './img.svg')
	document.appendChild(img)
</script>

¿Qué hcie arriba? fácil

1. Cree el elemento
2. después de crearlo, use el método setAttribute, que toma dos parametros, primero el nombre de la propiedad a setear y el valor de dicha propiedad
3. lo lancé o abrí en el DOM

Y ya, eso es todo, es un ejemplo fácil, peor con un poder inmenso. En ese caso sólo le setié (No sé si se escriba así) el valor src y le coloqué un valor, que fue una ruta. Pero tú puedes setear “href” atributos, rel, type, id, class LO QUE QUIERAS! su poder es inmenso y algo super útil.

Otras veces no queremos setear valores, sino obtenerlos sin modificarlo para saberlo. Para eso tenemos el método getAttribute(). Seguramente ya habrán adivinado como funciona, pero igual, vamos al ejemplo.

<script>const img = document.createElement('img')
	img.setAttribute('src', './img.svg')
	img.setAttribute('id', 'imagen')
	document.appendChild(img)

	document.getElementById('imagen').getAttribute('id')
</script>

Esto funciona así

1. Me aseguré que el elemento estaba visible en el DOM
2. Le puse una id para poder manejar todo mejor
3. Ya después de haberlo obtenido con su id, usé el metodo getAttribute que toma un parametro, y ese es una cadena que es igual al nombre del atributo que mandaste a obtener.
   (Algo importante a recalcar, si no existe el atributo, te devolverá null, en cambio, si existe pero no tiene valor, te devolverá una str vacío)

Eso es todo, muy muy fácil y útil a la vez.
Si has llegado hasta aquí quiero darte las gracias por tu tiempo y espero haberte echado una mano. Es mi primer blog y con la pura intención de ayduar a la comunidad y a los seguidores de un lenguaje tan querido y útil en la comunidad como es Javascript.
(Si se quiere profundizar más sobre estas propiedades, aquí un enlace.