+201555349790
السبت - الخميس: 10:00 ص - 10:00 م

مقدمة إلى التلاعب بالـ DOM باستخدام JavaScript

دليل المبتدئين للتفاعل مع صفحات الويب باستخدام JavaScript DOM Manipulation.

بواسطة: سارة إبراهيمWednesday, November 20, 2024
مقدمة إلى التلاعب بالـ DOM باستخدام JavaScript

مقدمة إلى التلاعب بالـ DOM باستخدام JavaScript

DOM (Document Object Model) هو تمثيل برمجي لصفحة الويب. يتيح لك JavaScript التلاعب بالعناصر، تغيير المحتوى، وإضافة التفاعل. هذا الدليل الشامل سيساعدك على فهم وإتقان DOM Manipulation.

ما هو DOM؟

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

هيكل DOM:

<html>
  <head>
    <title>صفحة الويب</title>
  </head>
  <body>
    <h1>العنوان الرئيسي</h1>
    <p>فقرة من النص</p>
    <div>
      <button>زر</button>
    </div>
  </body>
</html>

لماذا DOM مهم؟

🔄 التفاعل

جعل الصفحات تفاعلية وديناميكية

📝 التعديل

تغيير المحتوى دون إعادة تحميل الصفحة

🎨 التنسيق

تغيير التصميم والتخطيط ديناميكياً

⚡ الأداء

تحسين تجربة المستخدم

تحديد العناصر:

getElementById:

// تحديد عنصر بالمعرف
let header = document.getElementById('header');
let button = document.getElementById('submit-btn');

getElementsByClassName:

// تحديد عناصر بالفئة
let cards = document.getElementsByClassName('card');
let buttons = document.getElementsByClassName('btn');

getElementsByTagName:

// تحديد عناصر بالاسم
let paragraphs = document.getElementsByTagName('p');
let images = document.getElementsByTagName('img');

querySelector و querySelectorAll:

// تحديد عنصر واحد
let firstCard = document.querySelector('.card');
let header = document.querySelector('#header');

// تحديد عدة عناصر
let allCards = document.querySelectorAll('.card');
let allButtons = document.querySelectorAll('button');

تغيير المحتوى:

تغيير النص:

// تغيير النص الداخلي
let title = document.getElementById('title');
title.textContent = 'عنوان جديد';

// تغيير HTML الداخلي
let container = document.getElementById('container');
container.innerHTML = '<h2>محتوى جديد</h2><p>فقرة جديدة</p>';

// إضافة محتوى
container.innerHTML += '<p>فقرة إضافية</p>';

تغيير الخصائص:

// تغيير src للصورة
let image = document.getElementById('myImage');
image.src = 'new-image.jpg';

// تغيير href للرابط
let link = document.getElementById('myLink');
link.href = 'https://example.com';

// تغيير class
let element = document.getElementById('myElement');
element.className = 'new-class';

تغيير التنسيق:

// تغيير CSS مباشرة
let box = document.getElementById('box');
box.style.backgroundColor = 'red';
box.style.color = 'white';
box.style.fontSize = '20px';
box.style.padding = '10px';

// إضافة/إزالة فئات CSS
let element = document.getElementById('element');
element.classList.add('active');
element.classList.remove('inactive');
element.classList.toggle('highlight');

إضافة وحذف العناصر:

إنشاء عناصر جديدة:

// إنشاء عنصر جديد
let newDiv = document.createElement('div');
newDiv.textContent = 'عنصر جديد';
newDiv.className = 'new-element';

// إنشاء عنصر مع خصائص
let newButton = document.createElement('button');
newButton.textContent = 'زر جديد';
newButton.id = 'new-btn';
newButton.onclick = function() {
    alert('تم النقر!');
};

إضافة العناصر:

// إضافة في النهاية
let container = document.getElementById('container');
container.appendChild(newDiv);

// إضافة في موضع محدد
let referenceElement = document.getElementById('reference');
container.insertBefore(newDiv, referenceElement);

// إضافة في البداية
container.insertBefore(newDiv, container.firstChild);

حذف العناصر:

// حذف عنصر
let elementToRemove = document.getElementById('to-remove');
elementToRemove.remove();

// حذف من العنصر الأب
let parent = document.getElementById('parent');
let child = document.getElementById('child');
parent.removeChild(child);

الاستجابة للأحداث:

إضافة مستمعي الأحداث:

// حدث النقر
let button = document.getElementById('myButton');
button.addEventListener('click', function() {
    alert('تم النقر على الزر!');
});

// حدث تحميل الصفحة
window.addEventListener('load', function() {
    console.log('تم تحميل الصفحة');
});

