JavaScript y el DOM

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(“Body > header”)

ya despues con el elemento que obtengamos le pondremos el javascript

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(“body > 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

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í:

Cuanto me hubiese servido conocer el JS path 😕 pero ya lo conozco 😃

Fue muy corta la explicación

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.

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

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(“body”)

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

Que gran clase !

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

A seguir aprendiendo.

Waooo, genial. Estas no me las sabía

Es un poco interesante la forma de utilizar el JS en la consola, la verdad si me ha ayudado uun poco en entender ciertos puntos que no sabia como la forma de traerse todo el codigo fuente del HTML y como usarlo en el proyecto.

Esta clase esta super genial O:

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: ‘Century Gothic’, Helvetica;
color:#ffffff;
}
ul li
{
text-decoration: none;
font-size: 2rem;
font-family: ‘Century Gothic’, Helvetica;
color:#ffffff;
padding:5px 0px 5px 0px;
cursor: pointer;
}
ul li a
{
text-decoration: none;
font-size: 2rem;
font-family: ‘Century 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: ‘Century 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.

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