Scribd
Cargar
9 vistas12 páginas

Dom 3

dom js

Cargado por

ERICK NOE GÓMEZ LÓPEZ
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
9 vistas12 páginas

Dom 3

dom js

Cargado por

ERICK NOE GÓMEZ LÓPEZ
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 12

Archivo 6 – Modificar Textos o Imágenes con JS

MODIFICAR TEXTOS

Vamos a seleccionar lo siguiente:

Y como solo tengo un encabezado pues usaremos un querySelector:

Y con esto comprobamos que este selector h1 está funcionando, y ahora


supongamos que queremos acceder al texto en mi código de JS, cómo lo podría
hacer, hay 3 formas de hacerlo y veremos la diferencia entre esos 3

Cuál es la diferencia entre los 3, los primeros 2 podemos ver que son similares, se
traen el texto y el tercero se trae el HTML entonces vemos que innerHTML se trae el
texto con sus etiquetas, ahora cuál es la diferencia entre innerText y TextContent,
bueno la diferencia está es que si me voy al CSS:

Y a este H1 le pongo una propiedad de CSS que se llama:

Pueden ver que el primero no va a encontrar un texto que tenga esa propiedad para
ocultar el texto con el visibility Hidden mientras que textContent sí.
Entonces es importante saber la diferencia entre esos 3.

Ahora pueden ver que estoy seleccionando el encabezado y después estoy


accediendo a innerText, textContent e innerHTML, cuando escribimos este tipo de
selectores también podemos aplicar algo que se chama CHAINNING o
ENCADENAMIENTO:

(RECUERDEN QUITAR EL HIDDEN DEL CSS)

Ahora qué podemos hacer con los selectores aparte de verlos en la consola porque
pocas veces lo veremos en consola, podemos tener algo como esto:
Entonces tenemos en JS este tipo de interacciones sobre el DOM, podemos realizar
todo tipo de cambios con programación, ahora podemos agregar el texto así tipo
string o podemos hacer lo siguiente también agregando una variable nueva:

Va a depender mucho del estilo de programación que ustedes tengan … esto funciona
igual que el otro. Así pueden tener ustedes el control sobre HTML en JS.

MODIFICAR IMÁGENES

Podemos ver que en este proyecto tenemos múltiples imágenes


Entonces podemos ver que gracias al DOM tenemos el control de nuestro
documento.
Archivo 7 – Cambiando el CSS con JS

En JS también es posible cambiar el CSS de un elemento, también podemos agregar o


quitar clases, por ejemplo, cuando llenan un formulario y dejan un campo o campos
vacíos a veces JSese campo se coloca en color rojo y están agregando una clase
basado en esa interacción que ustedes están haciendo entonces sí se utiliza
bastante, veamos entonces cómo cambiar el color de este encabezado:
Una característica que tienen los estilos en JS, es que a diferencia de CSS por
ejemplo, En CSS si ustedes quieren utilizar el JUSIFYCONTENT sería de esta forma:

justifyContent

En JS las que tienen 2 palabras se elimina ese GUIÓN y la segunda palabra inicia con
MAYÚSCULA como el background-color por ejemplo… entonces sería así:

Entonces las mismas propiedades que tienen en CSS las encontraremos en JS con la
diferencia que no llevan el guión y que la primer letra de la segunda palabra tiene que
estar en mayúscula, ahora cambiemos la fuente:

El uppercase cambia todos en mayúsculas, ahora está bien conocer esta sintaxis
para cosas sencillas, pero la desventaja es que hará que mi código en JS sea más
grande, muy importante saber que la apariencia es responsabilidad del código CSS o
sea de los diseñadores del FRONTEnd, lo que yo les recomendaría más en lugar de
escribir código de esa forma es agregar o quitar clases.
Seleccionemos el primer CARD que tenemos:

Ahora cómo podemos agregar una clase, para ello tenemos acceso a un método de
classlist que se llama .add:

Entonces desde JS podemos agregar una clase u otra, y si lo mezclan ya con


funciones y con ifs ya haríamos algún programa que valide algún formulario,
podemos agregar otra clase de esta forma:
Así como tenemos ese add, tenemos uno para eliminar la clase:

Y con esto ya se pueden dar una idea de lo que es posible hacer con JS y seguiremos
practicando sobre el DOM.

Archivo 8 – Traversing the DOM

“Recorrer el DOM”, En JS TODO está conectado al DOCUMENT pero la forma en la


que ustedes se van a mover por los diferentes elementos, se le conoce como,
TRAVERSING THE DOM, es decir IRLO RECORRIENDO como que fueran turistas en un
departamento que no conocen:

Crearemos una variable nueva e iremos por NAV, recuerden podemos seleccionarlo
por NAV por NAV.NAVEGACION o únicamente por .NAVEGACION, cualquiera de las 3
formas está bien:

En JS estos enlaces se les conoce como NODOS


Y podemos acceder a ellos de la siguiente forma:

Ahora veamos que aparece así porque childNodes hace que los espacios en blanco
los considere como elementos, a qué me refiero:

a que los saltos de línea que tiene el


elemento A se considera en JS un elemento pero qué pasa si los elimino

Hace que me aparezca menos texto pero eso desordena mi código HTML, entonces
hay una alternativa más limpia que eso y es:

Y Children me listará elementos reales y como dije anteriormente estos se les


conocen como NODOS y esos NODOS están conectados al DOM y todo se relaciona.
Podemos acceder a su posición:

Nodetype es de tipo 1 (BUSQUEMOS EN la documentación MDN)

Tipo1: elemento, los elementos es digamos las etiquetas HTML, es decir que tiene
apertura y cierre o de autocierre… mientras que si queremos el texto ese sería de tipo
3.

Ahora hagamos lo siguiente:

Estoy navegando y eso se le conoce como traversing the dom.


Ahora quiero acceder al texto del título MUSICA ELECTRÓNICA, cómo accedo??:

EJERCICIO EN CLASE

….

Y SI LO QUIEREN MODIFICAR??

HÁGANLO

También podría gustarte