JavaScript: trabajar con el Modelo de Objetos del Documento (DOM)

Name: JavaScript: trabajar con el Modelo de Objetos del Documento (DOM)
Author: Joseph Barrett

El modelo de objetos de documento (DOM) es una función básica de JavaScript. En este curso, aprenderá a crear e insertar elementos en el DOM, cómo navegar por…

Preview the first lesson free — get full access to all 6 lessons.

Solicitar una demo Iniciar sesión

Curso: bajo demanda

En esta lección, veremos cómo crear e insertar nuevos elementos en el modelo de objetos de documento. Entonces, veamos qué tenemos hasta ahora. Tiene su casilla de selección de variedad de jardín aquí, y tengo un tamaño de cinco especificado para que salga como un cuadro de lista, y tenemos algunos elementos de opción existentes. Digamos, por ejemplo, que tal vez este sea un sitio de viajes. La gente quiere elegir una ciudad para visitar. Les damos algunas opciones predeterminadas. También queremos permitirles agregar una nueva ciudad a la lista. y van a poder hacer eso escribiendo el nombre de la ciudad aquí abajo. Ahora bien, esto todavía no funciona. Agregaremos el código para que lo haga. Entonces, tengo un controlador de eventos aquí para el botón de enviar y he seleccionado que representa este cuadro que ya tenemos aquí. Así que voy a seguir dos pasos aquí. Lo primero es que voy a crear mi nuevo elemento. y el segundo es que lo voy a insertar en el elemento existente en un lugar particular. Este es solo un pequeño método de ayuda que he creado que me permite tomar una ciudad con espacios en el nombre y convertir eso en un valor específico allí. Pero el quid de esto es observe que estoy haciendo document.createElement y estoy creando un elemento de opción. Cuando desee especificar atributos para ese elemento, simplemente puede etiquetarlos con sus valores. Entonces, el valor será esa cadena en minúsculas que creo aqui y el texto será el valor real del cuadro de la ciudad que hemos hecho allí. Así que lo hemos creado. Ahora, ¿cómo lo llevamos a donde queremos que esté? Y tenemos un par de formas diferentes que podemos ir aquí. El primero es anteponer. Entonces estoy tomando ese elemento selecto y esto simplemente lo inserta antes del primer elemento secundario. Entonces, si volvemos aquí y echamos un vistazo, ahí está tu colección de elementos secundarios para el cuadro de lista de selección. Así que me quedo con eso. Voy a agregar eso al principio. Escribamos Tokio y presiono mi botón de enviar y ahí lo convierte en el primero en llegar. Ahora, también podríamos hacerlo de una manera ligeramente diferente. También tenemos insertBefore. InsertBefore toma el elemento que vamos a insertar, el elemento que vamos a insertar, como primer parámetro y dice adónde queremos que vaya. Entonces, en este caso, los nodos secundarios de cero, y guardemos eso y rehagamos la página nuevamente. Y esto debería hacerlo bien desde el principio. Ciertamente no estamos restringidos al primer elemento. Podría decir que haga eso y terminamos que está aquí abajo. Ahora observe que ese no es el cuarto o incluso el quinto elemento, pero lo que tienes que entender sobre estos elementos es que las opciones no son los únicos nodos allí. El espacio en blanco, por ejemplo, se presenta como un nodo de texto. Entonces tienes que mirar con mucho cuidado cuando está rastreando los elementos de esa colección. Ahora, si quieres insertarlo al final, también podemos hacer eso. Intentémoslo como otra forma de hacer esto. Aquí vamos. Append simplemente lo deja al final. Entonces, si intentamos esto una vez más, ahí vamos, ese es el último. Entonces, en esta lección aprendimos algunas formas diferentes para asegurarnos de que aparezca nuestro nuevo elemento en un lugar particular del elemento existente en el DOM. Gracias por ver. En nuestra próxima lección, hablaremos más sobre navegando por la jerarquía del modelo de objetos de documento.

Intermedio Proveedor : Joseph Barrett 6 lecciones · 29m en Árabe, Alemán, Inglés, Español, Francés, Portugués, Chinese

Descripción del curso

El modelo de objetos de documento (DOM) es una función básica de JavaScript. En este curso, aprenderá a crear e insertar elementos en el DOM, cómo navegar por el DOM y formas de mover elementos en la página web. Hará un ejercicio para cambiar la apariencia de su página y aprenderá a cambiar los atributos HTML. Por último, obtendrá consejos para cambiar las hojas de estilo en cascada (CSS), que describen cómo aparece su página visualmente en su pantalla.

Lo que aprenderás

Crear e insertar nuevos elementos en el Modelo de Objetos del Documento (DOM) usando JavaScript
Navegar por el DOM para localizar y trabajar con elementos de página
Mover elementos alrededor de una página web
Cambiar la apariencia de su página y manipular atributos HTML
Aplicar consejos y trucos para trabajar con hojas de estilo en cascada (CSS) en JavaScript

Puntos clave

El modelo de objetos del documento (DOM) es una función básica de JavaScript.
JavaScript se puede usar para crear e insertar elementos en el DOM así como navegarlo.
Los elementos se pueden mover en la página web y sus atributos HTML se pueden cambiar usando JavaScript.
Las hojas de estilo en cascada (CSS) describen cómo aparece una página visualmente en la pantalla, y el curso cubre consejos para cambiarlas.

Preguntas frecuentes

¿Qué cubre este curso?

Cubre creación e inserción de elementos en el DOM, navegación del DOM, movimiento de elementos en la página web, cambio de la apariencia de la página, cambio de atributos HTML y consejos para cambiar hojas de estilo en cascada (CSS).

¿Qué habilidades ganaré de este curso?

Desarrollará habilidades en el Modelo de Objetos del Documento, Scripting DOM, Modelos de Objetos del Documento HTML, Scripting HTML, JavaScript (Lenguaje de Programación) y JavaScript Orientado a Objetos.

¿El curso incluye práctica práctica?

Sí, realizará un ejercicio sobre cómo cambiar la apariencia de su página.

¿Qué lecciones se incluyen?

Las lecciones son Creación e Inserción de Nuevos Elementos, Navegación del DOM, Movimiento de Elementos en la Página, Cambio de la Apariencia de la Página, Manipulación de Atributos y Trucos de CSS en JavaScript.