Header Ads Widget

Ticker

6/recent/ticker-posts

Tutorial del modelo de objetos de documento

 


En los episodios más recientes, hemos estado cubriendo muchos aspectos fundamentales del lenguaje JavaScript. Es hora de cambiar de marcha un poco y empezar a mirar el DOM o el modelo de objetos de documento. Nuestro código JavaScript está adjunto a una página web, y es la página web la que viene primero, no el script. Piense en nuestra página web como la base de la casa sobre la que construiremos o el lienzo sobre el que pintaremos. El DOM es lo que constituye nuestra página web, y es al trabajar con JavaScript en combinación con el DOM, que podemos acceder a la página y modificarla directamente desde el lado del cliente. En otras palabras, podemos atravesar el dom¡Pasemos al DOM ahora!

el tutorial del modelo de objetos de documento


Que es el DOM

Entonces, ¿qué es el modelo de objetos de documento? Bueno, si ha leído alguna explicación o tutorial, sabrá que está lleno de jerga y palabrería interminables que suenan terriblemente confusas. Podría decirles algo como, “El DOM es una interfaz de programación de aplicaciones que opera con HTML bien formado basado en estándares y componentes asociados, y…” pero estas son solo palabras de moda. El concepto de DOM es bastante sencillo, veámoslo paso a paso.

¿Qué es el documento?

Página web: la parte del documento de DOM se refiere a la página. Cuando ve un archivo HTML simplemente en el bloc de notas, o en un IDE con un bonito resaltado de sintaxis, o a través de un navegador web para ver el resultado renderizado, todas las instancias son simplemente el Documento. La página en sí es el documento.

¿Qué son los objetos?

Piezas: la parte Objeto del DOM es simplemente una cosa, que puede o no contener algo dentro de ella. Cuando miramos un fragmento de HTML y decimos, miramos la sección del encabezado, o la sección del cuerpo, o tal vez incluso una lista desordenada o una etiqueta p, nos referimos a los objetos de la página. Son objetos del DOM.

¿Qué es el modelo?

Términos acordados: El modelo tiene un significado un poco más genérico, no es una cosa concreta, es una idea. El modelo es como los datos o la abstracción empresarial del documento. Cuando hablamos de todos los objetos de la página en términos de etiquetas HTML específicas, nodos, nodos secundarios y nodos principales, estamos hablando el mismo idioma. El modelo es el conjunto acordado de términos y estándares que describen exactamente cómo podemos interactuar con las partes de una página web. Estas reglas funcionan con cualquier página web que exista, esa es la importancia de la misma.

Qué puedes hacer con el DOM

Al tener un conocimiento firme del DOM y al usar JavaScript, ¡podemos lograr muchas cosas diferentes! Algunos ejemplos incluyen:

  • Obtener el tercer párrafo
  • Obtener el texto de la etiqueta del título
  • Busque el quinto enlace de un menú y cambie su propiedad css a display:none
  • Modifique el color de fondo de todas las h1etiquetas con una clase depriority
  • Coge todas las lietiquetas dentro de unul
  • Busque una imagen con una identificación de icony muévala 30 píxeles a la izquierda
  • Modificar un enlace para que se active una función de JavaScript al hacer clic
  • Genere un nuevo dive insértelo entre el cuarto y quinto párrafo
  • ¡Y muchos muchos mas!

Nodos y elementos

El DOM se mira a sí mismo en términos de nodos. Puede parecer que cada elemento HTML es un nodo y, si bien esto es cierto, hay más. Hay muchos tipos de nodos en el DOM, 12 en total. Nos centraremos solo en los primeros 3, ya que podemos lograr casi cualquier cosa que necesitemos con ellos. Son 1. Nodos de elementos , 2. Nodos de atributos y 3. Nodos de texto . Nota: Los números 1, 2 y 3 son la representación real de Elementos, Atributos y Nodos de texto en el DOM, ¡no están aquí solo para enumerarlos numéricamente!

Tipos de nodo

Echemos un vistazo a un ejemplo muy simple de HTML para mostrar cómo y dónde entran en juego estos tres tipos de nodos:

Viendo esto de otra manera, se puede representar mediante el siguiente diagrama:
tutorial de modelo de objetos de documento

