p name=”primerparrafo” id=”idparrafo1”> Esto es un párrafo p

DOM
<p name=”primerparrafo” id=”idparrafo1”> Esto es un párrafo </p>
-
getElementsByTagName(): obtiene todos los elementos de la página cuya etiqueta sea
igual que el parámetro que se le pasa a la función.
var parrafos = document.getElementsByTagName(“p”);
var primerParrafo = parrafos[0];
-
getElementsByName(): obtiene todos los elementos de la página cuyo atributo name
coincida con el parámetro que se le pasa a la función.
var primerparrafo = document.getElementsByName(“primerparrafo”);
getElementById(): obtiene el elemento cuyo atributo id coincide con el parámetro
indicado en la función. El atributo id debe ser único para cada elemento de una misma
página.
var idparrafo1 = document.getElementById(“idparrafo1”);
-
DOM para HTML.
o Acceso a atributos:
<img id=“logo” src=“logo.gif”>
var laImagen = document.getElementById(“logo”);
laImagen.src = “nuevologo.gif”;
o Acceso a estilo:
<p id="parrafo" style=“font-size:18px;color:red">En rojo a tamaño 18px</p>
var parrafo = document.getElementById("parrafo");
var color = parrafo.style.color;
var tamanyo = parrafo.style.fontSize;
parrafo.style.fontSize = “10px”;
o Para obtener el estilo independientemente de cómo se haya aplicado (style,
class, regla cabecera, etc.)
var parrafo = document.getElementById("parrafo");
var color = parrafo.currentStyle[‘fontSize’]; //Internet Explorer
var color = document.defaultView.getComputedStyle(parrafo,” ”).getPropertyValue(‘font-size’);
-
Propiedad innerHTML: contenido de una etiqueta html.
document.getElementById("idparrafo1").innerHTML = “Nuevo contenido del párrafo”;
BOM
window propiedades
- frames : array de frames
- document: documento html
- status: barra de estado
- alert(“mostrar un texto”);
- confirm(“pedir confirmación”); devuelve true o false
- prompt(“solicitar un texto”);
- setTimeout(función, 3000); invocar función a los 3 segundos
- setInterval(función, 3000); invocar función cada 3 segundos
window.document
- anchors: contiene todas las "anclas" de la página (los enlaces de tipo <a
name="nombre_ancla"></a>)
- embeds: contiene todos los objetos embebidos en la página mediante la etiqueta
<embed>
- forms: contiene todos los formularios de la página
- images: contiene todas las imágenes de la página
- links: contiene todos los enlaces de la página (los elementos de tipo <a
href="enlace.html"></a>)
window.history
- back(): carga el url anterior.
- forward(): carga el url posterior.
window.screen
- availHeight: altura de pantalla disponible para las ventanas
- availWidth: anchura de pantalla disponible para las ventanas
- colorDepth: profundidad de color de la pantalla (32 bits normalmente)
- height: altura total de la pantalla en píxel
- width: anchura total de la pantalla en píxel
window.navigator
- appCodeName: adena que representa el nombre del navegador (normalmente es
Mozilla)
- appName: cadena que representa el nombre oficial del navegador
- appMinorVersion: (sólo Internet Explorer) cadena que representa información extra
sobre la versión del navegador
- appVersion: cadena que representa la versión del navegador
- browserLanguage: cadena que representa el idioma del navegador
- cookieEnabled : boolean que indica si las cookies están habilitadas
- cpuClass: (sólo Internet Explorer) cadena que representa el tipo de CPU del usuario
("x86“, "68K", "PPC", "Alpha", "Other")
- javaEnabled: boolean que indica si Java está habilitado
- language: cadena que representa el idioma del navegador
window.document.form
array de formularios de documento
propiedad elements: array que contiene todos los elementos del formulario: entradas
texto, cajas de selección, botones de radio, áreas de texto, combo box, etc.
window.document.form.elements
- Elementos incluidos dentro del formulario. Se acceden a ellos a través del vector
elements del objeto form, o a través de su nombre (name).
- Propiedades:
o form: referencia al formulario al que pertenece.
o type: tipo de objeto.
o value: valor asociado.
EVENTOS
Evento
Descripción
Elementos para los que está definido
onblur
Deseleccionar el elemento
<button>, <input>, <label>, <select>,
<textarea>, <body>
onchange
Deseleccionar un elemento que se ha
modificado
<input>, <select>, <textarea>
onclick
Pinchar y soltar el ratón
Todos los elementos
ondblclick
Pinchar dos veces seguidas con el ratón
Todos los elementos
onfocus
Seleccionar un elemento
<button>, <input>, <label>, <select>,
<textarea>, <body>
onkeydown
Pulsar una tecla y no soltarla
Elementos de formulario y <body>
onkeypress
Pulsar una tecla
Elementos de formulario y <body>
onkeyup
Soltar una tecla pulsada
Elementos de formulario y <body>
onload
Página cargada completamente
<body>
onmousedown
Pulsar un botón del ratón y no soltarlo
Todos los elementos
onmousemove
Mover el ratón
Todos los elementos
onmouseout
El ratón "sale" del elemento
Todos los elementos
onmouseover
El ratón "entra" en el elemento
Todos los elementos
onmouseup
Soltar el botón del ratón
Todos los elementos
onreset
Inicializar el formulario
<form>
onresize
Modificar el tamaño de la ventana
<body>
onselect
Seleccionar un texto
<input>, <textarea>
onsubmit
Enviar el formulario
<form>
onunload
Se abandona la página, por ejemplo al
cerrar el navegador
<body>