ما هو DOM؟ شرح Document Object Model في JavaScript للمبتدئين

5 min read Aldawsari
دقائق القراءة: 5

ما هو DOM في JavaScript؟

إذا كنت قد بدأت للتو في تعلم JavaScript، فغالباً صادفت مصطلح DOM. هذا المصطلح يشير إلى Document Object Model، وهو واجهة برمجية تُمكّنك من التعامل مع عناصر صفحة الويب برمجياً، سواء عبر إنشائها أو تعديلها أو حذفها، بالإضافة إلى ربطها بالأحداث لجعل الصفحة أكثر تفاعلاً.

بمعنى عملي، يسمح لك DOM بأن تجعل JavaScript تتفاعل مباشرة مع مستند HTML، فتقرأ محتواه وتغير بنيته وتحدّث مظهره وسلوكه حسب الحاجة.

واجهة توضيحية لمفهوم DOM في JavaScript وعلاقته ببنية صفحات الويب

كيف ينظر DOM إلى مستند HTML؟

يتعامل DOM مع مستند HTML على أنه شجرة من العقد Nodes. كل عنصر داخل الصفحة يُمثّل عقدة، مثل <html> و<head> و<body> والعناوين والفقرات والقوائم.

هذا التصور الشجري يساعد المطور على فهم العلاقات بين العناصر، مثل العنصر الأب parent والعناصر الأبناء children والعناصر المتجاورة siblings.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>DOM tree structure</title>
  </head>
  <body>
    <h1>DOM tree structure</h1>
    <h2>Learn about the DOM</h2>
  </body>
</html>

في هذا المثال، يُعد المستند الجذر الأساسي، ويحتوي على عنصر <html>، والذي يتفرع بدوره إلى عنصرين رئيسيين هما <head> و<body>. بعد ذلك، يمتلك كل عنصر منهما أبناءً خاصين به.

رسم يوضح البنية الشجرية لعناصر HTML داخل DOM

لماذا يُعد DOM مهماً في تطوير الواجهات؟

  • يمنح JavaScript القدرة على الوصول إلى عناصر الصفحة والتحكم بها.
  • يساعد في بناء واجهات تفاعلية وديناميكية.
  • يُستخدم في تنفيذ عمليات مثل إظهار الرسائل، تحديث النصوص، إنشاء القوائم، وتغيير الأنماط.
  • يُعد أساسياً في معظم تطبيقات الويب الحديثة حتى عند استخدام أطر مثل React أو Vue أو Angular.

كيفية تحديد عناصر الصفحة باستخدام DOM

هناك عدة طرق للوصول إلى عناصر HTML عبر JavaScript، لكن من أكثرها استخداماً:

  • getElementById()
  • querySelector()
  • querySelectorAll()

استخدام getElementById()

يُستخدم id في HTML كمعرّف فريد للعنصر، لذلك لا ينبغي تكرار القيمة نفسها لأكثر من عنصر داخل الصفحة.

هذا مثال غير صحيح:

<p id="para">This is my first paragraph.</p>
<p id="para">This is my second paragraph.</p>

والشكل الصحيح يكون باستخدام معرفات مختلفة:

<p id="para1">This is my first paragraph.</p>
<p id="para2">This is my second paragraph.</p>

في JavaScript يمكن الوصول إلى العنصر عبر id كما يلي:

document.getElementById("id name goes here")

مثال عملي:

const paragraph1 = document.getElementById("para1");
console.log(paragraph1);

نتيجة استخدام getElementById في JavaScript للوصول إلى عنصر HTML

أما إذا كنت تريد قراءة النص الموجود داخل العنصر فقط، فيمكنك استخدام الخاصية textContent:

const paragraph1 = document.getElementById("para1");
console.log(paragraph1.textContent);

قراءة محتوى النص داخل عنصر HTML باستخدام textContent في JavaScript

استخدام querySelector()

تُعد querySelector() من أكثر الدوال مرونة، لأنها تعتمد على محددات CSS للوصول إلى العنصر المطلوب.

