Título: Curso de javascript | 13. Usar DOM a través de getElementById() Publicado por: TickTack en 22 Agosto 2022, 14:36 pm Usar DOM a través de getElementById()
Echemos un vistazo a getElementById(). Queremos apuntar a un elemento específico en nuestra página HTML. Código ¿Cómo podemos usar javascript para obtener específicamente, por ejemplo, el primer párrafo? Para hacer esto, usamos la instrucción de javascript getElementById(). Nuestro elemento deseado ahora necesita un identificador único. Podemos agregar el atributo id y un nombre único a cualquier elemento HTML directamente en el código HTML. Aquí se aplican las siguientes reglas para un nombre único:
En nuestro ejemplo, demos a nuestro primer párrafo el atributo HTML id y el nombre area1. Aquí el fragmento del código HTML extendido: Código Ahora podemos agregar el nombre a nuestro comando de javascript getElementById(). Además, a través de document., decimos que se use el documento HTML actual (es decir, nuestro árbol DOM): Código
Si ejecutamos nuestro programa javascript, todavía no sucede nada visible. Ahora podemos acceder a un elemento específico. Nuestro elemento contiene el comando HTML completo y el contenido "Primer parrafo con texto" encerrado por el comando, es decir, la completa rama seleccionada, incluidas todas las ramillas y hojas de nuestro árbol DOM. Si solo queremos el texto y no la rama completa - en otras palabras, no queremos que se devuelvan atributos ni comandos HTML - javascript nos ofrece la extensión a través de innerHTML. Código
Por supuesto, estas notaciones de puntos hacen que las instrucciones en javascript sean cada vez más largas y, por lo tanto, más y más confusas. Y en la mayoría de las veces, en repetidas veces se necesita acceso al mismo elemento. Por lo tanto, se construye a partir del siguiente código Código
la siguiente construcción usando una variable: Código
Expandi nuestro programa existente y ve si hay una salida en la consola. Hay un 50% de posibilidades de que funcione (salvo por errores tipográficos). ¡Primero probalo antes de seguir leyendo! ¡En serio! ¿Funcionó? ¿Obtuviste el resultado esperado? Entonces nuestro programa javascript se insertó después de las salidas HTML en el archivo: Código
Si no funcionó, nuestras instrucciones de javascript se insertaron antes de las salidas HTML de los párrafos. Entonces no viene ningún contenido, sino mensajes de error en forma de "Uncaught TypeError: Connot read property …". ¡Probalo, porque en el próximo capítulo nos haremos independientes de la posición de nuestras declaraciones de javascript en nuestro archivo! |