querySelectorAll

שיעור 9 מתוך 13 בקורס שיטות DOM ב-JavaScript של 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>

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

1מבוא

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

2שיטות DOM I

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

3שיטות DOM II

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

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