DOM гэж юу вэ?

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

DOM яаж ажилладаг вэ?

Хөтөч HTML файлыг уншихад дараах мод үүсдэг:

document
└── html
    ├── head
    │   └── title
    └── body
        ├── h1
        └── p

JavaScript-д document объектоор дамжуулан энэ модны аль ч зангилааг (node) олж, өөрчилж болно. document нь хуудасны "эзэн" гэж ойлгож болно.

Элемент олох

Хамгийн түгээмэл хэрэглэгддэг методуудыг харцгаая:

<h1 id="гарчиг">Сайн уу!</h1>
<p class="тайлбар">Энэ параграф.</p>
<button id="товч">Дарах</button>

// ID-гаар нэг элемент олох
const гарчиг = document.getElementById("гарчиг");

// CSS selector-оор олох (хамгийн уян хатан)
const товч = document.querySelector("#товч");
const тайлбар = document.querySelector(".тайлбар");

// Бүх тохирох элементийг олох
const бүх параграф = document.querySelectorAll("p");

querySelector нь CSS selector ашигладаг — # нь ID, . нь class гэдгийг та CSS-с мэднэ.

Агуулгыг өөрчлөх

Элемент олсны дараа түүний текст, HTML агуулгыг өөрчилж болно:

const гарчиг = document.querySelector("#гарчиг");

// Зөвхөн текст өөрчлөх
гарчиг.textContent = "Шинэ гарчиг";

// HTML ч оруулж болно
гарчиг.innerHTML = "Шинэ <strong>гарчиг</strong>";

textContent нь аюулгүй — HTML тэмдэглэгээ зүгээр л текст болгон хэвлэнэ. innerHTML нь HTML задлан харуулна.

Style өөрчлөх

JavaScript-ээр элементийн CSS style-г шууд өөрчилж болно:

const хайрцаг = document.querySelector("#хайрцаг");

хайрцаг.style.backgroundColor = "#4ade80";
хайрцаг.style.color = "white";
хайрцаг.style.padding = "16px";
хайрцаг.style.borderRadius = "8px";

CSS-д background-color гэж бичдэг бол JavaScript-д backgroundColor — зураасыг томоор бичих хэрэгтэй (camelCase).

Class нэмэх, хасах

Style-г шууд бичихийн оронд CSS class нэмэх, хасах нь илүү цэвэр арга:

const товч = document.querySelector("#товч");

// Class нэмэх
товч.classList.add("идэвхтэй");

// Class хасах
товч.classList.remove("идэвхтэй");

// Class байвал хас, байхгүй бол нэм
товч.classList.toggle("харанхуй");

// Class байгаа эсэхийг шалгах
if (товч.classList.contains("идэвхтэй")) {
  console.log("Товч идэвхтэй байна");
}

Шинэ элемент үүсгэж нэмэх

DOM-д шинэ элемент үүсгэж, хуудасны аль ч хэсэгт нэмж болно:

// Шинэ элемент үүсгэх
const шинэ параграф = document.createElement("p");
шинэ параграф.textContent = "Энэ параграф JavaScript-ээр нэмэгдлээ!";
шинэ параграф.classList.add("шинэ");

// Хуудасны body-д нэмэх
document.body.appendChild(шинэ параграф);

createElement нь тухайн HTML тэгийн элементийг үүсгэнэ, appendChild нь зорилтот элементийн доор нэмнэ.

Дараагийн хичээлд:

getElementById, querySelector нарийвчилсан хэрэглээ, олон элементтэй ажиллах querySelectorAll болон forEach-ийн хослолыг үзнэ. Хуудасны бүх товчийг нэг дор удирдах зэрэг бодит жишээнүүд байна.