JavaScript үндэс / Элемент өөрчлөх

Элемент өөрчлөх

Элементийг олсны дараа хийж болох зүйл маш олон — текст солих, HTML өөрчлөх, attribute тохируулах, style нэмэх, шинэ элемент үүсгэх, байгааг устгах. Энэ хичээлд эдгээрийг бүгдийг жишээ кодоор нарийвчлан үзнэ.

Текст ба HTML агуулга

Элементийн дотоод агуулгыг өөрчлөх хоёр гол арга байна:

javascript

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

// textContent — аюулгүй, зөвхөн текст
гарчиг.textContent = "Шинэ гарчиг";

// innerHTML — HTML тэмдэглэгээ задлан харуулна
гарчиг.innerHTML = "Шинэ <em>гарчиг</em>";

Хэрэглэгчийн оруулсан текстийг innerHTML-д бичвэл аюул учруулах боломжтой — тиймдмл хэрэглэгчийн өгөгдөлд textContent ашиглаарай.

Attribute өөрчлөх

HTML attribute-уудыг (src, href, alt, disabled гэх мэт) JavaScript-ээр унших, тохируулж болно:

javascript

const зураг = document.querySelector("#баннер");
const холбоос = document.querySelector("#гол-холбоос");

// Attribute унших
console.log(зураг.getAttribute("src")); // /зураг/баннер.png
console.log(холбоос.getAttribute("href")); // https://...

// Attribute тохируулах
зураг.setAttribute("src", "/зураг/шинэ-баннер.png");
зураг.setAttribute("alt", "Шинэ баннер зураг");

// Товчлол — нийтлэг attribute-уудыг шууд бичиж болно
холбоос.href = "https://ulaanbaatar.app";
зураг.src = "/зураг/өөр.png";

setAttribute бүх attribute-д ажиллана; нийтлэг attribute-уудад шууд .href, .src гэх мэтээр хандаж болно.

disabled ба hidden

Маягтын элементийг идэвхгүй болгох, нуух зэрэг нийтлэг үйлдлүүд:

javascript

const товч = document.querySelector("#илгээх-товч");
const алдааны мэдэгдэл = document.querySelector("#алдаа");

// Товч идэвхгүй болгох
товч.disabled = true;

// Товч дахин идэвхжүүлэх
товч.disabled = false;

// Элемент нуух
алдааны мэдэгдэл.hidden = true;

// Элемент харуулах
алдааны мэдэгдэл.hidden = false;

Style ба classList

Style-г шууд тохируулахын оронд class ашиглах нь илүү цэвэр арга — CSS болон JavaScript-ийн үүргийг тусгаарлана:

javascript

const карт = document.querySelector(".карт");

// Class нэмэх
карт.classList.add("идэвхтэй");
карт.classList.add("сонгогдсон", "гэрэлтсэн"); // Олныг нэг дор нэмж болно

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

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

// Шалгах
console.log(карт.classList.contains("идэвхтэй")); // true эсвэл false

Шаардлагатай бол style-г шууд тохируулж болно — гэхдээ тусад нь class үүсгэх нь дээр:

javascript

карт.style.backgroundColor = "#1e293b";
карт.style.borderRadius = "8px";
карт.style.padding = "16px";

Шинэ элемент нэмэх

createElement ба appendChild хослолоор шинэ элементийг DOM-д нэмнэ:

javascript

// Шинэ жагсаалтын мөр үүсгэх
const шинэ мөр = document.createElement("li");
шинэ мөр.textContent = "Шинэ даалгавар";
шинэ мөр.classList.add("даалгавар-мөр");

// Жагсаалтад нэмэх
const жагсаалт = document.querySelector("#даалгавар-жагсаалт");
жагсаалт.appendChild(шинэ мөр); // Доор нэмнэ

// Эхэнд нэмэхийн тулд
жагсаалт.prepend(шинэ мөр);

// Тодорхой байрлалд нэмэх
const лавлах = document.querySelector("#тэмдэглэгдсэн");
жагсаалт.insertBefore(шинэ мөр, лавлах);

Элемент устгах

Хэрэггүй болсон элементийг DOM-оос устгаж болно:

javascript

const хуучин мэдэгдэл = document.querySelector("#мэдэгдэл");

// Шууд устгах
хуучин мэдэгдэл.remove();

Эсвэл эцэг элементээрээ дамжуулан:

javascript

const эцэг = document.querySelector("#жагсаалт");
const хүүхэд = document.querySelector("#жагсаалт li:last-child");

эцэг.removeChild(хүүхэд);

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

Events — хэрэглэгч товч дарах, текст бичих, хулгана хөдлөх зэрэг үйлдлүүдэд хэрхэн хариу үйлдэл хийхийг үзнэ. DOM өөрчлөлт ба event хоёр нийлмэгц хуудас амьд болно.

← Өмнөх хичээлЭлемент сонгох Дараах хичээл →Үйл явдал (Events)