No tienes acceso a esta clase

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

Curso Pr谩ctico de JavaScript

Curso Pr谩ctico de JavaScript

Juan David Castro Gallego

Juan David Castro Gallego

Leyendo HTML desde JavaScript

11/29
Recursos

Aportes 67

Preguntas 14

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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>

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:

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.

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.

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.

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

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 馃檶

Una critica, el profesor quiere hacerse el gracioso confundiendo llaves y corchetes, para alguien que esta aprendiendo y no lo tiene tan claro no es nada gracioso y es bastante confuso鈥 sobretodo porque el profesor sabe perfectamente la diferencia y donde se usa cada uno.

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');

Me surgi贸 una duda con el tema de los m茅todos para llamar por clase en JavaScript y pues se lo pregunt茅 a ChatGPT, aqui dejo lo que me respondi贸 por si a alguien le srive.

querySelector and getElementsByClassName are both methods used in JavaScript to select elements from an HTML document, but they work in slightly different ways.

querySelector allows you to select the first element that matches a given CSS selector. For example, you can use document.querySelector(鈥.my-class鈥) to select the first element with the class 鈥渕y-class鈥.

getElementsByClassName returns a collection of all elements with the specified class name. For example, you can use document.getElementsByClassName(鈥榤y-class鈥) to get all elements with the class 鈥渕y-class鈥. The returned object is a HTMLCollection, which is similar to an array.

So in short, querySelector is used to select the first element that matches the CSS selector and getElementsByClassName is used to select all elements that match the class name and returns it as an array-like object.

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

Personalizar el vsc por colores con la extensi贸n Peacock es excelente, si no les funciona F1 para bucar los colores pueden probar con ctrl + shift +p.

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!

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

  • 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.

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 ?

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

<!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})

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 馃き

M脡TODOS DEL OBJETO DOCUMENT
https://developer.mozilla.org/es/docs/Web/API/Document#m茅todos
Document.getElementById()
Devuelve una referencia de objeto al elemento identificado.
Document.getElementsByClassName()
Devuelve una lista de elementos con el nombre de clase dado.
Document.getSelection()
Devuelve un objeto Selection que representa el rango de texto seleccionado por el usuario o la posici贸n actual del signo de intercalaci贸n.
Document.querySelector()
Devuelve el primer nodo Element dentro del documento, en el orden del documento, que coincide con los selectores especificados.
Y m谩s鈥

a este vato no se le puede acelerar ni en 1.25 x q ya no se le entiende nada!

El comportamiento de console.log() explicado por el profesor Juan David en el minuto 9 me result贸 muy particular. Dependiendo de la forma como se haya ingresado el argumento a esta funci贸n depedne su resultado. Entonces si le ingresamos por argumento un elemento html lo devuelve tal y como se muestra en el DOM, pero si lo ingresamos entre llaves {} lo trata como un objeto, es decir, nos muestra las propiedades y m茅todos que tienen asignados (util para saber cu谩les de ellos tenemos disponibles y usar).

En este art铆culo se hace aluci贸n a un comportamiento similar.

En la documentacion oficial MDN, se indica que el nombre de la CLASE o el ID utilizando getElements no debe tener como prefijo el 鈥.鈥 贸 鈥#鈥 segun sea ale caso.
.
https://developer.mozilla.org/es/docs/Web/API/Document/getElementsByClassName

const class1 = document.getElementsByClassName('clase1');
const id1 = document.getElementById('id1');

Cuando se colocan los simbolos de los selectores, se muestran los valores null

const class1 = document.getElementsByClassName('.clase1');
const id1 = document.getElementById('#id1');

Este video ha sido el mejor de todo el curso hasta el momento. Super interesante.

Aqu铆 mi peque帽o aporte:
El console.log esta llamando a un objeto literal donde sus propiedades tienen el mismo nombre que las variables por eso no es necesario el volver a escribir el valor y esto reduce el c贸digo.

