¡Descarga Javascript DOM y BOM y más Resúmenes en PDF de Programación Java solo en Docsity!
JS HTML DOM
JavaScript HTML DOM
Con el DOM HTML, JavaScript puede acceder y cambiar todos los elementos de un documento HTML.
El HTML DOM (Document Object Model) Cuando se carga una página web, el navegador crea una D ocument O bject M odelo de la página. El código HTML DOM modelo está construido como un árbol de objetos : El HTML DOM Árbol de objetos
Con el modelo de objetos, JavaScript recibe toda la energía que necesita para crear HTML dinámico:
• JavaScript puede cambiar todos los elementos HTML de la página
• JavaScript puede cambiar todos los atributos HTML en la página
• JavaScript puede cambiar todos los estilos CSS en la página
• JavaScript puede quitar elementos y atributos HTML existentes
• JavaScript puede añadir nuevos elementos y atributos HTML
• JavaScript puede reaccionar a todos los eventos de HTML existentes en la página
• JavaScript puede crear nuevos eventos HTML en la página
Lo que aprenderá En los próximos capítulos de este tutorial usted aprenderá:
• Cómo cambiar el contenido de los elementos HTML
• Cómo cambiar el estilo (CSS) de los elementos HTML
• Cómo reaccionar ante los acontecimientos HTML DOM
• Cómo agregar y eliminar elementos HTML
¿Qué es el DOM? El DOM es una W3C (World Wide Web Consortium) estándar. El DOM define un estándar para acceso a los mismos: "El modelo de objetos de W3C DOM (Document) es una plataforma e interfaz de lenguaje neutro que permite a los programas y scripts acceder y actualizar dinámicamente el contenido, la estructura y el estilo de un documento."
El estándar W3C DOM se divide en 3 partes:
• Núcleo DOM - modelo estándar para todos los tipos de documentos
• DOM XML - modelo estándar para los documentos XML
• HTML DOM - modelo estándar para los documentos HTML
¿Qué es el DOM HTML? El DOM HTML es un estándar de objetos de modelo y la interfaz de programación de HTML. Se define:
• Los elementos HTML como objetos
• Las propiedades de todos los elementos HTML
• Los métodos para acceder a todos los elementos HTML
• Los eventos de todos los elementos HTML
En otras palabras: El DOM HTML es un estándar de cómo obtener, cambiar, añadir o eliminar elementos HTML.
JavaScript - HTML DOM Métodos JavaScript - HTML DOM Methods
Métodos DOM HTML son las acciones que puede realizar (en Elementos HTML) Propiedades DOM HTML son los valores (de los elementos de HTML) que puede establecer o cambiar
La interfaz de programación DOM El HTML DOM se puede acceder con JavaScript (y con otros lenguajes de programación). En el DOM, todos los elementos HTML se definen como objetos. La interfaz de programación son las propiedades y métodos de cada objeto. Una propiedad es un valor que se puede obtener o establecer (como cambiar el contenido de un elemento HTML). Un método es una acción que puede hacer (como añadir o eliminar un elemento de HTML).
Ejemplo El ejemplo siguiente cambia el contenido (el innerHTML) del elemento
con id = "demo":
Resultado: My First Page Hello World!
En el ejemplo anterior, getElementById es un método , mientras que innerHTML es una propiedad.
El método getElementById La forma más común para acceder a un elemento HTML es utilizar el id del elemento. En el ejemplo anterior, el método utilizado Identificación getElementById = "intro" para encontrar el elemento.
La propiedad innerHTML La forma más fácil de obtener el contenido de un elemento es mediante el uso de la innerHTML propiedad. La propiedad innerHTML es útil para conseguir o reemplazar el contenido de los elementos HTML.
La propiedad innerHTML se puede utilizar para obtener o cambiar cualquier elemento HTML, incluyendo y .
JavaScript HTML DOM Documento JavaScript HTML DOM Document
Con el DOM HTML, el objeto del documento es su página web.
El documento HTML DOM En el modelo de objetos HTML DOM, el objeto documento representa su página web. El objeto del documento es el propietario de todos los demás objetos en su página web. Si desea acceder a los objetos en una página HTML, siempre se empieza con el acceso al objeto de documento.
document.documentURI Returns the URI of the document Devuelve la URI del documento
document.domain Returns the domain name of the document server Devuelve el nombre de dominio del servidor de documentos
document.domConfig Returns the DOM configuration Devuelve la configuración del DOM
document.embeds Returns all elements Devuelve todos los elementos
document.forms Returns all elements Devuelve todos los elementos
document.head Returns the element evuelve el elemento
document.images Returns all elements Devuelve todos los elementos
document.implementation Returns the DOM implementation Devuelve la implementación DOM
document.inputEncoding Returns the document's encoding (character set) Devuelve la codificación del documento (conjunto de caracteres)
document.lastModified Returns the date and time the document was updated Devuelve la fecha y hora del documento se actualizó
document.links Returns all and elements value in href Devuelve todo y valor elementos en href
document.readyState Returns the (loading) status of the document Devuelve el (carga) el estado del documento
document.referrer Returns the URI of the referrer (the linking document) Devuelve la URI de la de referencia (el documento de vinculación)
document.scripts Returns all
Encontrar elementos HTML por Nombre de clase Si usted quiere encontrar todos los elementos HTML con el mismo nombre de la clase. Utilice este método: document.getElementsByClassName("intro"); El ejemplo anterior devuelve una lista de todos los elementos con class = "intro".
Encontrar elementos por nombre de clase no funciona en Internet Explorer 5,6,7 y 8.
Encontrar elementos HTML mediante HTML colecciones de objetos En este ejemplo se encuentra el elemento de formulario con id = "frm1", en la colección de formas, y muestra todos los valores de los elementos: Ejemplo var x = document.getElementById("frm1"); var text = ""; for (var i = 0; i "; } document.getElementById("demo").innerHTML = text;
Los siguientes objetos HTML (y colecciones de objetos) son también accesibles:
- document.anchors
- document.body
- document.documentElement
- (^) document.embeds
- document.forms
- document.head
- document.images
- (^) document.links
- document.scripts
- document.title
JavaScript HTML DOM - Cambio de HTML JavaScript HTML DOM - Changing HTML
El HTML DOM permite JavaScript para cambiar el contenido de los elementos HTML.
Cambio de la secuencia de salida HTML JavaScript puede crear contenido HTML dinámico: Fecha: dom 11 de mayo 2014 19:18:10 GMT +0200 (Hora de verano romance)
En JavaScript document.write () se puede utilizar para escribir directamente en la secuencia de salida HTML: Ejemplo
JavaScript HTML DOM - Changing CSS
El HTML DOM permite JavaScript para cambiar el estilo de los elementos HTML. Cambiar el estilo de HTML Para cambiar el estilo de un elemento HTML, utilice la siguiente sintaxis: document.getElementById( id ).style. property = new style
El ejemplo siguiente cambia el estilo de un elemento
: Ejemplo
Hello World!
The paragraph above was changed by a script.
Utilizar eventos El HTML DOM permite ejecutar código cuando se produce un evento. Los eventos se generan por el navegador cuando "las cosas suceden" a elementos HTML:
- Un elemento que se hace clic en
- La página se ha cargado
- Los campos de entrada se cambian Usted aprenderá más acerca de los acontecimientos en el siguiente capítulo de este tutorial.
En este ejemplo se cambia el estilo del elemento HTML con id = "id1", cuando el usuario hace clic en un botón: Ejemplo
My Heading 1
Click Me!
Más ejemplos
Visibilidad Cómo hacer un elemento invisible. ¿Usted desea que el elemento se muestra o no?
This is a text. This is a text. This is a text. This is a text.
HTML DOM Estilo de Referencia de Objetos Para todas las propiedades de estilo DOM HTML, visita nuestra completa HTML DOM Estilo de Referencia de Objetos.
JavaScript HTML DOM Events
HTML DOM permite JavaScript para reaccionar a los eventos de HTML. Ejemplo Mouse Over Me Click Me
Reaccionar a eventos Un JavaScript puede ejecutarse cuando se produce un evento, como cuando un usuario hace clic en un elemento HTML. Para ejecutar código cuando un usuario hace clic en un elemento, añadir código JavaScript a un atributo de evento HTML: onclick= JavaScript
Ejemplos de eventos de HTML:
- Cuando un usuario hace clic en el ratón
- Cuando una página web se ha cargado
- Cuando una imagen se ha cargado
- (^) Cuando el ratón se mueve sobre un elemento
- Cuando se cambia un campo de entrada
- Cuando se envía un formulario HTML
- Cuando un usuario se acaricia una clave
En este ejemplo, el contenido del elemento se cambia cuando un usuario hace clic en él: Ejemplo
Click on this text!
En este ejemplo, una función es llamada desde el controlador de eventos: Ejemplo
Click on this text!
Atributos de eventos HTML Para asignar los eventos a elementos HTML que puede utilizar atributos de evento. Ejemplo
Asignar un evento onclick a un elemento de botón: Try it
En el ejemplo anterior, una función llamada DisplayDate se ejecutará cuando se haga clic en el botón.
Asignar eventos utilizando el DOM HTML El HTML DOM permite asignar eventos a elementos HTML utilizando JavaScript: Ejemplo
Asignar un evento onclick a un elemento de botón:
En el ejemplo anterior, una función llamada DisplayDate se asigna a un elemento HTML con el id = "myBtn". La función se ejecuta cuando se hace clic en el botón.
Los onload y OnUnload Eventos Los eventos onload y OnUnload se activan cuando el usuario entra o sale de la página. El proceso de carga se puede utilizar para comprobar el tipo de navegador y versión del navegador del visitante, y cargar la versión correcta de la página web en base a la información. Los eventos onload y OnUnload se pueden utilizar para hacer frente a las cookies.
Ejemplo
El evento onchange El evento onchange se utilizan a menudo en combinación con la validación de campos de entrada. A continuación se muestra un ejemplo de cómo utilizar el onchange. La función de mayúsculas () se llama cuando un usuario cambia el contenido de un campo de entrada.
Ejemplo
DOM Tutorial
DOM Lesson one
Hello world!
Desde el HTML anterior se puede leer:
- es el nodo raíz
- no tiene padres
- es el padre de y
- es el primer hijo de
- es el último hijo de y:
- tiene un hijo:
- <title> tiene un hijo (un nodo de texto): "DOM Tutorial"
- <body> tiene dos hijos: <h1> y <p>
- <h1> tiene un hijo: "Lección DOM uno"
- <p> tiene un hijo: "¡Hola, mundo!"
- <h1> y <p> son hermanos
Navegando entre nodos Usted puede utilizar las siguientes propiedades del nodo para navegar entre los nodos con JavaScript:
- parentNode
- childNodes [ NodeNumber ]
- firstChild
- lastChild
- nextSibling
Advertencia! Un error común en el procesamiento DOM es esperar un nodo de elemento que contenga texto. En este ejemplo: ** DOM Tutorial </ title>** , el nodo de elemento <title> no contiene texto. Contiene un nodo de texto con el valor "DOM Tutorial". El valor del nodo de texto se puede acceder por el nodo innerHTML propiedad o la nodeValue.
Nodos secundarios y valores de nodo Además de la propiedad innerHTML, también puede utilizar los childNodes y propiedades nodeValue para obtener el contenido de un elemento. El siguiente ejemplo se recoge el valor de nodo de un elemento <h1> y copiarlo en un elemento <p>: Ejemplo <html> <body>
<h1 id="intro">My First Page</h1>
<p id="demo">Hello!</p>
<script> var myText = document.getElementById("intro").childNodes[0].nodeValue; document.getElementById("demo").innerHTML = "Hello World!"; </script>
</body> </html>
En el ejemplo anterior, getElementById es un método, mientras childNodes y nodeValue son propiedades. En este tutorial se utiliza la propiedad innerHTML. Sin embargo, aprender el método anterior es útil para la comprensión de la estructura de árbol y la navegación del DOM.
Usando la propiedad firstChild es lo mismo que usar childNodes [0]: Ejemplo <html> <body>
<h1 id="intro">My First Page</h1>
<p id="demo">Hello World!</p>
<script> myText = document.getElementById("intro").firstChild.nodeValue; document.getElementById("demo").innerHTML = myText; </script>
</body> </html>
DOM Root Nodos Hay dos propiedades especiales que permiten el acceso al documento completo:
- document.documentElement - El documento completo
- document.body - El cuerpo del documento
Ejemplo <html> <body>
<p>Hello World!</p> <div> <p>The DOM is very useful!</p> <p>This example demonstrates the <b>document.body</b> property.</p> </div>
<script> alert(document.body.innerHTML); </script>
</body> </html> Ejemplo
Este código agrega el nuevo elemento a elemento existente: element.appendChild(para);
Crear nuevos elementos HTML - insertBefore () El método appendChild () en el ejemplo anterior, añade el nuevo elemento como el último hijo del padre.
Si usted no quiere que se puede utilizar el método insertBefore (): Ejemplo
This is a paragraph.
This is another paragraph.
Extracción existente elementos HTML Para quitar un elemento HTML, usted debe saber que el padre del elemento: Ejemplo
This is a paragraph.
This is another paragraph.
Ejemplo Explicación Este documento HTML contiene un elemento con dos nodos secundarios (dos elementos
):
This is a paragraph.
This is another paragraph.
Busque el elemento con id = "div1": var parent = document.getElementById("div1"); Busque el elemento
con id = "p1": var child = document.getElementById("p1"); Retire el niño del padre: parent.removeChild(child);
Sería bueno poder para eliminar un elemento, sin referirse a los padres. Pero lo siento. El DOM necesita saber tanto el elemento que desea eliminar, y su padre.
Aquí hay una solución común: Buscar el niño que desea eliminar, y utilizar su propiedad parentNode para encontrar al padre: var child = document.getElementById("p1"); child.parentNode.removeChild(child); Sustitución de elementos HTML
Para reemplazar un elemento al DOM HTML, utilice el replaceChild (método): Ejemplo
This is a paragraph.
This is another paragraph.
JavaScript HTML DOM lista de nodos
JavaScript HTML DOM Node List
Una lista de nodos es un conjunto de nodos (como el conjunto de todos los elementos HTML)
HTML DOM lista de nodos El método getElementsByTagName () devuelve una lista de nodos. Una lista de nodos es un conjunto de nodos. El código siguiente selecciona todos los nodos
en un documento: Ejemplo var x = document.getElementsByTagName("p"); Los nodos pueden ser accedidos por el número de índice. Para acceder a la segunda
puede escribir: y = x[1]; Nota: El índice comienza en 0.
Lista HTML DOM Nodo Largo La propiedad length define el número de nodos de un nodo-list: Ejemplo
How many paragraphs in this document?
myNodelist = document.getElementsByTagName("p"); document.getElementById("demo").innerHTML = myNodelist.length;
Ejemplo explicó:
1. Obtén todos los elementos
en una lista de nodos (array)
2. Visualice la longitud de la lista de nodos
JS Browser BOM
JavaScript Window - The Browser Object Model JavaScript Window - El Examinador de objetos Modelo El Explorador de modelos de objetos (BOM) permite JavaScript para "hablar con" el navegador.
El Examinador de objetos de modelo (BOM) No existen normas oficiales para el B rowser O bject M odelo (BOM). Dado que los navegadores modernos han puesto en práctica (casi) los mismos métodos y propiedades para la interactividad con JavaScript, se refieren a menudo como los métodos y las propiedades de la lista de materiales.
La ventana de objetos La ventana de objeto es compatible con todos los navegadores. Se representa la ventana del navegador. Todos los objetos globales de JavaScript, las funciones y las variables se convierten automáticamente en miembros del objeto ventana. Las variables globales son propiedades del objeto ventana.
Funciones globales son métodos del objeto window. Incluso el objeto de documento (DOM del HTML) es una propiedad del objeto de ventana: window.document.getElementById("header");
Es el mismo que: document.getElementById("header");
Tamaño de la ventana Tres propiedades diferentes se pueden utilizar para determinar el tamaño de la ventana del navegador (la ventana del navegador, NO incluyendo barras de herramientas y barras de desplazamiento).
Para Internet Explorer, Chrome, Firefox, Opera y Safari:
• window.innerHeight - la altura interior de la ventana del navegador
• window.innerWidth - la anchura interior de la ventana del navegador
Para Internet Explorer 8, 7, 6, 5:
• document.documentElement.clientHeight
• documentElement.clientWidth
• o
• document.body.clientHeight
• document.body.clientWidth
Una solución práctica JavaScript (que cubre todos los navegadores): Ejemplo var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
**Ejemplo**
Visualice la profundidad de color de la pantalla en bits: "Color Depth: " + screen.colorDepth
El resultado será: Color Depth: 24
Algunos ordenadores reportan 32. Mayoría de las computadoras reportan 24. Tanto pantalla "True Colors" (16.777.216 colores diferentes).
Pantalla de la ventana Profundidad de píxel La propiedad screen.pixelDepth devuelve la profundidad de píxeles de la pantalla. Ejemplo
Visualice la profundidad de píxeles de la pantalla en bits: "Pixel Depth: " + screen.pixelDepth
El resultado será: Pixel Depth: 24
Para las computadoras modernas, la profundidad de color y profundidad de píxel son iguales.
JavaScript ventana Ubicación JavaScript Window Location
El objeto window.location se puede utilizar para obtener la dirección de la página (URL) actual y para redirigir el navegador a una página nueva.
Ventana Ubicación El window.location objeto puede estar escrita sin el prefijo ventana. Algunos ejemplos:
- location.href devuelve el href (URL) de la página actual
- location.hostname devuelve el nombre de dominio del proveedor de alojamiento web
- location.pathname devuelve la ruta y el nombre de la página actual
- location.protocol devuelve el protocolo web utiliza (http:// o https://)
- location.assign carga un nuevo documento
Ventana Ubicación Href La propiedad location.href devuelve la dirección URL de la página actual. Ejemplo
Visualice el href (URL) de la página actual: "Page location is " + location.href; El resultado es: Page location is http://www.w3schools.com/js/js_window_location.asp
Ventana Ubicación Hostname La propiedad location.hostname devuelve el nombre del host de Internet (de la página actual). Ejemplo
Muestra el nombre del host: "Page host is " + location.hostname; El resultado es: Page hostname is www.w3schools.com
Ventana Ubicación NombreRuta La propiedad location.pathname devuelve el nombre de la ruta de la página. Ejemplo Muestra el nombre de la ruta de la URL actual: "Page path is " + location.pathname; El resultado es: /js/js_window_location.asp
Ventana Ubicación Protocolo La propiedad location.protocol devuelve el protocolo de Internet de la página. Ejemplo
Muestra el protocolo de Internet:
"Page protocol is " + location.protocol; El resultado es: Page protocol is http:
Ventana Ubicación Asignar El método location.assign () carga un nuevo documento. Ejemplo Cargar un nuevo documento:
JavaScript ventana Historia JavaScript Window History
El objeto window.history contiene el historial de los navegadores.
Ventana de Historia El window.history objeto puede estar escrita sin el prefijo ventana. Para proteger la privacidad de los usuarios, existen ciertas limitaciones sobre el JavaScript puede acceder a este objeto. Algunos métodos:
- history.back () - equivale a hacer clic de nuevo en el navegador
- history.forward () - equivale a hacer clic con interés en el navegador
Ventana History Volver El método history.back () carga el URL anterior en la lista de historial. Esto es lo mismo que hacer clic en el botón Atrás en el navegador. Ejemplo Crear un botón de retroceso en una página:
Ventana Historia Forward La historia método forward () carga el siguiente URL en la lista del historial. Esto es lo mismo que hacer clic en el botón Reenviar en el navegador. Ejemplo
Crear un botón de avance en una página:
- Los datos del navegador pueden ser cambiados por el propietario navegador
- Algunos navegadores identifican incorrectamente a sí mismos a pruebas en el sitio de derivación
- Los navegadores no pueden informar de los nuevos sistemas operativos, publicado a más tardar el navegador
La Plataforma Browser La propiedad plataforma devuelve la plataforma de navegador (sistema operativo): Ejemplo
El idioma del navegador La propiedad idioma devuelve el idioma del navegador: Ejemplo
Está habilitado Java? El método javaEnabled () devuelve verdadero si Java está habilitado: Ejemplo
JavaScript Cajas Emergentes JavaScript Popup Boxes
JavaScript tiene tres tipos de cajas del popup: cuadro de alerta, cuadro Confirmar, y cuadro de aviso.
Caja de Alerta Una caja de alerta se utiliza a menudo si usted quiere asegurarse de que la información llegue hasta el usuario. Cuando un cuadro de alerta aparece, el usuario tendrá que hacer clic en "Aceptar" para continuar.
Sintaxis window.alert(" sometext ");
El window.alert método puede ser escrita sin el prefijo ventana. Ejemplo alert("I am an alert box!");
Confirmar Caja Aparecerá un cuadro de confirmación se utiliza a menudo si desea que el usuario para verificar o aceptar algo. Cuando un cuadro de confirmación aparece, el usuario tendrá que hacer clic en "OK" o "Cancelar" para continuar. Si el usuario hace clic en "Aceptar", la caja devuelve true. Si el usuario hace clic en "Cancelar", la caja devuelve false. Sintaxis window.confirm(" sometext ");
El window.confirm () método puede ser escrita sin el prefijo ventana. Ejemplo var r=confirm("Press a button"); if (r==true) { x="You pressed OK!"; } else { x="You pressed Cancel!"; }
Caja Prompt Un cuadro de mensaje se utiliza a menudo si desea que el usuario introduzca un valor antes de entrar en una página. Cuando un cuadro de mensaje aparece, el usuario tendrá que hacer clic en "OK" o "Cancelar" para continuar después de introducir un valor de entrada. Si el usuario hace clic en "Aceptar" del cuadro devuelve el valor de entrada. Si el usuario hace clic en "Cancelar" el cuadro devuelve null.
Sintaxis window.prompt(" sometext "," defaultText ");
El window.prompt () método puede ser escrita sin el prefijo ventana. Ejemplo
var person=prompt("Please enter your name","Harry Potter");
if (person!=null) { x="Hello " + person + "! How are you today?"; document.getElementById("demo").innerHTML=x; }
Saltos de línea Para mostrar los saltos de línea dentro de un cuadro emergente, utilice una barra invertida seguida del carácter n. Ejemplo alert("Hello\nHow are you?");
JavaScript Timing Eventos JavaScript Timing Events
JavaScript se pueden ejecutar en intervalos de tiempo. Esto se conoce como eventos de tiempo.
JavaScript Timing Eventos Con JavaScript, es posible ejecutar código a intervalos de tiempo especificados. Esto se conoce como eventos de tiempo. Es muy fácil para los acontecimientos del tiempo en JavaScript. Los dos métodos principales que se utilizan son:
- setInterval () - ejecuta una función, una y otra vez, a intervalos de tiempo especificados
- setTimeout () - Ejecuta una función, una vez que, después de esperar un número especificado de milisegundos Nota: El setInterval () y setTimeout () son los dos métodos del objeto HTML DOM Ventana.
El setInterval () Método El método setInterval () esperará un número especificado de milisegundos, y luego ejecutar una función específica, y se continuará con la ejecución de la función, una vez en cada intervalo de tiempo dado. Sintaxis window.setInterval(" javascript function ", milliseconds );
El window.setInterval () método puede ser escrita sin el prefijo ventana. El primer parámetro de setInterval () debe ser una función. El segundo parámetro indica la longitud de los intervalos de tiempo entre cada ejecución. Nota: Hay 1000 milisegundos en un segundo. Ejemplo Alerta "hola" cada 3 segundos: setInterval(function(){alert("Hello")},3000);
El ejemplo que muestra cómo funciona el método setInterval (), pero no es muy probable que usted desea alertar a un mensaje cada 3 segundos. A continuación se muestra un ejemplo que muestre la hora actual. El método setInterval () se utiliza para ejecutar la función de una vez cada 1 segundo, al igual que un reloj digital. Ejemplo Mostrar la hora actual: var myVar=setInterval(function(){myTimer()},1000);
function myTimer() { var d = new Date(); document.getElementById("demo").innerHTML = d.toLocaleTimeString(); }
Cómo detener la ejecución? El método clearInterval () se utiliza para detener nuevas ejecuciones de la función especificada en el setInterval (método). Sintaxis window.clearInterval(intervalVariable)
El window.clearInterval () método puede ser escrita sin el prefijo ventana. Para poder utilizar el método () clearInterval, debe utilizar una variable global al crear el método de intervalo: myVar=setInterval(" javascript function ", milliseconds );
Entonces usted será capaz de detener la ejecución mediante una llamada al método clearInterval (). Ejemplo Mismo ejemplo anterior, pero hemos añadido un botón "Detener el tiempo":
Stop time
