Hay un tutorial específico para el DOM en w3schools. Aquí nos vamos a ceñir a lo mínimo que necesitaremos de momento, que es acceder a un elemento de un documento HTML por su atributo id y cambiar el contenido de un elemento HTML.
Los elementos del DOM tienen funciones (métodos) y propiedades. De momento sólo vamos a necesitar usar uno de cada: la función getElementById de la variable document, que contiene todo el documento HTMLy la propiedad innerHTML de los elementos que tienen etiqueta de apertura y de cierre, que contiene el HTMLque queda entre ambas etiquetas, el HTML"de dentro" del elemento.
Acceder a un elemento por su id con getElementById("id")
var element=document.getElementById("id_del_elemento")
Ejemplo:si tenemos la siguiente página web con un canvas con id="my_canvas"
<html> <head> </head> <body> <canvas id="my_canvas" width="200" height="100"></canvas> </body> </html>accederíamos al canvas desde un script javascript (y lo asignaríamos a una variable llamada canvas) con :
var canvas = document.getElementById("my_canvas");
Cambiar el contenido de un elemento cambiando su propiedad innerHTML.
En particular, cambiar el contenido de texto de un elemento. Recordemos que el contenido de un elemento HTML es lo que queda entre las etiquetas de apertura y de cierre. Uno de los errores más comunes consiste en cambiar el contenido de un elemento que no tiene texto como contenido sino que contiene otros elementos. Por ejemplo el elemento <head> suele contener otros elementos HTMLen lugar de texto.Por ejemplo, si tenemos el siguiente elemento:
<title id="titulo">Este es el viejo título de la página </title>podríamos cambiar el texto del título de la página web mediante un script de javascript con las siguientes instrucciones:
var titulo = document.getElementById("titulo");
titulo.innerHTML = "Nuevo Título!!!!";
Para abreviar se podrían encadenar ambas instrucciones en una sola:document.getElementById("titulo").innerHTML = "Nuevo Título!!!!";
Esto es todo lo que necesitamos saber sobre el DOM de momento.
No hay comentarios:
Publicar un comentario