الـ DOM (Document Object Model) JavaScript

بواسطة /

الدرس التاسع: الـ DOM (Document Object Model)

مقدمة عن الـ DOM

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

عند تحميل صفحة الويب في المتصفح، يتم تحويل الشيفرة المصدرية لـ HTML إلى هيكل شجري من العناصر التي يمكن التفاعل معها باستخدام JavaScript. كل عنصر في الصفحة يُمثل ككائن في شجرة الـ DOM، وبالتالي يمكننا إضافة، تعديل، أو حذف العناصر باستخدام جافا سكربت.

الوصول إلى العناصر باستخدام JavaScript

1. getElementById

تُعد getElementById واحدة من أشهر الطرق للوصول إلى عنصر محدد في الـ DOM باستخدام معرف (ID). عند استخدام هذه الدالة، نحتاج إلى تحديد الـ ID الخاص بالعنصر الذي نريد الوصول إليه.

المثال:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM Example</title>
</head>
<body>
  <div id="myElement">Hello, World!</div>
  <script>
    const element = document.getElementById('myElement');
    console.log(element); // <div id="myElement">Hello, World!</div>
  </script>
</body>
</html>

في هذا المثال، نحن نصل إلى العنصر الذي يحتوي على الـ ID “myElement”.

2. querySelector

تعتبر querySelector أكثر مرونة، حيث يمكنها الوصول إلى أي عنصر باستخدام CSS selectors مثل الكلاسات (class) أو الأوسمة (tags) أو حتى المجموعات المعقدة من selectors.

المثال:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM Example</title>
</head>
<body>
  <div class="container">
    <p class="greeting">Hello, JavaScript!</p>
  </div>
  <script>
    const paragraph = document.querySelector('.greeting');
    console.log(paragraph.textContent); // Hello, JavaScript!
  </script>
</body>
</html>

هنا، نستخدم querySelector لاختيار أول عنصر يحتوي على الكلاس “greeting” ونقوم بعرض محتواه.

3. querySelectorAll

إذا كنت بحاجة للوصول إلى جميع العناصر التي تطابق selector معين، يمكنك استخدام querySelectorAll. ستُعيد هذه الدالة قائمة من العناصر المطابقة، والتي يمكن التفاعل معها باستخدام حلقة.

المثال:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM Example</title>
</head>
<body>
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <script>
    const boxes = document.querySelectorAll('.box');
    boxes.forEach(box => {
      console.log(box.textContent); 
    });
  </script>
</body>
</html>

في هذا المثال، نقوم بالوصول إلى جميع العناصر التي تحمل الكلاس “box” وطباعتها باستخدام forEach.

تعديل محتوى الصفحات باستخدام JavaScript

1. innerHTML

تُستخدم خاصية innerHTML لقراءة أو تعديل محتوى العناصر داخل الـ DOM. عند استخدام innerHTML، يمكننا تعيين HTML داخل عنصر أو الحصول على الـ HTML الخاص به.

المثال:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM Example</title>
</head>
<body>
  <div id="content">Welcome to JavaScript!</div>
  <script>
    const contentDiv = document.getElementById('content');
    contentDiv.innerHTML = 'Hello, World!'; // تعديل محتوى العنصر
  </script>
</body>
</html>

في هذا المثال، قمنا بتعديل محتوى العنصر الذي يحمل الـ ID “content” إلى “Hello, World!”.

2. textContent

تُستخدم textContent للتعامل مع النصوص داخل العناصر. تختلف عن innerHTML في أنها تتعامل مع النص فقط، دون إضافة أو تعديل HTML داخلي.

المثال:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM Example</title>
</head>
<body>
  <div id="message">Welcome to the page!</div>
  <script>
    const messageDiv = document.getElementById('message');
    messageDiv.textContent = 'Welcome to JavaScript!'; // تعديل النص فقط
  </script>
</body>
</html>

هنا، تم تعديل النص داخل العنصر باستخدام textContent.

إضافة وإزالة عناصر من الـ DOM

1. إضافة عناصر جديدة

لإضافة عناصر جديدة إلى الـ DOM، يمكننا استخدام دوال مثل createElement و appendChild.

المثال:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM Example</title>
</head>
<body>
  <ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
  <script>
    const ul = document.getElementById('list');
    const newItem = document.createElement('li'); // إنشاء عنصر جديد
    newItem.textContent = 'Item 3'; // إضافة نص العنصر الجديد
    ul.appendChild(newItem); // إضافة العنصر الجديد إلى القائمة
  </script>
</body>
</html>

في هذا المثال، قمنا بإنشاء عنصر li جديد وإضافته إلى القائمة.

2. إزالة العناصر

لإزالة عنصر من الـ DOM، نستخدم الدالة removeChild أو remove (والتي تُعتبر أكثر بساطة).

المثال:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM Example</title>
</head>
<body>
  <div id="elementToRemove">This element will be removed.</div>
  <script>
    const element = document.getElementById('elementToRemove');
    element.remove(); // إزالة العنصر مباشرة
  </script>
</body>
</html>

هنا، قمنا بإزالة العنصر الذي يحمل الـ ID “elementToRemove” باستخدام remove.

خاتمة: أهمية الـ DOM في تطوير الويب

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

اكتشاف المزيد من كود التطور

اشترك للحصول على أحدث التدوينات المرسلة إلى بريدك الإلكتروني.

Related Posts

اترك رد

Scroll to Top