console.log({
  inputId, // inputId: inputId
  h1, // h1:h1
  paragraph1, // paragraph1:parapraph1
  paragraph2, //paragraph2:paragraph2
});
quiz谩s no es muy importante, pero de verdad me llamo much铆simo la atenci贸n como David escribi贸 "123456789" en una mil茅sima segundos ! jajaj en el minuto '11.12.'

El objeto 鈥渄ocument鈥 proporciona muchas funciones y propiedades 煤tiles para trabajar con el DOM. Algunas de las m谩s comunes incluyen:

  • getElementById(): Devuelve un elemento HTML con un atributo 鈥渋d鈥 espec铆fico.
  • getElementsByClassName(): Devuelve una lista de elementos HTML que tienen una determinada clase.
  • getElementsByTagName(): Devuelve una lista de elementos HTML con un nombre de etiqueta espec铆fico.
  • querySelector(): Devuelve el primer elemento HTML que coincide con un selector CSS dado.
  • querySelectorAll(): Devuelve una lista de elementos HTML que coinciden con un selector CSS dado.
  • createElement(): Crea un nuevo elemento HTML con la etiqueta especificada.
  • appendChild(): Agrega un nuevo elemento HTML como hijo de otro elemento.
  • innerHTML: Devuelve o establece el contenido HTML de un elemento.
  • textContent: Devuelve o establece el texto sin formato de un elemento.

Estas son solo algunas de las funciones y propiedades disponibles en el objeto 鈥渄ocument鈥. Hay muchas m谩s que pueden resultar 煤tiles dependiendo de lo que est茅s tratando de hacer con el DOM.

馃搩 Archivos del Proyecto 馃搩


Pasos 馃搶

  • 鈥 En la terminal, dentro de la carpeta del proyecto llamado curso-js-practico (para devolverse a esa carpeta estando en el otro mini-proyecto se ejecuta: cd ..), se crea otra carpeta para el mini-proyecto llamada leyendo-html-desde-js ejecutando:
take leyendo-html-desde-js

  • 鈥 Abrir el editor VS Code ejecutando:
code .

  • 鈥 En el men煤 izquierdo de VS Code, crear un nuevo archivo llamado index.html, el c贸digo queda:
<!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 placeholder="Escribe algo aqu铆" value="123" />

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

  • 鈥 Crear otro archivo llamado script.js, el c贸digo queda:
// h1 { color: red }
// .parrafito { ... }
// #pid { ... }

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,
});

  • 鈥 Para correr el script, se da click derecho sobre el nombre de index.html en el men煤 de VS Code y se selecciona 鈥淥pen with Live Server鈥, aparece un navegador, se da click derecho en la p谩gina y se selecciona 鈥淚nspeccionar鈥, luego se selecciona la pesta帽a 鈥淐onsole鈥.
  • 鈥 Cuando se recarga la p谩gina, en la consola aparece el mensaje: 鈥123鈥 seguido de los valores vinculados a h1, p, parrafito, pid e input.

Leyendo HTML desde JavaScript


Para leer y manipular contenido HTML desde JavaScript, puedes utilizar el Document Object Model (DOM), que es una interfaz de programaci贸n que permite acceder y modificar elementos en un documento HTML. Aqu铆 tienes algunos ejemplos de c贸mo puedes hacerlo:

Supongamos que tienes el siguiente HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Ejemplo</title>
</head>
<body>
    <div id="miDiv">
        <p>Este es un p谩rrafo de ejemplo.</p>
    </div>
</body>
</html>

Puedes acceder al contenido de <p> utilizando JavaScript:

// Obtener el elemento div por su ID
var miDiv = document.getElementById("miDiv");

// Obtener el elemento <p> dentro del div
var miParrafo = miDiv.querySelector("p");

// Acceder al contenido del p谩rrafo
var contenido = miParrafo.textContent;

