Un tutorial Serie Principiante JavaScript: Acceso al DOM HTML (Document Object Model) con JavaScript (Parte I)


En nuestro último tutorial, principiantes JavaScript Tutorial Serie: Programa Declaraciones lógica - si .... no puede, cuando, por, y nos introducen las principales construcciones del programa interruptor "toma de decisiones". Nos tomamos un descanso ahora como un poco "de un teaser y demostrar el uso del DOM HTML. Esto es realmente donde está la acción como JavaScript. Demostramos cómo JavaScript, un lenguaje de script del lado del cliente que puede cambiar el contenido de una página web. La mayor parte de lo que sigue es básico. Si tiene problemas para entender sólo hay que poner a un lado y se refieren a ella a medida que continúe la serie de tutoriales de JavaScript y su conocimiento crece.

¿Qué puede JavaScript?

JavaScript puede manipular todo el código HTML de una página accediendo al DOM HTML




El HTML DOM (Document Object Model) de la página es creada por el navegador cuando se carga la página. El DOM puede ser pensado aa grupo de objetos dispuestos de una manera jerárquica.

¿Qué acciones se pueden realizar en el Javascript DOM?

JavaScript puede agregar, editar y eliminar todos los elementos y atributos de la página web HTML. Además, se puede cambiar cualquier estilo CSS. JavaScript todo puede interactuar con todos los sucesos relacionados con la página y crear nuevos eventos.

El DOM es un estándar W3C

El DOM es un W3C (World Wide Web Consortium) estándares. que define cómo se puede acceder a los documentos. El estándar HTML DOM es la parte que es de interés para los que trabajan con las páginas web. El estándar HTML DOM define un modelo de objetos y la interfaz de programación de HTML:


  • todos los elementos HTML se definen como objetos

  • Elementos HTML tienen cada uno propiedades específicas "clase"

  • el estándar define métodos para elementos

  • los eventos asociados con los elementos HTML.


El DOM HTML - Una programación orientada a objetos (POO) Ejecución

En programación orientada a objetos utilizando métodos construcciones de programación plazo que provoca alguna acción que ocurra, que compararon a un estilo HTML o CSS. Los valores que se pueden cambiar se indican como propiedad.

Acceso a las propiedades de un elemento HTML

La manera más elemental para obtener acceso a un elemento HTML es a través del atributo id del elemento.

Como una actualización, el id de un elemento puede referirse a uno y sólo un objeto HTML. Por ejemplo:

Este es un párrafo

La Identificación del primero debe ser utilizado de una manera única con este documento. Puede haber otro punto con un ID de "primera" en el código de la página web.

El método, getElementById se utilizaría la siguiente manera para acceder al punto objeto HTML de la siguiente manera:

getElementById ("antes")

Para obtener el contenido de la innerHTML se utiliza la propiedad.

Por lo tanto, nuestra declaración para acceder al texto del punto se convierte en:

getElementById ("antes"). innerHTML.

La instantánea que sigue da la codificación completa para este ejemplo.


ilustra el uso de la getElementById Método ()

Métodos de documentos HTML

Todos los métodos operan en el "objeto de documento Por lo tanto, todos los accesos se codificará como.:

documento. {Algunos nombre del método}

Las acciones que se realizan en el documento son:

Identificación del documento - siendo algunos ejemplos:

  • document.getElementById () (nuestro ejemplo anterior)

  • document.getElementByTagName ()

  • documentgetElementByClassName ()

Editar elementos (haciendo una asignación) -

  • element.innerHTML () =) nuestro ejemplo anterior)

  • element.setAttribute (atributo, valor) =

  • element.style.property =

Adición y eliminación de elementos

  • element.createElement ()

  • element.appendChild ()

  • element.removeChild ()

  • element.replaceChild ()

Adición de un controlador de eventos

  • document.getElementById (id) .eventname = function () {code}

Las secciones siguientes exploran estos métodos aún más y dan ejemplos.

