getElementById

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

הפונקציה getElementById() מאחזרת את האלמנט הראשון עם מאפיין id תואם, לדוגמה:

const element = document.getElementById("elementId");

הקוד שלמעלה מאחזר את האלמנט עם מזהה elementId ושומר אותו במשתנה בשם element.

שימו לב לקידומת document, זהו ה-DOM של קובץ ה-HTML.

אחרי שאחזרתם אלמנט, תוכלו לתפעל אותו באמצעות JavaScript!

המאפיין הראשון שנלמד הוא textContent, שמכיל את תוכן הטקסט של האלמנט. אפשר לשנות את הטקסט כך:

const element = document.getElementById("elementId");
element.textContent = "some text";

אחרי הקוד הזה, הטקסט של #elementId יהיה some text

אתגר

קל

ניתן לך קוד HTML שמכיל כותרת עם מזהה.

השתמשו ב-JavaScript בלבד כדי לשנות את הטקסט של הרכיב הזה ל-“Hello!”:

נסו בעצמכם

<!DOCTYPE html>
<html>
    <body>
        <h1 id="heading">Welcome!</h1>
        <script src="script.js"></script>
    </body>
</html>

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

1מבוא

2שיטות DOM I

3שיטות DOM II

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