getElementById

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

تقوم الدالة getElementById() بجلب أول عنصر يحتوي على سمة id مطابقة، على سبيل المثال:

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

يقوم الكود أعلاه بجلب العنصر الذي يمتلك id بقيمة elementId ويحفظه في متغير يسمى element.

لاحظ البادئة document، وهذا هو DOM الخاص بملف HTML.

بعد جلب العنصر، يمكنك التلاعب به باستخدام JavaScript!

أول خاصية سنتعلمها هي textContent والتي تحمل المحتوى النصي للعنصر. يمكنك تعديل النص بهذا الشكل:

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

بعد هذا الكود، سيكون نص #elementId هو some text

التحدي

سهل

لقد تم تزويدك بكود HTML يحتوي على عنوان (heading) بمعرف (ID).

باستخدام JavaScript فقط، قم بتغيير نص هذا العنصر إلى “Hello!”:

جرّب بنفسك

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

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

1مقدمة

2طرق DOM (١)

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