No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Nuevo Curso Pr谩ctico de JavaScript

Nuevo Curso Pr谩ctico de JavaScript

Juan David Castro Gallego

Juan David Castro Gallego

Leyendo HTML desde JavaScript

10/26
Recursos

Aportes 22

Preguntas 5

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

C贸digo truco para HTML:

Si escribes una etiqueta y pegado un . (punto) das enter o tab; se vuelve clase.
Ejemplo:
p.parrafo (se convierte en)

<p class=""></p>

Escribe un elemento y pegado un # das enter o tab; se vuelve id.
Ejemplo:
p#parrafo (se convierte en)

<p id=""></p>

Escribe un elemento y pegado agregas un > m谩s otro elemento, podr谩s tener un elemento dentro del mismo:
Ejemplo:
p>p (se convierte en)

    <p>
        <p></p>
    </p>

Escribe un elemento y pegado agregas un + m谩s otro elemento, podr谩s tener otro del mismo (es como multiplicar):
Ejemplo:
p+p
p+h+div(se convierte en)

    <p></p>
    <p></p>

    <p></p>
    <h></h>
    <div></div>

Escribe un elemento y pegado agregas un * m谩s una cantidad determinada, podr谩s multiplicar el elemento:
Ejemplo:
div*3

    <div></div>
    <div></div>
    <div></div>

Qu茅 puedo hacer si quiero un div con un id de 鈥減lazti鈥, que dentro tenga 3 div con clase de 鈥減laztitos鈥, con dos h1 y que cada h1 tengan un 5 p con clase 鈥減谩rrafo鈥 y que por 煤ltimo cada p tenga un a. 驴C贸mo le hago?

Respuesta:

div#platzi>div.platzitos*3>h1*2>p.parrafo*5>a
  • Resultado:
    <div id="platzi">
        <div class="platzitos">
            <h1>
                <p class="parrafo"><a href=""></a></p>
                <p class="parrafo"><a href=""></a></p>
                <p class="parrafo"><a href=""></a></p>
                <p class="parrafo"><a href=""></a></p>
                <p class="parrafo"><a href=""></a></p>
            </h1>
            <h1>
                <p class="parrafo"><a href=""></a></p>
                <p class="parrafo"><a href=""></a></p>
                <p class="parrafo"><a href=""></a></p>
                <p class="parrafo"><a href=""></a></p>
                <p class="parrafo"><a href=""></a></p>
            </h1>
        </div>
        <div class="platzitos">
            <h1>
                <p class="parrafo"><a href=""></a></p>
                <p class="parrafo"><a href=""></a></p>
                <p class="parrafo"><a href=""></a></p>
                <p class="parrafo"><a href=""></a></p>
                <p class="parrafo"><a href=""></a></p>
            </h1>
            <h1>
                <p class="parrafo"><a href=""></a></p>
                <p class="parrafo"><a href=""></a></p>
                <p class="parrafo"><a href=""></a></p>
                <p class="parrafo"><a href=""></a></p>
                <p class="parrafo"><a href=""></a></p>
            </h1>
        </div>
        <div class="platzitos">
            <h1>
                <p class="parrafo"><a href=""></a></p>
                <p class="parrafo"><a href=""></a></p>
                <p class="parrafo"><a href=""></a></p>
                <p class="parrafo"><a href=""></a></p>
                <p class="parrafo"><a href=""></a></p>
            </h1>
            <h1>
                <p class="parrafo"><a href=""></a></p>
                <p class="parrafo"><a href=""></a></p>
                <p class="parrafo"><a href=""></a></p>
                <p class="parrafo"><a href=""></a></p>
                <p class="parrafo"><a href=""></a></p>
            </h1>
        </div>
    </div>

Siempre pens茅 que lo que le faltaba mucho al curso anterior era justo esto el DOM que en el 谩rea laboral se ocupa un monton. Que bien va el curso.

A mi me sucedi贸 algo muy interesante. Empec茅 a escribir el ejemplo de la clase, pero not茅 que en el navegador todos las constantes generadas en la consola me regresaban null:

Yo revisaba una y otra vez el c贸digo y ve铆a todo correcto:

Entonces not茅 que estaba llamando a la etiqueta script en el lugar equivocado, debes colocarla al final de escribir todas las etiquetas del HTML para que puedan reconocerse:

Con solo mover la etiqueta script al final de la etiqueta body, ya pude ver la estructura de los objetos cargados en memoria correctamente:

No me considero muy bueno con este idioma ,soy mas de lo visual de la pagina web(css) pero con este curso practico estoy entendiendo un poco mas la logica. (Escribiendo codigo es donde mas entiendo)

Este nuevo curso me gusta mucho m谩s que el anterior, me encanta 馃檶

Es muy importante no olvidar que <querySelector> solo seleccionara al primer elemento que cumpla con lo requerido.
Mientras que <querySelectorAll> seleccionara a todos los elementos que cumplan con lo requerido.

Leyendo HTML desde JavaScript

La forma profesional de leer C贸digo HTML desde JavaScript es crear variables que representen a los selectores de cada uno de los elementos presentes en html a los cuales de desea acceder. una forma de acceder al c贸digo html desde JS es por medio de la funci贸n document.querySelector(), en el cual dentro de un string le indicamos cual es el selector al cual queremos acceder desde JS.

