querySelector

שיעור 8 מתוך 13 בקורס שיטות DOM ב-JavaScript של Coddy.

הפונקציה querySelector() בוחרת את האלמנט הראשון שתואם לבורר דמוי CSS רב־עוצמה, ומספקת גמישות רבה יותר מהשיטות הקודמות לבחירת אלמנטים מורכבת. לדוגמה:

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

כך ניגשים לאלמנט button בעל המזהה btn.

אתגר

קל

ניתן לך קוד HTML שמכיל כפתור.

באמצעות JavaScript בלבד,

אחזר את הרכיב באמצעות הפונקציה querySelector.
שנה את backgroundColor לאדום באמצעות המאפיין style.
שנה את color ללבן באמצעות המאפיין style.

נסו בעצמכם

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

כל השיעורים ביחידה שיטות DOM ב-JavaScript

1מבוא

מבוא מודל אובייקט המסמך

2שיטות DOM I

getElementById שינוי סגנון של אלמנט getElementsByClassName מעבר בלולאה ושינוי אלמנטים getElementsByTagNamequerySelector

3שיטות DOM II

querySelectorAll addEventListener innerHTML createElement ו-appendChild החלפת מצב באמצעות classList

תרגלו בעצמכם: Web אונליין