document           // Representa al árbol completo: el documento HTML

const element = document.getElementById("presentation");  //  Legacy (limitado a IDs)
const element = document.querySelector("#presentation");  //  Equivalente (y más potente)

const elements = document.getElementsByTagName("div");    //  Devuelve HTMLCollection
const elements = document.querySelectorAll("div");        //  Equivalente (NodeList)
const elements = document.getElementsByClassName("pato"); //  Devuelve HTMLCollection
const elements = document.querySelectorAll(".pato");      //  Equivalente (NodeList)

const element = document.querySelector(".container");  //  Busca/selecciona el PRIMER elemento
//  Si no encuentra, devuelve null

const elements = document.querySelectorAll("div");     //  Busca/selecciona TODOS los elementos
//  Si no encuentra, devuelve []

// Puedes hacer búsquedas acotadas (no sobre todo el documento)
element.querySelector("p");

// Imágenes que no tienen atributo "alt" (obligatorio)
const errorImg = document.querySelectorAll("img:not([alt])");

// Enlaces que lleven a una imagen PNG
const linkToImage = document.querySelectorAll("a[href$='png']");

// Enlaces que estén hechos sobre una imagen
const imageWithLink = document.querySelectorAll("a:has(img)");

// Las celdas de la segunda fila de cada tabla de la página
const cells = document.querySelectorAll("table tr:nth-child(2) td");

// Buscamos un elemento HTML concreto
const container = document.querySelector(".container");

// Ahora queremos continuar buscando pero hacia los padres, no hacia los hijos

// Busca el elemento más cercano (hacia arriba)
const ancient = container.closest(".page");

const paragraph = document.querySelector(".container .post");

// Sirve tanto para leer como para modificar
paragraph.innerHTML              // '<p>Esto es un párrafo de texto</p>'
paragraph.innerHTML = "<p>Hola, soy <strong>ManzDev</strong>.</p>";

// Confusa en ciertas situaciones. No soporta ciertos detalles modernos.

const paragraph = document.querySelector(".container .post");

// Métodos modernos (más intuitivos)
paragraph.getHTML();          // '<p>Esto es un párrafo de texto</p>'
paragraph.setHTMLUnsafe("<p>Hola, soy <strong>ManzDev</strong></p>");

// Deja claro que puede insertar HTML inseguro (innerHTML también lo es)

const options = {
  sanitizer: new Sanitizer({
    comments: true,                           // Elimina comentarios HTML
    removeElements: ["script", "iframe"]      // Elimina scripts e iframes
  })
}

document.body.setHTMLUnsafe("<p onmouseenter='alert(1)'>Hola amigo mío.</p>");     // Inseguro
document.body.setHTML("<p onmouseenter='alert(1)'>Hola amigo mío.</p>", options);  // Seguro

const element = document.querySelector(".element");

element.nodeName                  // Esto es una propiedad (la etiqueta HTML en mayúsculas)
element.getAttribute("nodeName")  // Esto SI es un atributo HTML
// Si tuvieramos el atributo nodeName, tendríamos valores diferentes

const presentation = document.querySelector("#presentation");
element.id                        // "presentation"
element.getAttribute("id")        // "presentation"
// Es la misma porque ciertos atributos HTML los REFLEJA AUTOMÁTICAMENTE

const element = document.querySelector(".element");

//  Forma rápida
element.id = "name";
element.style.backgroundColor = "indigo";   // Cambia la propiedad CSS background-color (inline style)

//  Forma metódica
element.setAttribute("id", "name");
element.setAttribute("style", "background-color: red");
element.style.setProperty("background-color", "red");

// Caso especial: Booleanos
const video = document.querySelector("video");

video.controls = true;
video.setAttribute("controls", "");     // Atributo HTML booleano: false = no existe atributo

video.removeAttribute("controls");
video.toggleAttribute("controls");      // Si existe, lo elimina. Si no existe, lo añade

const div = document.createElement("div");
div.classList.add("duck-element");
div.textContent = "Protip: Don't use Tailwind!";

div.isConnected               // false (no está en el DOM, está en memoria)
document.body.append(div);
div.isConnected               // true (si está en el DOM)

const createTag = (className = "element", tag = "div", options = {}) => {
  const element = document.createElement(tag);
  element.classList.add(className);
  if (options.text) element.textContent = options.text;
  if (options.html) element.setHTMLUnsafe(options.html);
  return element;
}

createTag("container", "p", { text: "Hello!" });    // <p class="container">Hello!</p>

const parent = document.querySelector(".parent");
// <div class="parent">Mensaje: </div>

const tag = createTag("welcome", "p", { text: "¡Bienvenido, usuario!" });
// <p class="welcome">¡Bienvenido, usuario!</p>

parent.appendChild(tag);
//                             ↓ Lo inserta aquí (poco flexible)
// <div class="parent">Mensaje: </div>

const parent = document.querySelector(".parent");
const tag = createTag("welcome", "p", { text: "¡Bienvenido, usuario!" });

parent.before(tag);     // (↓) <div class="parent">Mensaje:</div>
parent.prepend(tag);    // <div class="parent">(↓) Mensaje:</div>
parent.append(tag);     // <div class="parent">Mensaje: (↓) </div>
parent.after(tag);      // <div class="parent">Mensaje:</div> (↓)

tag.remove();           // Elimina el elemento del documento HTML

const tag = createTag("welcome", "p", { text: "¡Bienvenido, usuario!" });

// API de inserción adyacente
parent.insertAdjacentElement("beforeend", tag);
parent.insertAdjacentHTML("beforeend", `<p>Puedes insertar el HTML directamente</p>`);
parent.insertAdjacentText("beforeend", `O insertar textos directamente sin etiquetas HTML`);

import { html, render } from "https://unpkg.com/lit-html";  // o "lit-html" si usas pnpm

const app = document.querySelector("#app");

const template = (name) => html`<h1>Hola, soy <strong>${name}</strong></h1>`;

render(template("ManzDev"), app);   // renderiza el contenido en el DOM
render(template("Patito"), app);    // re-render (no sobreescribe, solo detecta lo que cambia)

import { html, render } from "https://unpkg.com/lit-html";

const app = document.querySelector("#app");

const addButton = (text, action) => html`<button @click=${action}>${text}</button>`;

render(addButton("Click me", () => alert("Clicked!!")), app);

import { html, render } from "https://unpkg.com/lit-html";

const app = document.querySelector("#app");
const tasks = [
  "Dejar un comentario en este video de Youtube",
  "Dejar un hype desde los comentarios de móvil",
  "Dejar un like al video de Youtube",
  "Unirte al servidor de Discord",
  "Escuchar las canciones de music.manz.dev"
];

const setItem = (name) => html`<li>${name}</li>`;
const setList = (items) => html`<ol>${ items.map((item) => setItem(item)) }</ol>`;

render(setList(tasks), app);