Hasta el momento todo lo abarcado en los artículos ha permitido entender un poco mejor muchos de los pormenores de este interesante pero complejo lenguaje, pero muy poco se ha hecho por entender cómo modificar lo que el usuario utiliza, qué es en esencia lo que más necesita un usuario JavaScript, por esto en esta entrega vamos a empezar con la exploración de el objeto donde se almacena el contenido de la página, el objeto document.
Peleando con el documento
Ya habíamos hablado acerca de que en el momento en el que el navegador carga una página web toma todo el contenido HTML y lo convierte en objetos, estos objetos en realidad son nodos "manipulables", que a su vez contienen otros nodos. A esto se le llama document.
Es muy importante resaltar que todo lo que hay en el document es un nodo, a continuación vamos a ver un ejemplo de esto.
<html>
<head>
<title>El Documento...</title>
</head>
<body>
<h1>El Documento</h1>
<div>Este es un ejemplo...</div>
</body>
</html>
Si hiciéramos un esquema a manera de árbol de cómo se ve este HTML tendríamos:
Muy bonito pero...
¿Para qué nos sirve entender esto?, la idea de entender esto es poder desplazarnos por el árbol sin depender únicamente de los identificadores, las etiquetas o los nombres.
Esta bien, y ¿Cómo me desplazo?
Esa es la parte divertida, porque para desplazarnos el objeto document nos ofrece unas herramientas, a continuación vamos a ver algunas de estas:
| Orden | Descripción |
|---|---|
| document.getElementById(valor) | Retorna el elemento que en el atributo id tenga el valor especificado. |
| document.getElementsByName(nombre) | Retorna una lista de todos los elementos que tengan el nombre especificado. |
| document.getElementsByTagName(tag) | Retorna una lista de todos los elementos hechos con con el tag especificado |
Y Para Terminar...
Vamos a hacer un ejemplo de una función que busca el título de nuestra página y lo cambia, otra que cambia el contenido de un div y su color de fondo y cada una va a ser asociada a un botón. Después del código esta el ejemplo.
<html>
<head>
<title>El Documento...</title>
<script>
function cambiarTituloPor(nuevoTitulo){
document.getElementsByTagName("title")[0].innerHTML=nuevoTitulo;
}
function cambiarContenidoPor(nuevoContenido){
var elemento = document.getElementById("modificable");
elemento.innerHTML=nuevoContenido;
var estilo = document.createAttribute("style");
estilo.value = "background-color:#1662A8;";
elemento.setAttributeNode(estilo);
}
</script>
</head>
<body>
<h1>El Documento</h1>
<div id="modificable">Este es un ejemplo...</div>
<button onclick="cambiarTituloPor(prompt('Nuevo Título','Hola Mundo!!!'))">Cambiar Título</button>
<button onclick="cambiarContenidoPor(prompt('Nuevo Contenido','Estoy aprendiendo JavaScript...'))">Cambiar Div</button>
</body>
</html>
Este es un ejemplo...
No hay comentarios:
Publicar un comentario