Esto es muy interesante. Lo que tenemos aquí es el HTML que puede ver cuando abre el archivo o ve el código fuente en un navegador. Los elementos de color naranja representan el HTML real y cualquier texto dentro del HTML. Los cuadros codificados por colores son más representativos de la estructura DOM formal. El negro representa los nodos de elementos , el gris muestra los nodos de atributos y el azul es lo que representa los nodos de texto . Verás, ¡una imagen vale más que mil palabras!

Los nodos de elementos no contienen texto

¡Éste es un punto importante! Quizás se esté preguntando, ¿por qué pasar por todos esos problemas para mostrar cómo se representan estos nodos y elementos? Bueno, a diferencia de lo que parece cuando ve el código HTML, los nodos de elementos no contienen texto. Solo los nodos de texto, que son elementos secundarios de sus nodos de elementos principales, contienen texto real. Necesitamos entender este concepto para trabajar y modificar de manera efectiva el DOM según sea necesario en nuestros programas JavaScript.


Cómo agarrar nodos de elementos

Ahora podemos preguntarnos, ¿cómo podemos tomar uno o más de estos nodos para trabajar con JavaScript? Bueno, lo primero que debemos determinar es si el nodo que estamos tratando de capturar es único. Es decir, ¿el elemento en nuestro HTML tiene una identificación? Recuerde que una identificación es única, mientras que una clase se puede aplicar muchas veces.

Obtener un elemento por ID

Cuando tenemos un elemento en la página, podemos usar el siguiente método muy común y posiblemente el más importante del lenguaje JavaScript y ese sería:

document.getElementById ('algúnId');

A menudo, el caso de uso que veremos con este método es llamarlo y asignar su resultado a una variable. Esa variable actúa como un identificador en ese punto específico en el DOM. Piense en ello como abrir un archivo, y este es el identificador del archivo, por así decirlo. Luego, podemos usar esa variable para llamar a métodos en ese elemento, leer las propiedades del elemento o cambiar ese elemento. Esta no es una copia de ese elemento, operaremos directamente en ese elemento dentro del DOM una vez que comencemos a llamar a métodos en él. Por ejemplo:

Obtener elementos por etiqueta

Entonces, ¿qué pasa si necesitamos obtener más de un elemento? Aquí podemos hacer uso del método estrechamente relacionado:

document.getElementsByTagName ('li');

Ahora compruebe que este método utiliza la versión plural de Elements en el nombre del método. Esto se debe a que espera encontrar muchos elementos, ya que una etiqueta HTML determinada difícilmente será única en una página. Podríamos tener muchas etiquetas div diferentes, o etiquetas p o etiquetas a. Con este método, escaneará todo el documento y devolverá cualquier elemento que coincida con el selector. Usar este método en el mismo HTML produciría este resultado:

Restringir elementos para agarrar

En el ejemplo anterior, tomamos todos los elementos li de la página. Digamos que teníamos dos conjuntos de listas desordenadas en la página, y solo queríamos tomar los elementos li secundarios de uno de ellos. Podemos hacer eso usando una combinación de métodos llamados a varios objetos. No estamos limitados a llamar a estos métodos solo en el documento en sí. Por ejemplo:

Al tener un comando del DOM, y qué métodos están disponibles para operar en él, podemos llegar a cualquier lugar de la página que necesitemos.


Cambiar el DOM

Como observamos en la sección anterior, encontramos que leer información del DOM usando JavaScript es bastante sencillo. Ahora echaremos un vistazo a algo un poco más útil, y eso es actualizar o cambiar el DOM en tiempo real. Lo primero que debe hacer para hacer esto es obtener el elemento primero. Necesita esto para tener un identificador en el propio DOM. No son los atributos o los nodos de texto lo que nos interesa inicialmente, primero necesitamos el elemento base, ya que los nodos de atributo y los nodos de texto pertenecen a los nodos de elementos. ¿Consíguelo? Entendido. ¡BUENO! Una vez que lo tengas, ¡puedes cambiarlo!

Modificar atributos

Comenzando con lo más fácil que podríamos hacer, modifiquemos un atributo de algún HTML de ejemplo. Veremos dos métodos importantes para tratar los atributos.

someElement.getAttribute ('clase');

someElement.setAttribute ('id', 'newvalue');

Como siempre, se necesita una demostración.

Este código recupera el ulque tiene una identificación de domtut, cierra la sesión del valor capturado, luego hace uso del setAttributemétodo para establecer una nueva identificación para ese mismo elemento y, por último, cierra la sesión del nuevo valor que se ha modificado. Ahí lo tiene, 4 líneas simples de código para mostrar cómo hacer uso de los métodos getAttributesetAttribute.