console.log(contenido); // Esto imprimir谩: "Este es un p谩rrafo de ejemplo."

Tambi茅n puedes cambiar el contenido de un elemento HTML:

// Cambiar el contenido del p谩rrafo
miParrafo.textContent = "Nuevo contenido para el p谩rrafo";

// O modificar el contenido HTML directamente
miDiv.innerHTML = '<p>Este es un nuevo p谩rrafo.</p>';

Si deseas interactuar con eventos, como hacer algo cuando un bot贸n es presionado, aqu铆 hay un ejemplo:

<!DOCTYPE html>
<html>
<head>
    <title>Eventos</title>
</head>
<body>
    <button id="miBoton">Haz clic</button>

    <script>
        // Obtener el bot贸n por su ID
        var miBoton = document.getElementById("miBoton");

        // Agregar un escuchador de eventos
        miBoton.addEventListener("click", function() {
            alert("隆Bot贸n clickeado!");
        });
    </script>
</body>
</html>

En este ejemplo, cuando se hace clic en el bot贸n, se muestra una alerta con el mensaje 鈥溌ot贸n clickeado!鈥.

Estos son solo ejemplos b谩sicos de c贸mo puedes leer y manipular contenido HTML utilizando JavaScript. El DOM proporciona muchas m谩s funciones y m茅todos para trabajar con elementos HTML y sus propiedades.



Espero haber sido de ayuda! 馃懆鈥嶐煉

atributos!

10/27 Leyendo HTML desde JavaScript
En esta lecci贸n se ense帽a como leer elementos HTML desde JavaScript.

  1. Se crean elementos HTML en el archivo index.html, como parrafo simple, otro con una clase llamada 鈥減arrafito鈥, otro con un ID llamado 鈥減id鈥 y un input con un placeholder que dice 鈥 Escribe algo aqui 鈥.
  2. En el archivo JavaScript, se utiliza la funci贸n 鈥渄ocument.querySelector鈥 para seleccionar los elementos HTML creados anteriormente. Esta funci贸n nos permite seleccionar los elementos HTML seg煤n:
    1. nombre de la etiqueta
    2. nombre de la clase
    3. ID del elemento
  3. Existen otras funciones para leer HTML desde JavaScript como son:
  • getElementById
  • getElementsByClassName
  • getElementsByName
  • getElementsByTagName
  1. Se se帽ala que estas funciones solo funcionan en el navegador, ya que en node.js, el entorno de ejecuci贸n de JavaScript en el backend, no se manipulan elementos HTML, sino que se trabaja con otras cosas, como bases de datos y servidores.

Ejemplos:

  • getElementById();
//Obtiene el elemento con el ID "miParrafo"
const miParrafo = document.getElementById("miParrafo");
  • getElementsByClassName();
