Scribd
Cargar
55 vistas

Javascript DOM

El documento describe el modelo de objetos del documento (DOM), que permite manipular documentos HTML desde JavaScript. Explica cómo acceder y modificar elementos del DOM, así como manejar eventos. También cubre temas como crear nuevos elementos, agregarlos al DOM y validar formularios usando eventos.

Cargado por

Ignacio Quintero
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
55 vistas

Javascript DOM

El documento describe el modelo de objetos del documento (DOM), que permite manipular documentos HTML desde JavaScript. Explica cómo acceder y modificar elementos del DOM, así como manejar eventos. También cubre temas como crear nuevos elementos, agregarlos al DOM y validar formularios usando eventos.

Cargado por

Ignacio Quintero
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 8

Tema 7.

JavaScript y el DOM
2

Índice

▪ Document Object Model (DOM)


▪ Browser Object Model (BOM)
▪ Cookies
▪ Modo estricto
▪ AJAX
▪ Orientación a Objetos
▪ ECMAScript 6
3

Document Object Model (DOM)

▪ El Document Object Model (DOM) es la API para manipular documentos


HTML desde JavaScript
▪ Cuando se carga una página HTML en un navegador, se convierte en un
objeto tipo document
▪ Todos los elementos HTML están representado por el objeto element
4

Document Object Model (DOM)

▪ Acceso a los elementos de un documento:


▪ document.getElementById(“id”): accede a un elemento del
documento usando el atributo id (el atributo id debería ser único en
la página. Si no lo fuese, devuelve el primer elemento con dicho id)
▪ document.getElementsByTagName(“p”): accede a los
elementos con la etiqueta especificada
▪ document.getElementsByClassName(“myClass”): accede a
los elementos con la clase especificada
▪ document.querySelector(“div”): accede a un elemento por su
selector CSS (si hay varios elementos, devuelve el primero que
encuentra).
▪ document.querySelectorAll(“div”): accede todos los
elementos por su selector CSS.
5

Document Object Model (DOM)


▪ Modificación de elementos a través del DOM:
▪ Modificar el contenido HTML de un elemento:
var element = document.getElementById( "txt");
element.innerHTML = "<p>Nuevo texto</p>"

▪ Cambiar el estilo CSS de un elemento:


var element = document.getElementById( "img1");
element.style.borderWidth = "3px";

▪ Crear un nuevo elemento:


var element = document.createElement( "p");
element.innerHtml = “new element”

▪ Añadir un nuevo elemento al DOM:


var para = document.querySelector( "p");
para.appendChild(element);
6

Document Object Model (DOM)

▪ Los eventos HTML pueden ser manejados en JavaScript:


Tipo Evento Ocurrencia
Ratón onclick Al hacer click con el ratón
ondblclick Al hacer doble click con el ratón
onmouseover Al pasar por encima el cursor
Teclado onkeydown Al presionar una tecla
Página onload Al empezar a cargar una página
onbeforeunload Justo antes de abandonar una página
Formulario onchange Cuando un campo de formulario cambia de valor
onsubmit Justo antes de enviar un formulario al servidor

▪ Más eventos: http://www.w3schools.com/jsref/dom_obj_event.asp


7

Document Object Model (DOM)

▪ Ejemplo de captura de eventos (validación de un formulario):

<form id="myForm" action="/processForm" method="post">


<input type="text" name="txt" id="txt">
<input type="submit">
</form>

<script>
window.onload = function () {
var form = document.getElementById( "myForm" );
form.addEventListener( "submit" , function (event) {
var txt = document.getElementById( "txt");
if (!txt.value) {
alert( "You should provide some value to text input" );
txt.focus();
return event.preventDefault();
}
});
}
</script>

También podría gustarte