<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Introduccion al DOM.</title>
<script type="text/javascript">
window.onload = function(){
alert("ya se cargo.");
// DOM se creo para poder manipular la estructura d eun documento XHTML agrupnado todos los elementos el NODOS.
// acontinuacion se veran ejemplos
// 1.- getElementsByTagName();
var parrafos = document.getElementsByTagName("p");
// Esta instruccion crea un array de NODOS, con todos los elementos p que hay en el documento.
// 2.- getElementsByName();
var name = document.getElementsByName("nombre");
// Esta instruccion selecciona el o los elementos de la pagina que tienen el tributo name en su etiqueta.
// 3.- getElementsById();
var selector = document.getElementById("parrafo");
//Esta instruccion seleciona el elemento d ela pagina con el ID deseado es la instruccion mas utilizada en la aplicaciones web hoy en dia.
//Creación y eliminación de nodos.
// Creación
var etiqueta = document.createElement("p");
var texto = document.createTextNode("Hola Mundo");
etiqueta.appendChild(texto);
document.body.appendChild(etiqueta);
//Eliminación.
var eliminar = document.getElementById("parrafo");
eliminar.parentNode.removeChild(eliminar);
// Acceder al elemento con la clase "loco"
var clase = document.getElementsByClassName("loco");
//Manejadores de eventos.
//Existen varios eventos que por si solos no sirven de mucho pero si se le agregan funciones o codigo javascript adquieren otra dimencion a estos se le conoce como MANEJADORES.
// Existen 3 manejadores
//1.- Manejadores como atributos de los elementos XHTML.
//Ejemplo: <input type="button" onClick="alert('Acabas de dar click a un boton.')" value="Click aqui"/> el metodo mas sencillo y menos profesional de todos.
//2.- Manejadores como funciones javascript externas.
function pruebaMensaje(){
alert("Esto es una mensaje que se activa cuando das click al boton.");
}
//3.- Manejadores "semanticos".
//La técnica de los manejadores semánticos consiste en:
//1. Asignar un identificador único al elemento XHTML mediante el atributo id.
//2. Crear una función de JavaScript encargada de manejar el evento.
function show(){
alert("Mensaje");
}
//3. Asignar la función externa al evento correspondiente en el elemento deseado.
document.getElementById("mensaje").onclick = show;
}
</script>
</head>
<body>
<p id="parrafo">Esto es un parrafo</p>
<p name="nombre">Esto es un parrafo2</p>
<p class="loco">Esto es un parrafo3</p>
<input type="button" onClick="alert('Acabas de dar click a un boton.')" value="Click aqui" onMouseOver="this.style.background='#FFF';"/><br/>
<input type="button" onClick="pruebaMensaje()" value="Click aqui" /><br/>
<input id="mensaje" type="button" value="Click aqui" />
</body>
</html>
Adentrandome al maravilloso mundo de javascript y sobretodo en el concepto y entendimiento de nodos y el manejos de eventos.
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.