//Obtiene todos los elementos con la clase "miClase"
const elementosConClase = document.getElementsByClassName('miClase麓);
  • getElementsByName();
//Obtiene todos los elementos con el nombre "miNombre"
const elementosConNombre = document.getElementByName("miNombre");
  • getElementByTagName();
// Obtiene todos los elementos con la etiqueta "p"
const elementosPTag = document.getElementByTagName("p");
  • querySelector();
// Obtiene el primer elemento que tenga la clase "miClase"
const miElemento = document.querySelector(".miClase");
  • querySelectorAll();
// Obtiene todos los elementos que tengan la clase "miClase"
const elementosConClase = document.querySelectorAll(".miClase");

abrv emmet:

p.parrafito{Esto es un parrafo con clase} = <p class=鈥減arrafito鈥>Esto es un parrafo con clase</p>

p#id{esto es un parrafo con ID} = <p id="id">esto es un parrafo con ID</p>

En VSC si escribes div.clase y das enter o tab obtendras:
<div class=鈥渃lase鈥></div>

Han notado como console.log(h1) a veces devuelve un nodo y a veces el html?

Esto solo pasa en Chrome (en si en todos los navegadores basados en chromium)
Si han visto este comportamiento no se preocupen, es normal, pueden encontrar mas detalles de por qu茅 pasa esto aqu铆(en ingl茅s).

Les recomiendo seguir con el curso y no romperse la cabeza tratando de entender esto.

Esta clase si estuvo un poco complicada ya que el profe hizo mencion de varios metodos que podemos usar y como son muchos me imagino que cada uno tendra su propia propiedad a profundizar pero no pasa nada solo hay que enfocarse el lo importante que es seguir aprendiendo.

Al permitr usar como argumento selectores CSS en los m茅todos querySelector() y querySelectorAll() estos son muy vers谩tiles para la selecci贸n de elementos en el documento html (https://developer.mozilla.org/es/docs/Web/CSS/CSS_Selectors). Contin煤an con soporte los m茅todos document.getElement鈥(). En siguiente art铆culo podemos leer una comparaci贸n sobre ambas formas. Comparaci贸n: querySelector vs. getElementById

para docuemnt.querySelector() o querySelectroAll(), los argumentos de dichas funciones pueden ser selectores de tipo id, nombre de clase o nombre de etiqueta,
por ejemplo
document.querySelector("#id");
document.querySelector(".className");
document.querySlector(鈥渢agName鈥);

Funciones o m茅todos de JavaScript:
Son los que nos permiten seleccionar los elementos que tenemos en HTML

Les dejo 茅ste link, para crear etiquetas de formas m谩s r谩pida

https://code.visualstudio.com/docs/editor/emmet

Hay varias formas de ejecutar JavaScript y para poder hacerlo, debemos tener un entorno de ejecuci贸n de JavaScript. En el frontend, lo hacemos a trav茅s del navegador y la consola. En el backend, lo hacemos a trav茅s de nodeJS.

Nuestro trabajo es hacer que las aplicaciones web que creemos, ejecute todo el c贸digo JS mediante el html y no desde la consola. Osea, el html tambi茅n es un entorno de ejecuci贸n de js. Todas las funciones, m茅todos y objetos que ya est谩n cread@s (document.write, alert, document.getElementeById, [], {}, etc.), nos las proporciona nuestro ambiente de ejecuci贸n (El navegador, la consola, nodeJS, etc.).

Cuando queramos acceder a elementos html desde nuestro js, por convenci贸n, debemos crear variables que representen los selectores de los elementos a los que queramos acceder.

鉁煢

Dato curioso
Si en un input usamos el evento onkeyup(), podemos tomar el valor actual de dicho input y usarlo como queramos n.n. Mira un ejemplo:


Ac谩 te dejo el c贸digo :3
.
HTML

<div>
      <p id="inputValue">...</p>
      <input type="text" name="name" id="inputText" onkeyup="printInputValue()"/>
    </div>

Js

function printInputValue(){
    let inputValue = document.getElementById('inputText').value;
    document.getElementById('inputValue').innerText=inputValue;
}

importante revisar el tipo de dato que obtenemos desde el imput, y hacer la prueba sumando dos imput es re wow

const tituliPrincipal = document.querySelector('h1'); // cual es el selector que quieres en seelccionar querySelector escoje al primero que se encuentra
const p = document.querySelector('p');
const parrafito = document.getElementsByClassName('.parrafito');
const esUnId = document.getElementById('#esunid');
const input = document.querySelector('input');
const input2 = document.getElementsByClassName('.input2');

console.log({
    tituliPrincipal,
    p,
    parrafito,
    esUnId,
    input
});
 console.log(typeof(input.value));
 let suma = input.value + input2.value;
 console.log(suma);
 alert(suma);

Escribir directamente: console.log(document.querySelector(鈥榟1鈥));

me encanto

Woww, yo solo conoc铆a el m茅todo document.getElementById() para seleccionar elementos en HTML desde JS por el Curso de Programaci贸n B谩sica. Es fabuloso darme cuenta c贸mo voy ampliando mis conocimientos sobre este lenguaje y la programaci贸n. Muy buen profesor JuanDC, me anima a seguir tomando las clases del curso y a nunca persistir aunque a veces me sienta muy frustrado de tantos conceptos; pero bueno, seguimos adelante 馃榿

Orta definici贸n de querySelector
En JavaScript, querySelector es un m茅todo que se utiliza para seleccionar elementos HTML en una p谩gina web. El m茅todo querySelector permite buscar un elemento HTML en el DOM (Document Object Model) utilizando un selector CSS.

Por ejemplo, si tienes un elemento HTML con la clase 鈥渕i-elemento鈥, puedes seleccionarlo con querySelector de la siguiente manera:

const miElemento = document.querySelector(鈥.mi-elemento鈥);

como se ve en el ejemplo, se esta asignando a la variable miElemento un o unos objetos u elemento html que tengan como estilo o clase llamada mi-elemento

const miElemento = document.querySelector(鈥榟3鈥);
aca se asigna a la variable miElemento todos los nodos o elementos que tengan como etiqueta h3

voy comprendiendo bien el profe lo explica bien , ojala que saquen otro curso igual pero actualizado

Truco de console.log({}) imprime lo que este en los corchetes como objeto

Query Selector: leer elementos del HTML que no tienen clase o id

Se puede acceder a las propiedades de un elemento HTML con JS usando console.log( { } ), de esta manera usando llaves se converte la variable en un objeto.

Dejo el ejemplo en Codilink

Waos, hoy aprend铆 sobre:
鈫 document.querySelector(elemento)
Averiguare m谩s las diferencias sobre esto con los cl谩sicos getElementById y getElementByClass

La forma profesional de conectar conectar JavaScript con los elementos es creando una variables **const **que represente cada elemento, id o class.

Por ejemplo, tenemos **querySelector (鈥樷) **y seleccionamos lo que queremos. Si el elemento no tiene class o id, simplemente lo llamamos como aparece abajo con h1 y p.

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

Para las class usamos el punto **. **igual que en css

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

Para los ID usamos el numeral **# **igual que en css

const pid = document.querySelector('#pid');

Podemos poner todas las propiedades dentro de un console.log para imprimirlas.
Para seleccionar todas los elementos sin importar si tienen ID o class podemos usar querySelectorAll (鈥樷)

En este ejemplo tome el contenido de las etiquetas simulando que capturo una noticia:

var h1 = document.querySelector('h1');
var p = document.querySelector('p');
var classusuario = document.querySelector('.usuario');

var conetenidoh1 = h1.textContent;

var contenidop = p.textContent;

var classusuariocontent = classusuario.textContent;


console.log("Este es el contenido de la etiqueta H1: " + conetenidoh1);

console.log("Este es el contenido de la etiqueta p: " + contenidop);

var classusuario = classusuario.textContent;
console.log("Este es el contenido de la etiqueta Clase Usuario: " + classusuariocontent);

Aqu铆 mis apuntes en Notion 馃槃
APUNTES

Excelente clase, muy buena 馃憤

驴Como puedo configuarar la consola?

Se que usamos mucho document.querySelector()
pues bien hay una manera mas sencillo de ahorrarnos tanto codigo

Here鈥檚 how you go about it.

const $ = document.querySelector.bind(document);
const $$ = document.querySelectorAll.bind(document);

Now you can use the following:

// Change the background color of a class.
$('.class').style.background="#BADA55";

// Change the inner HTML of an ID.
$('#id').innerHTML="<span>Cool beans!</span>";

// Select all images on the webpage.
$$('img')

lo malo es que podria traer problemas con JQuery pero ya no se usa como antes

use-instead-of-document-queryselector-all-in-javascript

隆Excelente el nuevo curso!

team getElementBy鈥 en vez de querySelector

//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,});