Un Ejemplo de esto seria lo siguiente:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manipulaci贸n del DOM b谩sica - Curso Pr谩ctico de JavaScript</title>
</head>
<body>
    <h1>Manipulaci贸n del DOM B谩sica</h1>
    <p>Esto es un p谩rrafo</p>
    <p class="parrafito">Esto es un p谩rrafo con clase</p>
    <p id="pid">Esto es un p谩rrafo con ID</p>

    <input type="text" placeholder="Escribe algo aqu铆" value="hola mundo">

    
</body>
<script src="./main.js"></script>
</html>

En JavaScript

const h1 = document.querySelector('h1');

para ver el resultado en consola debemos escribir un console.log de la siguiente manera:

console.log(h1);

visualiz谩ndose en consola de la siguiente manera:

Con esta funci贸n document.querySelector() podemos acceder al html desde su etiqueta, clase o id.

const p = document.querySelector('p');
const parrafito = document.querySelector('.parrafito');
const pid = document.querySelector('#pid');
const input = document.querySelector('input');

console.log({h1, p, parrafito, pid, input});

como dato aca podemos ver todas las propiedades que nuestro navegador nos da para acceder y manipular nuestros elementos en HTML.

Para poder manipular un objeto del DOM

  • Tenemos que 鈥渆scucharlo鈥, o poder leerlo de alguna manera

    • Entonces usamos document ,que representa el dom
    • Existen varios metodos para obtener acceder a un elemento(nodo) del arbol
      • getElementById(鈥檌d鈥)-obtenemos por id
      • querySelectorAll(鈥欌)-obtenemos todos los elementos del tippo que hayamos seleccionado; clases, etiquetas鈥
      • etc
    • en este caso usamos el metodo querySelector(鈥欌檈lemento鈥欌), para decir en que nodo del arbol vamos a trabajar
    • cada uno de estos elementos tiene sus propopias propiedades y metodos, con el fin de manipularlas

    Cada elemento que obtengamos tendra muchas propiedades que podamos usar o manipular

    • value por ejemplo

Gracias por la exrtencion, la necesitaba para poder distinguir cual proyecto tenia abierto y poder colocarle el color de la marca que estuviera trabajamdo.
Por que en ocaciones tenia tres marcas abiertas y de repente las confundia 馃き

Me gusta muchisimo este curso鈥 en el anterior se hacian demasiadas cosas a la vez y eso generaba frustracion al intentar seguirlo. Buenisimo que se renovara!

Un suceso que me sucedi贸:
Cre茅 la base del HTML con alg煤n shortcut, el primero que me funcion贸 y en el html que me gener贸, incluy贸 el acceso al archivo 鈥榤ain.css鈥 y al archivo 鈥.main.js鈥, pero los agreg贸 en el header
Todo iba bien, el c贸digo JS se ve铆a y funcionaba en el navegador. Pero鈥
Al tratar de utilizar querySelector, ne daba valores null en todos los elementos a imprimir.
La soluci贸n fue cambiar la etiqueta src del main.js del header al body
Por si les sucede igual

Objeto Window: Las funciones o m茅todos que trae el navegador:

馃敠 Leyendo HTML desde JavaScript

Para leer y manipular el DOM usamos document
.

querySelector()

Obtener primer elemento usando selectores CSS

const paragraph = document.querySelector('.paragraph');
  • Cuando imprimimos en consola en este caso h1, si bien en google chrome muestra directamente el contenido de la etiqueta h1 no sucede en todos los navegadores, como buenos desarrolladores debemos tener varios navegadores (al menos los m谩s usados) y probar el comportamiento del c贸digo en cada uno ya que puede suceder que no sea el mismo que esperamos ni el que vemos en una clase con un navegador espec铆fico.

Estoy impresionado de todo lo que se puede acceder con el querySelector ya que estaba acostumbrado al getElementById

Gracias Platzi por solucionar esto, este era el hueco que hab铆a en la ruta, especialmente en el manejo del DOM.

Cuando puse en el editor de texto

<code> const p = document.getElementsByTagName('p');

en el navegador me sale esto:

<code> p: HTMLCollection(3) [p, p.parraf, p#pid, pid: p#pid]

Que es lo opuesto a lo que hizo el maestro con:

<code> const p = document.querySelectorAll('p');

Sin embargo cuando se usa una u otra ?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Curso practic贸 de js</title>
</head>
<body>
    <h1>Curso Practico de js</h1>

    <p>este es un parafo</p>
    <p class="parrafito">esto es una clase</p>
    <p id="id">esto es un id</p>

    <script src="./script.js"></script>
</body>
</html> 

archivo js

const h1 = document.querySelector("h1");
const p = document.querySelector("p");
const parrafito = document.querySelector(".parrafito");
const id = document.querySelector("#id");

console.log({h1})
console.log({h1, p , parrafito, id})

team getElementBy鈥 en vez de querySelector

隆Excelente el nuevo curso!

//leer tag html por selector, clase  o id
const h1=document.querySelector('h1');
const p=document.querySelector('p');
const parrafito=document.getElementsByClassName('.parrafito');
const pid=document.getElementById('#pid');
const input=document.querySelector('input');

console.log(input.value);
console.log({h1,p,parrafito,pid,input,});