JS DOM

Document Object Model

Document Object Model

JavaScript-ийн DOM (Document Object Model) гэдэг нь вэб хуудсын бүтцийг объект хэлбэрээр дүрслэх загвар юм. DOM нь JavaScript-ээр вэб хуудсыг динамикаар өөрчлөх, засах боломжийг олгодог.

DOM Tree

Document Object Model (DOM):

HTML болон XML файлуудыг мод бүтэц (tree structure)-ийн хэлбэрээр илэрхийлдэг загвар.

Node Relationships:

DOM-ын Үндсэн Объектууд

1. Window Object

        console.log(window.innerWidth); // Цонхны өргөнийг авах
                

2. Document Object

        console.log(document.title); // Хуудсын гарчгийг авах
                

Элемент Сонгох Аргууд

1. ID-аар сонгох:

        document.getElementById("myId");
                

2. Class-аар сонгох:

        document.getElementsByClassName("myClass");
                

Элемент Сонгох Аргууд

3. Tag-ийн нэрээр сонгох:

        document.getElementsByTagName("div");
                

4. CSS selector ашиглах:

        document.querySelector(".myClass"); // Эхний элементийг сонгоно
        document.querySelectorAll(".myClass"); // Бүх элементүүдийг сонгоно
                

Элемент Засварлах

1. Агуулгыг өөрчлөх:

        element.innerHTML = "Шинэ текст";
        element.textContent = "Зөвхөн текст.";
                

2. Атрибут удирдах:

        element.setAttribute("class", "active");
                

Элемент Засварлах

3. CSS загвар өөрчлөх:

style:

        element.style.color = "red";
                

classList:

        element.classList.add("newClass");
        element.classList.remove("oldClass");
                

DOM Navigation

1. Parent navigation

        element.parentNode;
        element.parentElement;
                

2. Child navigation

        element.children;
        element.firstElementChild;
        element.lastElementChild;
                

3. Sibling navigation

        element.nextElementSibling;
        element.previousElementSibling;
                

DOM Manipulation

1. Шинэ элемент үүсгэх:

        const newDiv = document.createElement("div");
        newDiv.textContent = "Hello!";
        document.body.appendChild(newDiv);
                

2. Элемент устгах:

        parent.removeChild(child);
                

3. Элемент байрлуулах:

        parent.insertBefore(newChild, referenceChild);
                

DOM Manipulation

4. Элемент орлуулах:

        parentNode.replaceChild(newChild, oldChild);
            

DOM Manipulation

5. Элементийн өмнө байрлуулах:

        parentNode.insertBefore(newChild, referenceChild);
                

Events

1. Event handling:

        element.addEventListener("click", function () {
            alert("Clicked!");
        });
                

2. Common Event types

DOM Animation

1. requestAnimationFrame(callback)

Энэ арга нь JavaScript-р анимэйшн хийхэд ашиглагддаг хамгийн үр дүнтэй арга. Энэ нь браузерийн refresh rate (ихэвчлэн 60fps)-тэй тохируулж хөдөлгөөнийг хамгийн жигд харагдуулдаг.

Жишээ:

    const box = document.getElementById("box");
    let position = 0;

    function animate() {
        position += 1; // Байршлыг нэмэгдүүлэх
        box.style.left = position + "px"; // Шинэ байршлыг оноох

        if (position < 300) {
            requestAnimationFrame(animate); // Дахин анимэйшн хийх хүсэлт гаргах
        }
    }

    requestAnimationFrame(animate);
                

DOM Animation

2. CSS Хослуулалт

Анимэйшн хийхдээ JavaScript-ийг CSS-тэй хослуулж ашиглах нь ачааллыг хөнгөвчилнө.

Жишээ:

DOM Storage

JavaScript-р өгөгдөл хадгалахдаа браузерийн Local Storage, Session Storage, эсвэл Cookies-ийг ашигладаг. Эдгээр нь өгөгдлийг түр зуур хадгалах эсвэл удаан хугацаанд хадгалах уян хатан боломжийг олгодог.

DOM Storage

1. Local Storage

        // Өгөгдөл хадгалах
        localStorage.setItem("username", "John");

        // Өгөгдөл авах
        const username = localStorage.getItem("username");
        console.log(username); // "John"

        // Өгөгдөл устгах
        localStorage.removeItem("username");

        // Бүх өгөгдлийг устгах
        localStorage.clear();
                

DOM Storage

2. Session Storage

        // Өгөгдөл хадгалах
        sessionStorage.setItem("sessionId", "12345");

        // Өгөгдөл авах
        const sessionId = sessionStorage.getItem("sessionId");
        console.log(sessionId); // "12345"

        // Өгөгдөл устгах
        sessionStorage.removeItem("sessionId");

        // Бүх өгөгдлийг устгах
        sessionStorage.clear();
                

DOM Storage

3. Cookies

Cookies нь өгөгдлийг браузер дээр хадгалах өөр нэг арга юм. Энэ нь сервер болон браузер хооронд өгөгдөл дамжуулахад тохиромжтой.

Cookie үүсгэх:

        document.cookie = "username=John; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";
                

Thank you

Go to the Index page