Tema 11Accediendo a Elementos de HTML
JavaScript nos permite interactuar, crear o eliminar elementos de nuestra página. Existen varias funciones en JavaScript que nos permiten acceder a elementos de HTML, dependiendo de si quieres obtener uno o varios elementos, y a partir de su tipo, sus clases o IDs.
El DOM
DOM significa Document Object Model, esto es la estructura del documento HTML, sus elementos, atributos, etc. Todo navegador crea un DOM al acceder a una página web, y JavaScript utiliza este modelo para poder acceder, agregar, borrar y modificar elementos del documento. El modelo DOM se acomoda como un árbol de la siguiente manera:
A continuación te mostramos algunos ejemplos modificando HTML utilizando diferentes funciones, copia el código de los ejemplos y juega con él; la mejor manera de aprender es experimentando.
Acceder a Elementos por ID
Como aprendimos anteriormente, un ID se asigna a un elemento único de la página. Para obtener un elemento por ID en JavaScript, se utiliza la función document.getElementById(). Se utiliza así:
See the Pen mdrjbpB by Luis Yerik Arambula (@luis-yerik-arambula) on CodePen.
CodePen. Software utilizado para el desarrollo de ejercicio dinámico de programación. In CodePen. https://codepen.io
Observa que, para utilizar las propiedades del elemento, tuvimos que asignar el resultado de getElementById a la variable elem.
Para hacer las modificaciones, utilizamos la propiedad innerHTML, a la cual se le asigna el HTML interno del elemento como tipo string. Vinculamos el botón de "Cambiar" a la primera función, la cual asigna un mensaje al HTML interno del elemento con ID "rect". Nota que en la segunda función (la cual está vinculada con el segundo botón) le asignamos un elemento de enlace al HTML interno.
Los botones se pueden implementar con la etiqueta <button> y con el atributo onclick les podemos asignar una función de JavaScript. Analiza bien todo el código, experimenta con la función innerHTML agregando textos y elementos diferentes.