Document Object Model – DOM

DOM أو Document Object Model هو نموذج هيكلي (شجري) يمثل صفحة الويب في المتصفح.

بمجرد تحميل الصفحة، يقوم المتصفح بترجمتها إلى شجرة من العناصر (Nodes) يمكن التعامل معها باستخدام JavaScript.

ما هو الـ DOM؟

DOM هو اختصار لـ Document Object Model
يمثل الصفحة كهيكل شجري بحيث يكون:

  • كل عنصر HTML (مثل <div>, <p>, <a>, إلخ) يمثل عنصرًا (Node)
  • يمكن الوصول لهذه العناصر والتعديل عليها باستخدام JavaScript

مثال: لو كانت لديك الصفحة التالية:

<html>
  <body>
    <h1>مرحبا</h1>
    <p>هذا نص</p>
  </body>
</html>
JavaScript

سيتم تحويلها إلى شجرة DOM مثل:

document
 └── html
      └── body
           ├── h1
           └── p
JavaScript
طرق تحديد أو اختيار العناصر (Select Elements) في DOM

يمكنك الوصول للعناصر باستخدام عدة طرق في JavaScript، مثل:

✅ 1. getElementById
  • يحدد عنصرًا واحدًا بناءً على خاصية id
  • يرجع عنصر واحد فقط أو null إذا لم يوجد
<h1 id="main-title">مرحبا</h1>
/////////////////////////
const heading = document.getElementById("main-title");
JavaScript
✅ 2. getElementsByClassName
  • يُرجع قائمة بالعناصر التي لها نفس الكلاس
  • النتيجة تكون من نوع HTMLCollection
<div class="item">عنصر 1</div>
<div class="item">عنصر 2</div>
//////////////////////////////////
const items = document.getElementsByClassName("item");
JavaScript
✅ 3. getElementsByTagName
  • يُرجع قائمة بكل العناصر ذات نفس الوسم (Tag).
const paragraphs = document.getElementsByTagName("p");
JavaScript
✅ 4. querySelector
  • يُرجع أول عنصر يطابق المحدد (Selector) مثل الـ CSS
  • يقبل أي محدد CSS: #id, .class, div p, input[type="text"] وغيرها
const firstParagraph = document.querySelector("p");
const mainTitle = document.querySelector("#main-title");
const activeItem = document.querySelector(".item.active");
JavaScript
✅ 5. querySelectorAll
  • يُرجع جميع العناصر التي تطابق المحدد
  • يُرجعها على شكل NodeList
const allItems = document.querySelectorAll(".item");
JavaScript
ملاحظات:
  • HTMLCollection و NodeList ليست Arrays، ولكن يمكن تحويلها بـ Array.from() أو استخدام forEach مباشرة مع NodeList
  • دائمًا يُفضّل استخدام querySelector و querySelectorAll لأنها مرنة جدًا وتدعم أي محدد CSS

بالإضافة للطرق الأساسية التي ذكرناها، هناك طرق أخرى للوصول للعناصر في DOM، لكنها أقل استخدامًا أو تستخدم في حالات خاصة. سأشرحها بالتفصيل:

🟦 1. الوصول للعناصر من خلال document.forms أو document.formName
✅ document.forms

ترجع جميع النماذج (forms) في الصفحة.

<form name="loginForm">
  <input type="text" name="username" />
</form>
///////////////////////////////////////
const myForm = document.forms[0]; // أول نموذج
const anotherForm = document.forms["loginForm"]; // باسم النموذج
JavaScript
🟦 2. form.elements للوصول إلى الحقول داخل النموذج
const usernameField = document.forms["loginForm"].elements["username"];
JavaScript
🟦 3. الوصول من خلال خصائص خاصة مثل:
✅ document.body

يرجع عنصر <body> مباشرة.

const body = document.body;
JavaScript
✅ document.head

يرجع عنصر <head> مباشرة.

✅ document.images

ترجع جميع الصور <img> في الصفحة.

const allImages = document.images;
JavaScript
✅ document.links

ترجع كل الروابط <a> التي تحتوي على href.

const allLinks = document.links;
JavaScript
✅ document.scripts

ترجع جميع عناصر <script>.

🟦 4. الوصول لعناصر فرعية باستخدام parent, children, firstChild , nextSibling…

بعد تحديد عنصر، يمكنك الوصول للعناصر المجاورة أو الفرعية:

خاصيةماذا تُرجع
element.childrenجميع الأبناء (بدون النصوص)
element.childNodesجميع الأبناء (بما فيهم النصوص)
element.firstElementChildأول عنصر ابن
element.lastElementChildآخر عنصر ابن
element.parentElementالعنصر الأب
element.nextElementSiblingالعنصر التالي
element.previousElementSiblingالعنصر السابق
const list = document.getElementById("myList");
const firstItem = list.firstElementChild;
const nextItem = firstItem.nextElementSibling;
JavaScript
🔸 خلاصة:
الطريقةوصف الاستخدام
getElementById()أفضل طريقة للحصول على عنصر بالـ ID
getElementsByClassName()للحصول على عناصر بكلاس مشترك
querySelector()أفضل طريقة مرنة باستخدام CSS
document.forms, document.images, document.linksللوصول المباشر لعناصر خاصة
element.children, nextElementSiblingللتنقل بين عناصر الشجرة
document.evaluate()لاستخدام XPath (نادر ومتقدم)