querySelectorAll

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

تُرجع الدالة querySelectorAll() مجموعة من جميع العناصر التي تطابق محددًا شبيهًا بـ CSS، بشكل مشابه لـ querySelector ولكنها تتيح لك جلب جميع العناصر المطابقة في وقت واحد.

const elements = document.querySelectorAll(".other");

يقوم الكود أعلاه باسترداد جميع العناصر التي تحمل اسم الفئة other.

التحدي

سهل

لقد تم تزويدك بكود HTML يحتوي على عنصرين من نوع span.

باستخدام JavaScript فقط، قم بتغيير تنسيق جميع العناصر، باستخدام دالة querySelectorAll:

backgroundColor إلى "pink"
border إلى "1px solid red"

جرّب بنفسك

<!DOCTYPE html>
<html>
    <body>
        <span class="error">Error 1</span>
        <span class="error">Error 2</span>
        <script src="script.js"></script>
    </body>
</html>

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

1مقدمة

مقدمة Document Object Model

2طرق DOM (١)

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

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

querySelectorAlladdEventListener innerHTML createElement و appendChild تبديل classList