Uso de la getElementByTagName

Como se mencionó anteriormente, hay varias maneras de encontrar elementos HTML.

Nuestro ejemplo anterior demostró el uso del método getElementById ().

Otra manera de identificar los elementos HTML es con el método getElementsByTagName (). El getElementsByTagName () devuelve una colección de elementos secundarios de un elemento con el nombre de etiqueta especificada, Tenga en cuenta que, incluso si sólo hay un punto en el elemento de referencia que necesitamos para acceder a la notación punto matriz. No hemos cubierto las matrices de esta serie de tutoriales, pero si conociste a matrices en otros lenguajes de programación, el concepto debe estar familiarizado. Un arrary es un conjunto de elementos que se identifica por un nombre. Para hacer referencia a objetos individuales, se especifica un índice. El índice es un número inicial de uno. Por lo tanto, si la matriz se conoce como "y", como en nuestro ejemplo, el primer elemento se refiere como y [0], el segundo como y [1}, etc.

La siguiente instantánea el uso de document.getElementByTagName ().

Un getElementByTagName () Ejemplo

Finding Elementos de HTML objeto Colecciones

El ejemplo anterior demuestra el uso de getElementByTagName (). Este método devuelve todos los elementos que coinciden con el método en cuestión. Nos dimos cuenta que el valor devuelto (s) (que puede ser cero, uno, o muchos) son tratados como elementos de una matriz. Nombre oficial de esta matriz es un Colección HTML.


Las siguientes colecciones de objetos HTML son accesibles:

  • document.anchors

  • document.forms

  • document.images

  • document.links



Editar texto HTML DOM JavaScript

La posibilidad de editar texto con el uso de JavaScript hace que las páginas dinámicas. A medida que avance a través de este y el próximo tutorial no sólo puede editar el contenido HTML, pero podemos cambiar el estilo CSS también.

En nuestro siguiente ejemplo sencillo, el texto dentro del párrafo HTML se establece en "Saludos terrícolas!" con el uso de JavaScript:

. document.getElementById ("p1") innerHTML = "¿Cómo van las cosas en Marte?";

el texto ha sido editado antes de ser mostrados. La clave aquí es el operador de asignación. En primer lugar tenemos la posición de "p1" con el uso del método getElementById () y luego acceder al texto del párrafo con respecto al innerHTML y asignamos el nuevo valor, la cadena, "¿Cómo van las cosas en Marte? " .

Un texto plano Sustitución usando Javascript

Escribir calendario dinámico a la página

La siguiente instantánea muestra el uso del método Date () por escrito información actualizada sobre la pantalla. Otros ejemplos en la parte posterior de este tutorial se demuestra la plasmación de un reloj de tiempo real.

Uso de una llamada a una fecha) función (dentro de un script

Recapitulación y Lo Siguiente

En este tutorial se presentó el DOM HTML (Document Object Model) y demostramos varias formas de acceder al contenido y edición de HTML. Estos ejemplos son sólo una "maqueta" que ilustra la funcionalidad. En el siguiente tutorial, parte II, vamos a mostrar cómo Actualmente texto mostrado se puede cambiar a través de eventos.

Hay muchas maneras en la programación para resolver los mismos problemas. Nuestras ilustraciones para los próximos ejercicios tratarán de mostrar diferentes formas de realizar la misma tarea.

Parte II también se verá a cambiar el estilo CSS de una página con la ayuda de JavaScript.

Por favor, infórmenos de su comprensión de este Tutorial

Tú! 1 2 3 4 5 3 de 5 estrellas 1 puntuación de este tutorial y sus ejemplos claros?

(0)
(0)

Comentarios - 0

Sin comentarios

Añadir un comentario

smile smile smile smile smile smile smile smile
smile smile smile smile smile smile smile smile
smile smile smile smile smile smile smile smile
smile smile smile smile
Caracteres a la izquierda: 3000
captcha