<h1>Favorite TV shows</h1>
<ul class="list">
  <li>Golden Girls</li>
  <li>Archer</li>
  <li>Rick and Morty</li>
  <li>The Crown</li>
</ul>

للوصول إلى عنصر h1:

const h1Element = document.querySelector("h1");
console.log(h1Element);

مثال على تحديد عنصر h1 باستخدام querySelector في JavaScript

وللوصول إلى القائمة التي تحمل class="list" نستخدم المحدد .list:

const list = document.querySelector(".list");
console.log(list);

الوصول إلى عنصر يحمل class باستخدام querySelector في DOM

تذكّر أن:

  • النقطة . تُستخدم مع class.
  • الرمز # يُستخدم مع id.
  • يمكن استخدام أسماء الوسوم مباشرة مثل h1 أو p.

استخدام querySelectorAll()

تُستخدم querySelectorAll() عندما تحتاج إلى الوصول إلى جميع العناصر المطابقة لمحدد CSS معيّن، وتُرجع قائمة من العقد NodeList.

للوصول إلى جميع عناصر li داخل ul:

const listItems = document.querySelectorAll("ul > li");
console.log(listItems);

استخدام querySelectorAll لإرجاع جميع عناصر القائمة في JavaScript

وإذا أردت طباعة كل عنصر على حدة، يمكنك استخدام forEach():

const listItems = document.querySelectorAll("ul > li");

listItems.forEach((item) => {
  console.log(item);
});

التكرار على عناصر NodeList باستخدام forEach في DOM

كيفية إنشاء عناصر جديدة داخل DOM

من أهم مزايا DOM أنه لا يقتصر على قراءة العناصر الحالية فقط، بل يتيح لك إنشاء عناصر جديدة وإضافتها إلى الصفحة أثناء التشغيل باستخدام document.createElement().

لنفترض أن الصفحة تحتوي فقط على العنوان التالي:

<h1>Reasons why I love freeCodeCamp:</h1>

إذا أردت إضافة قائمة أسفل العنوان عبر JavaScript، فيمكنك البدء بإنشاء عنصر ul:

let unorderedList = document.createElement("ul");

بعد ذلك تضيفه إلى الصفحة باستخدام appendChild():

document.body.appendChild(unorderedList);

ثم تُنشئ عناصر li:

let listItem1 = document.createElement("li");
let listItem2 = document.createElement("li");

وتضيف النصوص إليها عبر textContent:

let listItem1 = document.createElement("li");
listItem1.textContent = "It's free";

let listItem2 = document.createElement("li");
listItem2.textContent = "It's awesome";

وأخيراً تُلحق العناصر بالقائمة:

let listItem1 = document.createElement("li");
listItem1.textContent = "It's free";
unorderedList.appendChild(listItem1);

let listItem2 = document.createElement("li");
listItem2.textContent = "It's awesome";
unorderedList.appendChild(listItem2);

الكود كاملاً:

let unorderedList = document.createElement("ul");
document.body.appendChild(unorderedList);

let listItem1 = document.createElement("li");
listItem1.textContent = "It's free";
unorderedList.appendChild(listItem1);

let listItem2 = document.createElement("li");
listItem2.textContent = "It's awesome";
unorderedList.appendChild(listItem2);

نتيجة إنشاء قائمة جديدة ديناميكياً باستخدام document.createElement في JavaScript

تعديل تنسيقات CSS مباشرة عبر الخاصية style

يوفر DOM إمكانية تعديل الأنماط المضمنة inline styles مباشرة باستخدام الخاصية style. هذا مفيد عندما تحتاج إلى تحديث مظهر عنصر استجابةً لتفاعل المستخدم أو لحالة معينة داخل التطبيق.

لدينا هذا المثال في HTML:

<h1>I was changed to blue using JavaScript</h1>

أولاً نحدد العنصر:

const h1 = document.querySelector("h1");

ثم نغيّر لون النص:

