A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

JavaScript y el DOM

9/22
Recursos

Aportes 23

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Escrib铆 un post en la secci贸n de tutoriales de algunas funcionalidades adicionales de devtools.

https://platzi.com/tutoriales/1867-devtools/5283-funcionalidades-utiles-de-chrome-devtools-no-cubiertas-en-el-curso/

getElementById() = para llamar a un id.
querySelector() = sirve para llamar a un elemento tanto #id , como .clases .
quetySelectorAll() = sirve para llamar a todas las clases que existan.
getElementsByTagName() = sirve para llamar solo elementos HTML.
getElementsByclassName() = sirve para llamar a las clases del documento entero.

para optener un elemento del DOM lo seleccionamos desde la DevTool de navegador y despues vamos a consola y copiamos $0
esto nos traera ese elemento

para empezarlos a traer los elementos para agregarle javascript podemos usar estas dos formas:

  1. getElementById() = para llamar a un id.

  2. vamos al elemento, damos click derecho, nos saldra un menu vamos a donde dice (copy) y despues donde dice ( copy JS-PATH )

    querySelector(鈥淏ody > header鈥)

ya despues con el elemento que obtengamos le pondremos el javascript

Cuanto me hubiese servido conocer el JS path 馃槙 pero ya lo conozco 馃槂

<h3>9. JavaScript y el DOM</h3>

0:58 $0 nos trae el elemento seleccionado del DOM.

1:13 JS Path nos permite obtener el elemento seleccionado con una funci贸n de JS (document.querySelector(鈥渂ody > header鈥). Incluye ejemplo de c贸mo usarlo.

2:49 Desde la Consola podemos con JS: seleccionar elementos, agregar estilos, agregar nuevos elementos al DOM.

Enlaces de la clase:
Enlaces complementarios:
Tutorial de Eduardo P. Rivero complementando algunas cosas no dichas en la clase.
Comentarios valiosos de la comunidad: 1, 2

<h3>- Les dejo este tutorial que resume todo el contenido del curso con marcadores para acceder rapidamente a los puntos claves que deseamos recordar.</h3>

Cu茅ntame si parece 煤til este formato de resumen, y dale 馃挌 si quieres m谩s de estos para la comunidad 馃榿馃檶

驴Para qu茅 te voy a mentir? Esta clase me dej贸 as铆:

Fue muy corta la explicaci贸n

CONSOLE - JS

  • Sirve para ver en que etiqueta HTML estamos posicionados.
    $0

  • Es una forma de obtener la posici贸n de una etiqueta.
    JS-PATH - document.querySelector(鈥渂ody鈥)

La consola nos puede ayudar a realizar cambios.

  • Si ponemos $0 nos trae los elementos que seleccionamos. Para acceder al path seleccionamos el elemento con $0 click derecho - Copy - CopyJSPath y lo pegamos.

  • Ya tendremos la direcci贸n para poderla agregar a una variable o realizar interacciones con los elementos del doom

En la consola de DevTools puedes ejecutar realmente cualquier c贸digo JavaScript, puedes definir variables, clases, objetos, etc. De hecho, es un muy buen lugar para ejecutar JavaScript de manera r谩pida o cuando quieres hacer ciertos tests r谩pidos

Que gran clase !

Esta clase me dejo asi ! tan sencillo y tan desconoido para mi cara.jpg

A seguir aprendiendo.

El desarrollo de software es un camino de nunca acabar, lo importante es seguir avanzando y siempre buscar la mejor forma de hacer las cosas, optimizando nuestro tiempo.

Me es grato saludarte Diego Degranda.
En general est谩 excelente lo que has impartido, sin embargo, yo no suelo usar servidores locales para probar mi c贸digo, mi experiencia sabe que no siempre da el mismo resultado sobre la pr谩ctica. Quise aplicar lo que ense帽as a mi sitio el cu谩l llevo ya varios a帽os con 茅l, no me refiero al clone del sitio de Google, si no a mi sitio: ayouik
com
Y resulta que Devtools me indica en rojo partes de mi c贸digo que desde mi punto de vista son vitales respecto a su aspecto, si yo modificara o quitara dichas partes de c贸digo lucir铆a completamente diferente. Espec铆ficamente:
ul
{
text-decoration: none;
font-size: 2rem;
font-family: 鈥楥entury Gothic鈥, Helvetica;
color:#ffffff;
}
ul li
{
text-decoration: none;
font-size: 2rem;
font-family: 鈥楥entury Gothic鈥, Helvetica;
color:#ffffff;
padding:5px 0px 5px 0px;
cursor: pointer;
}
ul li a
{
text-decoration: none;
font-size: 2rem;
font-family: 鈥楥entury Gothic鈥, Helvetica;
color:#ffffff;
cursor: pointer;
}
ul li:hover
{
text-decoration: none;
background: #00a8a8;
}
ul li a:hover
{
text-decoration: none;
font-size:2rem;
font-family: 鈥楥entury Gothic鈥, Helvetica;
color:#ffffff;
cursor: pointer;
background: #00a8a8;
}
驴Alguna sugerencia para lidiar con DevTools?
驴Ser谩 que DevTools s贸lo sugiere? o 驴Acaso hay error en alguna de las declaraciones CSS arriba mencionadas?
Digo, tambi茅n es posible.

woowwww buenisimo.

Muy util el JS path para manipular elementos de HTML mediante JavaScript en tiempo real.

Fant谩stica herramienta!

Esto me va ayudar mucho a mi d铆a a d铆a.

DevTools - JS y el DOM
Si seleccionamos un nodo en la pesta帽a de elements y luego nos vamos a la pesta帽a de consola. Digitamos $0 y obtendremos el nodo que hab铆amos seleccionado. #lifeHack cuando obtengamos el nodo podremos dar click derecho y copiar el path de js.

Qu茅 buena clase, breve pero concisa sobre JS y el DOM