التلاعب بعناصر DOM باستخدام JavaScript

في هذا الدرس، سنتعلم كيفية التلاعب بعناصر DOM (Document Object Model) باستخدام JavaScript. سنقوم بتغطية العديد من الميزات والطرق التي تساعدنا في التعامل مع هذه العناصر وتعديلها بمرونة.

 الوصول إلى عناصر DOM وتعديلها

1. الوصول إلى العناصر باستخدام `getElementById`:

يمكننا الوصول إلى عنصر معين باستخدام معرفه الفريد (ID) عبر `document.getElementById`:

```javascript
var element = document.getElementById('example');
```

2. الخصائص (Attributes):

يمكننا الوصول إلى خصائص العنصر مثل `attributes`, `id`, `title`, `value`، وغيرها:

```javascript
var element = document.getElementById('example');
console.log(element.id); // عرض المعرف
console.log(element.title); // عرض العنوان
```

3. خصائص `dataset`:

تتيح لنا الوصول إلى خصائص البيانات التي تبدأ بـ `data-` في عناصر HTML:

```javascript
// مثال: <li data-grade="60" data-final-grade="80">Physics</li>
console.log(element.dataset.grade); // 60
console.log(element.dataset.finalGrade); // 80
```

4. التلاعب بالأنماط (Styles):

يمكننا الوصول إلى أنماط العنصر أو تعديلها باستخدام `style`:

```javascript
element.style.color = '#f00'; // تغيير اللون إلى الأحمر
element.style.fontSize = '23px'; // تغيير حجم الخط
```

5. القوائم الصفية (ClassList):

تساعدنا على إضافة أو إزالة أو تبديل الصفوف:

```javascript
element.classList.add('newClass');
element.classList.remove('oldClass');
element.classList.toggle('activeClass');
```

6. طرق التعامل مع الخصائص (Attribute Methods):

يمكننا الحصول على خصائص العنصر أو تعيينها أو إزالتها:

```javascript
var attributeValue = element.getAttribute('attribute-name');
element.setAttribute('attribute-name', 'newValue');
element.removeAttribute('attribute-name');
```

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

1. **إضافة عناصر جديدة إلى DOM**:

يمكننا إنشاء عناصر جديدة وإضافتها إلى DOM باستخدام `createElement` و`append` و`prepend`:

```javascript
var newElement = document.createElement('li');
var text = document.createTextNode(subject.name);
newElement.append(text);
newElement.innerHTML = '<div>Content</div>';
```

2. **إدراج العناصر قبل أو بعد عناصر معينة**:

يمكننا استخدام `before` و`after` لإدراج العناصر:

```javascript
var element1 = document.getElementById('element1');
var element2 = document.getElementById('element2');
element1.before(element2); // إدراج العنصر 2 قبل العنصر 1
element1.after(element2); // إدراج العنصر 2 بعد العنصر 1
```

3. إزالة العناصر من DOM:

يمكننا إزالة العناصر باستخدام `remove` أو `removeChild`:

```javascript
element.remove(); // إزالة العنصر مباشرة
parentElement.removeChild(childElement); // إزالة العنصر الابن من العنصر الأب
```

بالمثال التطبيقي

ذلك نقوم  بتطبيق ما تعلمناه من خلال مثال عملي. سنقوم بإنشاء عنصر `li` جديد ثم إضافة بعض النصوص إليه وتطبيق بعض الأنماط عليه، ثم إدراجه في قائمة عناصر الطلاب (student_grades).

```javascript
var subject = {
name: 'English',
grade: '70',
finalGrade: '80',
classes: ['one', 'two']
};

// إنشاء عنصر li جديد
var liHTMLElement = document.createElement('li');
var contentText = document.createTextNode(subject.name);
liHTMLElement.append(contentText);
liHTMLElement.append('Test');
liHTMLElement.id = 'new_li';

// إضافة عنوان قبل النص
var testNewElement = document.createElement('h3');
testNewElement.innerHTML = 'HEading 3';
liHTMLElement.prepend(testNewElement);
testNewElement.id = 'heading_3';

// تعيين الصفوف الخاصة بالعنصر
liHTMLElement.setAttribute('class', subject.classes.join(' '));

// تعيين خصائص البيانات
var liHTMLElementData = liHTMLElement.dataset;
liHTMLElementData.grade = subject.grade;
liHTMLElementData.finalGrade = subject.finalGrade;

// إدراج العنصر الجديد في قائمة الطلاب
var studentList = document.querySelector('#student_grades');
studentList.insertBefore(liHTMLElement, studentList.children[2]);

// بعد 1 ثانية، تغيير ترتيب العناصر
setTimeout(function () { var heading_3 = document.('heading_3'); var new_li = document.('new_li'); var student_grades =

student_grades.before(heading_3); // إدراج heading_3 قبل قائمة الطلاب
student_grades.lastElementChild.after(new_li); // إدراج new_li بعد آخر عنصر في القائمة
}, 1000);

// بعد 3 ثوانٍ، إزالة العناصر
var heading_3 = document.'heading_3'); var new_li = document.'new_li'); var student_grades = document.('student_grades');

heading_3.remove(); // إزالة heading_3
student_grades.removeChild(new_li); // إزالة new_li
}, 3000);
```

الخلاصة

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