const h1 = document.querySelector("h1");
h1.style.color = "blue";

تغيير لون عنصر h1 إلى الأزرق باستخدام style property في JavaScript

ويمكنك بالطريقة نفسها تغيير خصائص أخرى مثل:

  • backgroundColor
  • borderStyle
  • fontSize
  • margin
  • padding

لكن من الأفضل في المشاريع الكبيرة الاعتماد على إضافة وإزالة class بدلاً من الإكثار من الأنماط المضمنة، لأن ذلك أكثر تنظيماً وأسهل في الصيانة.

التعامل مع الأحداث باستخدام addEventListener()

من أهم جوانب DOM في JavaScript القدرة على الاستماع إلى تفاعلات المستخدم، مثل النقر على زر أو الكتابة داخل حقل أو تحريك الفأرة. وهنا تأتي دالة addEventListener().

في المثال التالي يوجد زر يحمل المعرّف btn:

<button id="btn">Show alert</button>

نقوم أولاً بالوصول إلى الزر:

const button = document.getElementById("btn");

ثم نربطه بحدث click:

button.addEventListener("click", () => {
  alert("Thank you for clicking me");
});

عند نقر المستخدم على الزر، سيتم تنفيذ الدالة وعرض رسالة تنبيه. هذا المفهوم هو أساس التفاعل داخل صفحات الويب الحديثة، سواء في النماذج أو الأزرار أو القوائم أو النوافذ المنبثقة.

متى تستخدم DOM في المشاريع العملية؟

فهم DOM ليس مجرد خطوة تعليمية للمبتدئين، بل هو مهارة أساسية في تطوير الويب. ستستخدمه في مواقف كثيرة، مثل:

  • بناء قوائم ومكونات ديناميكية.
  • تحديث المحتوى دون إعادة تحميل الصفحة بالكامل.
  • التحقق من المدخلات في النماذج.
  • إنشاء تأثيرات تفاعلية عند النقر أو التمرير.
  • إظهار البيانات القادمة من API داخل الواجهة.

حتى عند استخدام مكتبات وأطر حديثة، فإن فهم DOM يسهّل عليك استيعاب كيفية تحديث الواجهة خلف الكواليس.

أفضل الممارسات عند التعامل مع DOM

الممارسة الفائدة
استخدام محددات دقيقة تقليل الأخطاء وتحسين وضوح الكود
تجنب التعديلات المتكررة غير الضرورية تحسين الأداء خاصة في الصفحات التفاعلية
استخدام textContent عند إدخال النصوص أكثر أماناً وبساطة من إدخال HTML مباشر
الاعتماد على class للتنسيق الحفاظ على فصل واضح بين JavaScript وCSS
تنظيم مستمعي الأحداث بعناية منع التعارضات وتحسين قابلية الصيانة

خاتمة

يشير DOM إلى Document Object Model، وهو الجسر الذي يربط بين JavaScript وبنية صفحة الويب. من خلاله يمكنك تحديد العناصر، قراءة محتواها، تعديل خصائصها، إنشاء عناصر جديدة، وتفعيل التفاعل مع المستخدم عبر الأحداث.

إذا أتقنت أساسيات مثل getElementById() وquerySelector() وquerySelectorAll() وcreateElement() وaddEventListener()، فستكون قد وضعت أساساً قوياً لأي مشروع واجهات أمامية باستخدام JavaScript.

الخلاصة التقنية

من الناحية التقنية، يُعد DOM نقطة الانطلاق الحقيقية لفهم كيفية عمل صفحات الويب التفاعلية. وكلما فهمت بنيته الشجرية وآليات التحديد والتعديل والاستماع إلى الأحداث، أصبح من الأسهل عليك كتابة كود JavaScript أكثر كفاءة وتنظيماً. إتقان DOM لا يخدم المبتدئين فقط، بل يبقى مهارة جوهرية حتى مع استخدام الأطر الحديثة، لأنه يرسّخ فهمك لآلية تحديث الواجهة على مستوى المتصفح.

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *