getElementsByClassName

الدرس 5 من 13 في دورة دوال JavaScript DOM على Coddy.

تعيد الدالة getElementsByClassName() مصفوفة من جميع العناصر التي لها سمة فئة (class attribute) مطابقة، وهي مفيدة لتحديد عناصر متعددة تشترك في نفس التنسيق أو السلوك. على سبيل المثال:

const elements = document.getElementsByClassName("className");

يقوم الكود أعلاه باسترداد العناصر التي تحمل الفئة className ويحفظها في متغير يسمى elements.

يتعين علينا التكرار عبر هذا المتغير لتغيير خصائص جميع العناصر المتشابهة، على سبيل المثال:

for (const element of elements) {
	className.style.color = "blue";
	className.style.fontWeight = "bolder";
}

التحدي

سهل

لقد تم تزويدك بكود HTML يحتوي على فقرات تحمل اسم الفئة highlight.

باستخدام JavaScript فقط، قم بتغيير لون وسمك خط النص:

قم باسترجاع العناصر باستخدام دالة getElementsByClassName().
قم بالتكرار عبر متغير العناصر المسترجع هذا باستخدام حلقة for.
قم بتعديل الـ color إلى “orange” والـ fontWeight إلى “bold” باستخدام خاصية style، لكل عنصر في المصفوفة.

ستحتاج إلى تحديث صفحة الويب لرؤية التغييرات:

جرّب بنفسك

<!DOCTYPE html>
<html>
    <body>
        <p class="highlight">Text 1</p>
        <p class="highlight">Text 2</p>
        <script src="script.js"></script>
    </body>
</html>

جميع دروس دوال JavaScript DOM

1مقدمة

مقدمة Document Object Model

2طرق DOM (١)

getElementById تعديل نمط العنصرgetElementsByClassNameالتكرار والمعالجة getElementsByTagName querySelector

3طرق DOM الجزء الثاني

querySelectorAll addEventListener innerHTML createElement و appendChild تبديل classList