DOM elementlarini topish

HTML elementlarini topish

Ko‘pincha, JavaScript yordamida siz HTML elementlarini manipulyatsiya qilishni xohlaysiz.

Buning uchun avval elementlarni topishingiz kerak. Buning bir necha yo‘li mavjud:

HTML elementlarini id bo‘yicha topish
HTML elementlarini teg nomi bo‘yicha topish
HTML elementlarini klass nomi bo‘yicha topish
HTML elementlarini CSS selektorlari bo‘yicha topish
HTML elementlarini HTML obyekt to‘plamlari orqali topish

HTML elementini id bo‘yicha topish

DOM-da HTML elementini topishning eng oson yo‘li element identifikatoridan foydalanishdir.

Ushbu misol id="intro" elementini topadi:

Misol

const element = document.getElementById("intro");

O‘zingiz sinab ko‘ring »

Agar element topilsa, metod elementni obyekt sifatida qaytaradi (element o‘zgaruvchisida).

Agar element topilmasa, element nullni o‘z ichiga oladi.

HTML elementlarini teg nomi bo‘yicha topish

Bu misol barcha <p> elementlarni topadi:

Misol

const element = document.getElementsByTagName("p");

O‘zingiz sinab ko‘ring »

Bu misol id="main" elementni topadi va keyin barcha <p> elementlarni topadi ichida "main":

Misol

const x = document.getElementById("main");
const y = x.getElementsByTagName("p");

O‘zingiz sinab ko‘ring »

HTML elementlarini klass nomi bo‘yicha topish

Agar siz bir xil sinf nomiga ega barcha HTML elementlarini topmoqchi bo‘lsangiz, getElementsByClassName() dan foydalaning.

Bu misol class="intro" bilan barcha

elementlar ro‘yxatini qaytaradi.

Misol

const x = document.getElementsByClassName("intro");

O‘zingiz sinab ko‘ring »

HTML elementlarini CSS selektorlari bo‘yicha topish

querySelector() usuli

Misol

<html>
<body>

<p class="demo"></p>

<script>
// Access a paragraph Element
const myPara = document.querySelector(".demo");

// Change the content of the Element
myPara.innerHTML = "Hello World!";
</script>

</body>
</html>

O‘zingiz sinab ko‘ring »

querySelectorAll() metodi

Misol

<html>
<body>

<p class="demo">One</p>
<p class="demo">Two</p>

<script>
// Access a paragraph Element
const myItems = document.querySelectorAll(".demo");

// Change the content of the Element
myItems[0].innerHTML = "First";
</script>

</body>
</html>

O‘zingiz sinab ko‘ring »

Umumiy xatolar

getElementById()’da `#` belgisidan foydalanish:
Noto‘g‘ri: "#demo"
QuerySelector() funksiyasini unutish faqat birinchi moslikni qaytaradi

Belgilangan CSS selektoriga mos keladigan barcha HTML elementlarini (id, sinf nomlari, turlari, atributlari, atributlar qiymatlari va boshqalar) topmoqchi bo‘lsangiz, querySelectorAll() usulidan foydalaning.

Bu misol class="intro" bo‘lgan barcha <p> elementlar ro‘yxatini qaytaradi.

Misol

const x = document.querySelectorAll("p.intro");

O‘zingiz sinab ko‘ring »

HTML elementlarini HTML obyekt to‘plamlari orqali topish

Ushbu misol forms to‘plamidan id="frm1" bo‘lgan form elementini topadi va barcha elementlarning qiymatlarini ko‘rsatadi:

Misol

const x = document.forms["frm1"];
let text = "";
for (let i = 0; i < x.length; i++) {
text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;

O‘zingiz sinab ko‘ring »

Quyidagi HTML obyektlari (va obyektlar to‘plami) ham mavjud:

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish