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

في هذا الدرس، سنتعلم كيفية التلاعب بعناصر DOM (Document Object Model) باستخدام JavaScript. سنتناول كيفية الوصول إلى العناصر وتعديلها، وكذلك كيفية إضافة عناصر جديدة أو إزالة عناصر موجودة.

مثال عملي: التحقق من درجات الطلاب

سنبدأ بمثال تطبيقي يظهر كيفية التحقق من درجات الطلاب وعرض نسبة الدرجات باستخدام عناصر DOM.

 الكود:

```javascript
function checkListGrades() {
var studentGradesList = document.getElementById('student_grades');
var totalGrades = 0,
finalGrades = 0,
studentScore = 0;

for (var i = 0; i <= studentGradesList.childElementCount - 1; i++) {
var _subject = studentGradesList.children[i],
subjectData = _subject.dataset;

totalGrades += Number(subjectData.grade);
finalGrades += Number(subjectData.finalGrade);

var progressSubject = document.createElement('progress');
progressSubject.setAttribute('max', subjectData.finalGrade);
progressSubject.setAttribute('value', subjectData.grade);

var heading_element = document.createElement('h3');
heading_element.innerText = _subject.innerText;

_subject.innerHTML = '';
_subject.append(progressSubject);
_subject.prepend(heading_element);

var smallReport = document.createElement('small'),
smallReportText = document.createTextNode(subjectData.grade + ' / ' + subjectData.finalGrade);

smallReport.append(smallReportText);
smallReport.style.padding = '0 10px';
smallReport.style.color = 'black';

heading_element.appendChild(smallReport);

var reportSubject = document.createElement('p'),
reportText = ' the student reaches ' + subjectData.grade + ' of ' + subjectData.finalGrade;
reportText = document.createTextNode(report

 الشرح المفصل

1. **إنشاء دالة `checkListGrades`**:

تقوم هذه الدالة بالتحقق من درجات الطلاب في قائمة HTML.

2. **الوصول إلى قائمة درجات الطلاب**:

نستخدم `document.getElementById` للوصول إلى العنصر الذي يحتوي على قائمة درجات الطلاب:

```javascript
var studentGradesList = document.getElementById('student_grades');
```

3. **التعامل مع درجات الطلاب**:

نقوم بالتكرار عبر كل عنصر في القائمة باستخدام حلقة `for`:

```javascript
for (var i = 0; i <= studentGradesList.childElementCount - 1; i++) {
var _subject = studentGradesList.children[i],
subjectData = _subject.dataset;

totalGrades += Number(subjectData.grade);
finalGrades += Number(subjectData.finalGrade);
}
```

4. **إنشاء عناصر جديدة وإضافتها**:

نستخدم `document.createElement` لإنشاء عناصر جديدة مثل `progress`, `h3`, `small`, و`p`، ثم نضيفها إلى العناصر الموجودة:

```javascript
var progressSubject = document.createElement('progress');
progressSubject.setAttribute('max', subjectData.finalGrade);
progressSubject.setAttribute('value', subjectData.grade);

var heading_element = document.createElement('h3');
heading_element.innerText = _subject.innerText;

_subject.innerHTML = '';
_subject.append(progressSubject);
_subject.prepend(heading_element);

var smallReport = document.createElement('small'),
smallReportText = document.createTextNode(subjectData.grade + ' / ' + subjectData.finalGrade);

smallReport.append(smallReportText);
```

5. **إضافة نصوص وتقارير**:

نضيف تقارير ونصوص توضيحية باستخدام `createTextNode` و`append`:

```javascript
var reportSubject = document.createElement('p'),
reportText = ' the student reaches ' + subjectData.grade + ' of ' + subjectData.finalGrade;
reportText = document.createTextNode(reportText);
reportSubject.append(reportText);
```

6. **حساب النسبة المئوية الإجمالية للدرجات**:

نحسب النسبة المئوية الإجمالية للدرجات ونضيفها إلى الصفحة:

```javascript
studentScore = (totalGrades / finalGrades) * 100;
studentScore = Math.round(studentScore);

var total_percentage_element = document.createElement('h1'),
total_percentage_text = document.createTextNode(studentScore + '%');
total_percentage_element.append(total_percentage_text);
```

الخلاصة

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