El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

JavaScript esencial

Propiedades y métodos del DOM

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Conoce en este video los métodos y propiedades que el DOM tiene disponible para que puedas hacer que interactúen correctamente con JavaScript y HTML. Aprende lograr un nuevo nivel de interacción a tu proyecto,
04:51

Transcripción

Realicemos ahora algunos métodos y propiedades del DOM. Estos métodos me van a permitir a mí hacer el puente entre HTML y JavaScript, por lo cual es muy importante que los conozcas para saber cómo se utilizan. Por ejemplo, vamos a comenzar con lo primero. Podemos usar nosotros un método que haga referencia a todos los párrafos que tenemos aquí. Para este caso tenemos una variable llamada'todosLosParrafos' y con esto vamos a utilizar el objeto'document' punto, y tenemos un método llamado'getElementsByTagName'. Este método de'getElementsByTagName' me va a permitir a mí obtener los elementos que yo quiera por su etiqueta. Para esto, yo voy a necesitar enviar como parámetro el nombre de la etiqueta, que en este caso sería la etiqueta'p', que es lo que yo estoy buscando. Como puedes ver, tenemos tres párrafos. Entonces, se supone que si yo muestro el contenido de la variable'todosLosParrafos' debería mostrar tres elementos, es decir, los tres párrafos a los cuales estoy haciendo referencia. Para hacer esto vamos a escribir aquí, adentro de este método, del'addEventListener'que tiene anexado el botón: 'console . log' y vamos a mandar 'todosLosParrafos'. Guardamos, redimensionaré un poco mi ventana. Ahora, sí, pulso el botón ¡Púlsame! y vemos como precisamente me indica que tiene tres elementos, es decir, los tres párrafos que habíamos mencionado previamente. Y, de hecho, uno de ellos dice'p. principal'. ¿Por qué? Porque nosotros tenemos esta etiqueta con una clase llamada'principal', que, de hecho, nosotros también podemos obtener los elementos que tengan una clase. Para poder obtener esos elementos lo único que tengo que hacer, al igual que con el método de'getElementsByTagName', simplemente es invocar al objeto'document', punto 'getElements ByClassName'. Aquí tenemos dos diferencias, uno es por etiqueta y el otro es por clase. En este caso que tenemos, por clase, lo que vamos a hacer es mandar el nombre de la clase que teníamos, puesto que en este caso se llama'principal'. Igual, podemos actualizar y vamos a mandar ahora cada vez que pulsemos el botón a'parrafoPorClase'. Actualizamos, pulsamos y encontramos que efectivamente aquí se encuentra este elemento. ¿Pero qué pasa si yo deseo acceder a ese contenido? Es decir, yo lo que necesito es ver lo que está dentro de ese texto. Bueno, lo podemos hacer de una manera muy sencilla. El método'getElementsByClassName'lo que hace es capturar todos los elementos que tengan esta clase y los guarda en un arreglo, así que en esta situación solamente utilizamos uno y vamos a acceder al elemento 0. Actualizamos el navegador, y cuando pulsamos el botón vemos que ahora ya tenemos acceso al elemento y ya no nos aparecen los corchetes, por lo tanto yo puedo utilizar un método que ya habías visto previamente, en este caso utilizaré'textContent'. Actualizo mi navegador, pulso el botón y, listo, ya tenemos acceso al contenido. Dado que estamos accediendo a todas las propiedades que tenemos aquí, por ejemplo, aquí yo podría también cambiar el estilo que tiene el botón, estoy agregando aquí por ejemplo el acceso al botón y tiene un objeto llamado'style' y a partir de esto puedo acceder a las propiedades. Actualizo el navegador y pulso el botón que dice ¡Púlsame! y vemos como ahora cambia de estilo a un color verde con texto en blanco y un tamaño de 200 píxeles. Incluso podemos generar etiquetas de HTML de manera dinámica. Por ejemplo, vamos a generar una foto. En este caso estoy usando el método llamado'createElement' y entre comillas le mando el elemento que quiero crear, que en este caso es una imagen. Envío cuál es la fuente que va a tener, el nombre, el ancho y después de esto, en el'body', usando el documento utilizo un método llamado'appendChild', adentro de este método yo estoy mandando la foto. Vamos a actualizar y vamos a ver qué sucede. Redimensiono un poco mi navegador y, después de haber actualizado, vemos que tenemos una foto interesante. Y solo para hacer esto un poco más interesante, pues también podemos agregar'listeners'a esta foto. Claro, ¿pero como la foto podrá tener un'listener'? ¿Qué tal si nosotros agregamos aquí un'click'a la foto? Es decir, cada vez que nosotros escuchamos un clic sobre la foto, que cambie y esta se actualice. Vamos a probar, actualizamos y tenemos aquí la fotografía. Damos un clic y, listo, me cambia por la foto 2. Vamos a dar un clic nuevamente y me vuelve a cambiar por la foto 1. De esta manera, ya conoces cuáles son algunos de los métodos y propiedades con los que cuenta el DOM.

JavaScript esencial

Aprende y conoce JavaScript empezando por entender sus conceptos más básicos y esenciales, pero considerando en todo momento la nueva especificación del lenguaje ES6.

5:26 horas (90 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:12/09/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.