JavaScript үндэс / Элемент сонгох

Элемент сонгох

JavaScript-ээр хуудасны ямар нэг зүйлийг өөрчлөхийн өмнө тухайн элементийг олох хэрэгтэй. Энэ хичээлд DOM-оос элемент олох бүх аргыг нарийвчлан үзнэ — аль нь хэзээ тохиромжтойг ойлгосноор код бичих хурд эрс нэмэгдэнэ.

getElementById

Нэг тодорхой элементийг олох хамгийн хурдан арга. HTML-д id өгсөн элементийг шууд олно:

html

<h1 id="гарчиг">JavaScript сургалт</h1>
<p id="тайлбар">Энд агуулга байна.</p>

javascript

const гарчиг = document.getElementById("гарчиг");
const тайлбар = document.getElementById("тайлбар");

console.log(гарчиг.textContent); // JavaScript сургалт
console.log(тайлбар.textContent); // Энд агуулга байна.

Олдоогүй бол null буцаана — ашиглахаасаа өмнө шалгах нь зөв заншил:

javascript

const элемент = document.getElementById("байхгүй-id");

if (элемент) {
  console.log("Олдлоо!");
} else {
  console.log("Элемент байхгүй байна.");
}

querySelector ба querySelectorAll

querySelector нь CSS selector ашиглан элемент олдог — хамгийн уян хатан арга. CSS мэддэг бол шууд ашиглаж болно:

javascript

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

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

// Тэгийн нэрээр
const эхний параграф = document.querySelector("p");

// Nested selector
const гол товч = document.querySelector(".navbar .товч");

querySelector нь зөвхөн эхний тохирох элементийг буцаана. Бүгдийг авахын тулд querySelectorAll хэрэглэнэ:

javascript

const бүх карт = document.querySelectorAll(".карт");

console.log(бүх карт.length); // Хэдэн ширхэг байна

бүх карт.forEach((карт) => {
  console.log(карт.textContent);
});

querySelectorAll нь NodeList буцаана — массив биш ч forEach ажиллана.

getElementsByClassName ба getElementsByTagName

Эдгээр нь хуучин арга боловч хааяа хэрэглэгддэг тул мэдэж байх хэрэгтэй:

javascript

// Class-аар бүгдийг авах
const картууд = document.getElementsByClassName("карт");

// Тэгийн нэрээр бүгдийг авах
const бүх товч = document.getElementsByTagName("button");

console.log(картууд.length);
console.log(бүх товч.length);

Эдгээр нь HTMLCollection буцаадаг — querySelectorAll-ийн NodeList-тэй төстэй ч forEach шууд ажиллахгүй тул Array.from() хэрэглэх шаардлагатай.

Элементийн хүүхэд, эцэг, ах дүүд

Олсон элементийнхээ ойр орчны элементүүдэд хандаж болно:

javascript

const жагсаалт = document.querySelector("#жагсаалт");

// Хүүхэд элементүүд
console.log(жагсаалт.children); // HTMLCollection
console.log(жагсаалт.firstElementChild); // Эхний хүүхэд
console.log(жагсаалт.lastElementChild); // Сүүлийн хүүхэд

// Эцэг элемент
const эцэг = жагсаалт.parentElement;

// Ах дүү элементүүд
const дараагийн = жагсаалт.nextElementSibling;
const өмнөх = жагсаалт.previousElementSibling;

Аль аргыг хэзээ хэрэглэх вэ?

Дөрвөн аргыг харьцуулвал:

javascript

// ID мэдэж байгаа → getElementById (хамгийн хурдан)
const товч = document.getElementById("илгээх-товч");

// CSS selector хэрэгтэй, нэг элемент → querySelector
const идэвхтэй = document.querySelector(".навигаци .идэвхтэй");

// CSS selector, олон элемент → querySelectorAll + forEach
document.querySelectorAll(".карт").forEach((карт) => {
  карт.style.opacity = "1";
});

// Хуучин кодтой ажиллах → getElementsByClassName / getElementsByTagName

Орчин үеийн кодод querySelector болон querySelectorAll хосолсноор ихэнх хэрэгцээг хангана.

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

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

← Өмнөх хичээлDOM гэж юу вэ?Дараах хичээл →Элемент өөрчлөх