querySelector

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

تقوم الدالة querySelector() بتحديد العنصر الأول الذي يطابق محددًا قويًا شبيهًا بـ CSS، مما يوفر مرونة أكبر من الطرق السابقة لاختيار العناصر المعقدة. مثال:

const button = document.querySelector("#btn");

هذه هي الطريقة التي نصل بها إلى عنصر button الذي يمتلك المعرف btn.

التحدي

سهل

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

باستخدام JavaScript فقط،

قم باسترجاع العنصر باستخدام دالة querySelector.
قم بتغيير backgroundColor إلى red باستخدام خاصية style.
قم بتغيير color إلى white باستخدام خاصية style.

جرّب بنفسك

<!DOCTYPE html>
<html>
    <body>
        <button id="myButton">Click Me</button>
        <script src="script.js"></script>
    </body>
</html>

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

1مقدمة

مقدمة Document Object Model

2طرق DOM (١)

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

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

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