JavaScript • المستوى الثالث • الدرس 1
العودة لفهرس المستوىتحديد العناصر في الصفحة (DOM Selection)
أهداف الدرس العلمية
- فهم مفهوم شجرة مستند الويب (Document Object Model - DOM).
- تحديد العناصر باستخدام الـ ID عبر
document.getElementById(). - استخدام
document.querySelector()لتحديد العناصر بمحددات CSS. - معرفة كيفية جلب قائمة عناصر بـ
querySelectorAll().
1. ما هو نموذج كائن المستند (DOM)؟
عند تحميل متصفح الويب لصفحة HTML، يقوم بتحويل شفرة الصفحة إلى شجرة هيكلية من الكائنات تُسمى DOM. يتيح كائن document المتاح في جافاسكريبت إمكانية الوصول لأي عنصر وتعديله ديناميكياً.
2. أهم طرق تحديد العناصر
نحتاج أولاً للإمساك بالعنصر من الصفحة قبل تعديله أو التفاعل معه:
javascript
document.getElementById("btn")تحديد عنصر فريد واحد بناءً على قيمة الخاصية id.
javascript
document.querySelector(".title")طريقة مرنة وعصرية لتحديد أول عنصر يطابق محددات CSS (Class, ID, or Tag).
مثال تحديد وطباعة العنصر:
javascript
let myHeader = document.querySelector("#header");
console.log(myHeader); التطبيق العملي المباشر
تحدي الدرس الأول: تحديد عنصر العنوان وطباعته
قم بكتابة كود JavaScript داخل وسم <script> لتنفيذ الخطوات التالية:
- تحديد العنصر الذي يحمل الـ ID المسمى
main-titleوخزنه في متغير باسمheading. - طباعة المتغير
headingفي الكونسول باستعمالconsole.log(heading);.
محرر الأكواد — HTML
14px
جارٍ تهيئة البيئة...
المخرجات — المخرجات
الكونسول (Console)
13px
nahda@runner — html
0 lines
(لا يوجد إخراج)
HTMLLn 23, Col 1UTF-8Spaces: 2
598 chars