// حدث تغيير الحقل
let input = document.getElementById('myInput');
input.addEventListener('input', function() {
    console.log('القيمة الجديدة:', this.value);
});

أنواع الأحداث الشائعة:

// أحداث الماوس
element.addEventListener('click', handler);
element.addEventListener('mouseover', handler);
element.addEventListener('mouseout', handler);

// أحداث لوحة المفاتيح
element.addEventListener('keydown', handler);
element.addEventListener('keyup', handler);

// أحداث النموذج
form.addEventListener('submit', handler);
input.addEventListener('change', handler);

مشاريع تطبيقية:

قائمة المهام (To-Do List):

// HTML
<div id="todo-container">
    <input type="text" id="todo-input" placeholder="أضف مهمة جديدة">
    <button id="add-btn">إضافة</button>
    <ul id="todo-list"></ul>
</div>

// JavaScript
let todoInput = document.getElementById('todo-input');
let addBtn = document.getElementById('add-btn');
let todoList = document.getElementById('todo-list');

addBtn.addEventListener('click', function() {
    let task = todoInput.value.trim();
    if (task !== '') {
        addTask(task);
        todoInput.value = '';
    }
});

function addTask(task) {
    let li = document.createElement('li');
    li.innerHTML = `
        <span>${task}</span>
        <button class="delete-btn">حذف</button>
    `;

    // إضافة حدث الحذف
    let deleteBtn = li.querySelector('.delete-btn');
    deleteBtn.addEventListener('click', function() {
        li.remove();
    });

    todoList.appendChild(li);
}

معرض الصور:

// HTML
<div id="gallery">
    <img src="image1.jpg" alt="صورة 1">
    <img src="image2.jpg" alt="صورة 2">
    <img src="image3.jpg" alt="صورة 3">
</div>

// JavaScript
let images = document.querySelectorAll('#gallery img');

images.forEach(function(img) {
    img.addEventListener('click', function() {
        // إزالة التمييز من جميع الصور
        images.forEach(i => i.classList.remove('selected'));

        // تمييز الصورة المحددة
        this.classList.add('selected');

        // عرض الصورة في نافذة منبثقة
        showModal(this.src);
    });
});

function showModal(imageSrc) {
    let modal = document.createElement('div');
    modal.className = 'modal';
    modal.innerHTML = `
        <div class="modal-content">
            <span class="close">&times;</span>
            <img src="${imageSrc}">
        </div>
    `;

    document.body.appendChild(modal);

    // إغلاق النافذة المنبثقة
    modal.querySelector('.close').addEventListener('click', function() {
        modal.remove();
    });
}

أفضل الممارسات:

📝 تنظيم الكود:

  • استخدم querySelector بدلاً من getElementById عند الإمكان
  • احفظ العناصر في متغيرات لتجنب البحث المتكرر
  • استخدم addEventListener بدلاً من onclick
  • نظف مستمعي الأحداث عند الحاجة

⚡ الأداء:

  • تجنب التلاعب المتكرر بـ DOM
  • استخدم DocumentFragment للعناصر المتعددة
  • استخدم requestAnimationFrame للرسوم المتحركة
  • اختبر الكود على أجهزة مختلفة

🔧 الصيانة:

  • اكتب كود واضح ومفهوم
  • استخدم التعليقات لشرح الكود المعقد
  • اختبر الوظائف بشكل منفصل
  • استخدم console.log للتشخيص

أخطاء شائعة:

❌ أخطاء شائعة:

  • محاولة الوصول لعنصر قبل تحميل الصفحة
  • نسيان فحص وجود العنصر
  • استخدام innerHTML مع محتوى غير آمن
  • عدم تنظيف مستمعي الأحداث

✅ الحلول:

// ❌ خطأ - العنصر قد لا يكون موجوداً
let element = document.getElementById('non-existent');
element.style.color = 'red';

// ✅ صحيح - فحص وجود العنصر
let element = document.getElementById('my-element');
if (element) {
    element.style.color = 'red';
}

// ❌ خطأ - استخدام innerHTML مع محتوى غير آمن
element.innerHTML = userInput;

// ✅ صحيح - استخدام textContent
element.textContent = userInput;

الخطوات التالية:

  • تعلم jQuery لتبسيط DOM Manipulation
  • فهم React و Virtual DOM
  • ممارسة الأحداث المتقدمة
  • تعلم Web APIs
  • بناء تطبيقات تفاعلية

DOM Manipulation هو مفتاح التفاعل في الويب. ابدأ في تعلمه اليوم!

تعلم JavaScript معنا

تواصل معنا

عبر الماسنجر او الهاتف

اختر طريقة التواصل