JavaScript-da DOM elementlarini tanlash
JavaScript-da DOM elementlarini tanlash
JavaScript koʻpincha sahifadagi HTML elementlarining mazmuni yoki qiymatini olish yoki oʻzgartirish, shuningdek, koʻrsatish, yashirish, animatsiya va h.k. kabi baʼzi effektlarni qoʻllash uchun ishlatiladi. Lekin har qanday amalni bajarishdan oldin uni topish yoki tanlash kerak. maqsadli HTML elementi.
Keyingi bo'limlarda siz sahifadagi elementlarni tanlashning ba'zi umumiy usullarini ko'rasiz va ular bilan JavaScript-dan foydalanib biror narsa qilishingiz mumkin.
Eng yuqori elementlarni tanlash
HTML hujjatidagi eng yuqori elementlar to'g'ridan-to'g'ri documentxususiyatlar sifatida mavjud. Masalan, <html>elementga document.documentElementxususiyat bilan kirish mumkin, holbuki <head>elementga document.headxususiyat bilan kirish mumkin va <body>elementga xususiyat bilan kirish mumkin document.body. Mana bir misol:
Misol
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Select Topmost Elements</title>
</head>
<body>
<script>
// Display lang attribute value of html element
alert(document.documentElement.getAttribute("lang")); // Outputs: en
// Set background color of body element
document.body.style.background = "yellow";
// Display tag name of the head element's first child
alert(document.head.firstElementChild.nodeName); // Outputs: meta
</script>
</body>
</html>Lekin, ehtiyot bo'ling. Agar tegdan document.bodyoldin ishlatilsa (masalan, ichida), u tana elementi o'rniga qaytadi . Skript bajariladigan nuqta, teg brauzer tomonidan tahlil qilinmaganligi sababli , o'sha paytda ham shunday bo'ladi.<body><head>null<body>document.bodynull
Buni yaxshiroq tushunish uchun quyidagi misolni ko'rib chiqamiz:
Misol
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Document.body Demo</title>
<script>
alert("From HEAD: " + document.body); // Outputs: null (since <body> is not parsed yet)
</script>
</head>
<body>
<script>
alert("From BODY: " + document.body); // Outputs: HTMLBodyElement
</script>
</body>
</html>Elementlarni ID bo'yicha tanlash
getElementById()Usul yordamida uning noyob identifikatori asosida elementni tanlashingiz mumkin . Bu DOM daraxtida HTML elementini topishning eng oson yo'li.
Quyidagi misol ID atributiga ega elementni tanlaydi va ta'kidlaydi id="mark".
Misol
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Select Element by ID</title>
</head>
<body>
<p id="mark">This is a paragraph of text.</p>
<p>This is another paragraph of text.</p>
<script>
// Selecting element with id mark
var match = document.getElementById("mark");
// Highlighting element's background
match.style.background = "yellow";
</script>
</body>
</html>Agar mos element topilgan bo'lsa yoki hujjatda mos keladigan element getElementById()topilmasa, usul elementni ob'ekt sifatida qaytaradi .null
Eslatma: Har qanday HTML elementi atributga ega bo'lishi mumkin id. Ushbu atributning qiymati sahifada yagona bo'lishi kerak, ya'ni bitta sahifadagi ikkita element bir xil identifikatorga ega bo'lishi mumkin emas.
Elementlarni sinf nomi bo'yicha tanlash
Xuddi shunday, siz getElementsByClassName()maxsus sinf nomlariga ega bo'lgan barcha elementlarni tanlash uchun usuldan foydalanishingiz mumkin. Ushbu usul barcha berilgan sinf nomlariga ega bo'lgan barcha asosiy elementlarning massivga o'xshash ob'ektini qaytaradi. Keling, quyidagi misolni ko'rib chiqaylik:
Misol
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Select Elements by Class Name</title>
</head>
<body>
<p class="test">This is a paragraph of text.</p>
<div class="block test">This is another paragraph of text.</div>
<p>This is one more paragraph of text.</p>
<script>
// Selecting elements with class test
var matches = document.getElementsByClassName("test");
// Displaying the selected elements count
document.write("Number of selected elements: " + matches.length);
// Applying bold style to first element in selection
matches[0].style.fontWeight = "bold";
// Applying italic style to last element in selection
matches[matches.length - 1].style.fontStyle = "italic";
// Highlighting each element's background through loop
for(var elem in matches) {
matches[elem].style.background = "yellow";
}
</script>
</body>
</html>Teg nomi bo'yicha elementlarni tanlash
getElementsByTagName()Usul yordamida HTML elementlarini teg nomi bo'yicha ham tanlashingiz mumkin . Ushbu usul, shuningdek, berilgan teg nomiga ega bo'lgan barcha asosiy elementlarning massivga o'xshash ob'ektini qaytaradi.
Misol
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Select Elements by Tag Name</title>
</head>
<body>
<p>This is a paragraph of text.</p>
<div class="test">This is another paragraph of text.</div>
<p>This is one more paragraph of text.</p>
<script>
// Selecting all paragraph elements
var matches = document.getElementsByTagName("p");
// Printing the number of selected paragraphs
document.write("Number of selected elements: " + matches.length);
// Highlighting each paragraph's background through loop
for(var elem in matches) {
matches[elem].style.background = "yellow";
}
</script>
</body>
</html>CSS selektorlari yordamida elementlarni tanlash
Belgilangan CSS selektorigaquerySelectorAll() mos keladigan elementlarni tanlash uchun usuldan foydalanishingiz mumkin . CSS selektorlari hujjatdagi HTML elementlarini tanlashning juda kuchli va samarali usulini taqdim etadi. Iltimos, ular haqida ko'proq ma'lumot olish uchun CSS o'quv bo'limiga qarang.
Ushbu usul ko'rsatilgan selektorlarga mos keladigan barcha elementlarning ro'yxatini qaytaradi. Quyidagi misolda ko'rsatilganidek, uni har qanday massiv kabi tekshirishingiz mumkin:
Misol
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Select Elements with CSS Selectors</title>
</head>
<body>
<ul>
<li>Bread</li>
<li class="tick">Coffee</li>
<li>Pineapple Cake</li>
</ul>
<script>
// Selecting all li elements
var matches = document.querySelectorAll("ul li");
// Printing the number of selected li elements
document.write("Number of selected elements: " + matches.length + "<hr>")
// Printing the content of selected li elements
for(var elem of matches) {
document.write(elem.innerHTML + "<br>");
}
// Applying line through style to first li element with class tick
matches = document.querySelectorAll("ul li.tick");
matches[0].style.textDecoration = "line-through";
</script>
</body>
</html>Eslatma: Usul , , va hokazo kabi CSS psevdo-sinflariniquerySelectorAll() ham qo'llab -quvvatlaydi . Lekin, , , va hokazo kabi CSS psevdo - elementlari uchun bu usul har doim bo'sh ro'yxatni qaytaradi.:first-child:last-child:hover::before::after::first-line