انتخاب همه عنصرهای (Element) دارای یک کلاس (Class) خاص، با عبارت مشابه
document.querySelectorAll(".kelidestan")
، با روش querySelectorAll ، در JavaScript
برای انتخاب همه عنصرهایی از صفحه که دارای کلاسی (Class) با نام kelidestan می باشند، روش querySelectorAll را به صورت زیر به کار می بریم :
xxxxxxxxxx
document.querySelectorAll(".kelidestan")
به عنوان مثال، برای تغییر رنگ پس زمینه تک تک عنصرهای انتخابی، می توانیم کد JavaScript زیر را اجرا کنیم :
xxxxxxxxxx
const elements = document.querySelectorAll(".kelidestan");
elements.forEach(element => {
element.style.backgroundColor = "yellow";
});
به مثال زیر توجه کنید :
در صفحه HTML ، سه پاراگراف (تگ p) می نویسیم که دو تا از آنها دارای کلاس با نام kelidestan می باشند. سپس توسط روش querySelectorAll تعیین می کنیم که عنصرهای دارای نام کلاس kelidestan ، رنگ پس زمینه آنها به رنگ زرد (Yellow) تغییر کند :
xxxxxxxxxx
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<p class="kelidestan">
This is a paragraph 1
</p>
<p>
This is a paragraph 2
</p>
<p class="kelidestan">
This is a paragraph 3
</p>
<script>
const elements = document.querySelectorAll(".kelidestan");
elements.forEach(element => {
element.style.backgroundColor = "yellow";
});
</script>
</body>
</html>
نتیجه :
نظرات 0 0 0