DOM ni o'zgartirish

document.body.innerHTML = `
<div id="ilova">
    <ul id="royxat">
        <li class="vazifa" data-id="1">Non olish</li>
        <li class="vazifa" data-id="2">Kitob o'qish</li>
    </ul>
</div>`;

const yangi = document.createElement("li");

yangi.className = "vazifa";
yangi.textContent = "Sport bilan shug'ullanish";
yangi.dataset.id = "3";

const royxat = document.getElementById("royxat");
royxat.appendChild(yangi);

console.log("Elementlar soni:", royxat.children.length);
console.log("Oxirgi element :", royxat.lastElementChild.textContent);
console.log("data-id        :", royxat.lastElementChild.dataset.id);
console.log("HTML da klass  :", royxat.lastElementChild.className);

const royxat = document.getElementById("royxat");

function yaratish(matn) {
    const el = document.createElement("li");
    el.textContent = matn;
    return el;
}

royxat.appendChild(yaratish("oxiriga"));
royxat.prepend(yaratish("boshiga"));
royxat.firstElementChild.after(yaratish("birinchidan keyin"));
royxat.lastElementChild.before(yaratish("oxirgidan oldin"));

const matnlar = [...royxat.children].map((e) => e.textContent);
console.log(matnlar.join("\n"));

const royxat = document.getElementById("royxat");

console.log("Boshida:", royxat.children.length);

royxat.firstElementChild.remove();
console.log("remove dan keyin:", royxat.children.length);

const oxirgi = royxat.lastElementChild;
const orin = document.createElement("li");
orin.textContent = "almashtirildi";
oxirgi.replaceWith(orin);

console.log("Oxirgi element:", royxat.lastElementChild.textContent);

// Hammasini tozalash
royxat.replaceChildren();
console.log("Tozalangandan keyin:", royxat.children.length);

const el = document.createElement("div");
document.body.appendChild(el);

el.style.color = "red";
el.style.backgroundColor = "yellow";      // camelCase!
el.style.fontSize = "20px";

console.log("color        :", el.style.color);
console.log("background   :", el.style.backgroundColor);
console.log("Inline HTML  :", el.getAttribute("style"));

// CSS o'zgaruvchilari
el.style.setProperty("--asosiy-rang", "blue");
console.log("CSS o'zgaruvchi:", el.style.getPropertyValue("--asosiy-rang"));

// Bir nechta uslubni birga
Object.assign(el.style, { padding: "10px", margin: "5px" });
console.log("padding      :", el.style.padding);

const vazifalar = [
    { id: 1, matn: "Non olish", bajarildi: true },
    { id: 2, matn: "Kitob o'qish", bajarildi: false },
    { id: 3, matn: "Sport", bajarildi: false }
];

function chizish(royxat, malumot) {
    const bolaklar = malumot.map((v) => {
        const li = document.createElement("li");
        li.className = v.bajarildi ? "vazifa bajarilgan" : "vazifa";
        li.dataset.id = String(v.id);
        li.textContent = v.matn;
        return li;
    });

    royxat.replaceChildren(...bolaklar);
}

const royxat = document.getElementById("royxat");
chizish(royxat, vazifalar);

console.log("Elementlar    :", royxat.children.length);
console.log("Bajarilganlar :", royxat.querySelectorAll(".bajarilgan").length);
console.log("Ikkinchi matn :", royxat.children[1].textContent);
console.log("Ikkinchi klass:", royxat.children[1].className);

const royxat = document.getElementById("royxat");

// Har qo'shishda DOM o'zgaradi - sekin
function sekin(soni) {
    royxat.replaceChildren();
    for (let i = 0; i < soni; i++) {
        const li = document.createElement("li");
        li.textContent = `element ${i}`;
        royxat.appendChild(li);          // har safar DOM ga tegadi
    }
}

// Fragmentda yig'ib, bir marta qo'shish - tez
function tez(soni) {
    const fragment = document.createDocumentFragment();
    for (let i = 0; i < soni; i++) {
        const li = document.createElement("li");
        li.textContent = `element ${i}`;
        fragment.appendChild(li);        // xotirada, DOM tegilmaydi
    }
    royxat.replaceChildren(fragment);    // bitta amal
}

sekin(100);
console.log("Sekin usul  :", royxat.children.length);

tez(100);
console.log("Tez usul    :", royxat.children.length);
console.log("Natija bir xilmi?:", royxat.children.length === 100);

const asl = document.createElement("div");
asl.className = "karta";
asl.innerHTML = "<span>ichki matn</span>";

const sayoz = asl.cloneNode(false);
const chuqur = asl.cloneNode(true);

console.log("Asl bolalari    :", asl.children.length);
console.log("Sayoz nusxa     :", sayoz.children.length);
console.log("Chuqur nusxa    :", chuqur.children.length);
console.log("Klass ko'chdimi?:", chuqur.className);
console.log("Bir obyektmi?   :", asl === chuqur);

document.body.insertAdjacentHTML("beforeend", `
<template id="kartaShablon">
    <div class="karta">
        <h3 class="karta__sarlavha"></h3>
        <p class="karta__matn"></p>
    </div>
</template>`);

const shablon = document.getElementById("kartaShablon");

function kartaYaratish(sarlavha, matn) {
    const nusxa = shablon.content.cloneNode(true);
    nusxa.querySelector(".karta__sarlavha").textContent = sarlavha;
    nusxa.querySelector(".karta__matn").textContent = matn;
    return nusxa;
}

const idish = document.createElement("div");
idish.appendChild(kartaYaratish("Birinchi", "Matn bir"));
idish.appendChild(kartaYaratish("Ikkinchi", "Matn ikki"));

console.log("Kartalar soni:", idish.querySelectorAll(".karta").length);
console.log("Birinchi     :", idish.querySelector("h3").textContent);
console.log("Shablon DOM da ko'rinadimi?:",
    document.querySelectorAll(".karta").length === 0);

const el = document.createElement("div");
el.textContent = "markaz";
document.body.appendChild(el);

el.insertAdjacentHTML("beforebegin", "<span>oldin</span>");
el.insertAdjacentHTML("afterbegin", "<b>ichida-boshida</b>");
el.insertAdjacentHTML("beforeend", "<i>ichida-oxirida</i>");
el.insertAdjacentHTML("afterend", "<span>keyin</span>");

console.log("Element ichi:", el.innerHTML);
console.log("Oldingi qo'shni:", el.previousElementSibling.textContent);
console.log("Keyingi qo'shni:", el.nextElementSibling.textContent);