Creación de contenido DOM

Así que consideremos que en algunos de nuestros ejemplos de HTML anteriores, teníamos algunos lielementos vacíos Veamos si podemos completar y vaciar el elemento HTML usando solo JavaScript, ¡estoy bastante seguro de que podemos hacerlo! Recuerde que teníamos 5 elementos li en nuestra lista de domtut. Solo se completaron los primeros 3, pero podemos completar los últimos 2 directamente desde JavaScript. Mira esto:

¡Nuestro HTML actualizado ahora se verá así con los dos últimos elementos de la lista ahora completos!

Crear elementos

También tenemos la capacidad de crear elementos y nodos sobre la marcha y completarlos según sea necesario. Probablemente no desee hacer esto, pero podría construir una página web completa usando nada más que JavaScript. Agregaremos otro elemento li a nuestro HTML y lo completaremos según sea necesario. Primero necesitaremos hacer uso de un nuevo método.

document.createElement ('li');

Esto es genial, se creará un li en el mundo. En realidad, se crea en el DOM, pero nuestro nuevo li se siente perdido. No tiene lugar en el mundo. Necesitamos ayudarlo a encontrar dónde debería estar. Podemos hacer esto haciendo uso de otro método nuevo.

someElement.appendChild ('recién creado');

Entonces, ahora que tenemos nuestro elemento recién creado, debe agregarse en algún lugar del DOM. Así es como se verían las cosas hasta ahora:

Si ejecuta este fragmento en firebug, verá que se agrega un nuevo elemento li a esa primera lista. De hecho, ¡comienza a hacer clic en ejecutar como un loco y observa cómo esos elementos de li se generan y se agregan a la página como locos! No se preocupe, una vez que se divierta haciendo esto, puede actualizar el navegador y todo volverá a la normalidad. 🙂 Sin embargo, este es un gran ejemplo de cómo crear dinámicamente y luego agregar elementos sobre la marcha. ¡Frio!

Crear nodos de texto

Notarás que de hecho creamos un nuevo elemento li en la página. De hecho, tal vez hiciste nuestro pequeño ejercicio y hiciste clic en correr repetidamente si has estado bebiendo un buen Starbucks fresco. Sin embargo, una cosa que falta en nuestro nuevo elemento li es cualquier dato que contenga. No tiene texto. Podríamos agregar fácilmente la prueba de domo simplemente configurando la propiedad innerHTML así:

newlyCreated.innerHTML = 'Caffiene and Mocha!';

De hecho, esto funciona bien, y verá la página actualizada en tiempo real si realmente ejecuta el código. Sin embargo, hay una forma un poco más precisa de hacer esto, echémosle un vistazo.

var newText = document.createTextNode ('¡Caffiene y Mocha!');

NewCreated.appendChild (newText);

Nuestro nuevo script completo se vería así:

Entonces, sí, simplemente configurar la propiedad innerHTML del elemento puede ser un poco más rápido, pero el segundo método de crear el nodo de texto y agregarlo DOMes la forma más formal y precisa de lograr esto.

Alternativas a appendChild

Es posible que en este punto esté a la altura de sus ojos en el DOM , ¡pero hay una cosa más que debemos cubrir! Podemos insertar elementos en el DOM de más de una forma. Aquí hay una forma alternativa de lograr lo mismo.

¡Vaya, Nelly! ¿Qué diablos está pasando aquí? Hablemos de ello, ya que esto ayuda a comprender mejor.

  • Coge el elemento padre
  • Crea un nuevo elemento
  • Coge el elemento que queremos insertar nuestro nuevo elemento antes. El getElementsByTagNamemétodo se puede llamar en document* o * theParentLa única diferencia es en qué parte del DOM estará el punto de inicio del identificador.
  • Inserte el nuevo elemento. ¡Nota! A diferencia del paso anterior, debemos usar theParentpara llamar al insertBeforemétodo, ¡no funcionará de otra manera!
  • Por último, simplemente creamos un nodo de texto y luego lo agregamos a nuestro nuevo li.

¡Y con esos amigos, has completado el curso intensivo de Vegibit sobre el modelo de objetos de documento! Felicidades



Publicar un comentario

0 Comentarios