getElementsByClassName

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

הפונקציה getElementsByClassName() מחזירה מערך של כל הרכיבים בעלי מאפיין class תואם, שימושי לבחירת כמה רכיבים שחולקים את אותו סגנון או אופן פעולה. לדוגמה:

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>

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

1מבוא

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

2שיטות DOM I

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

3שיטות DOM II

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

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