مشكلة في التعامل مع الـ DOM في JavaScript

Mr Mohamed Alsdawy · 4 مارس 2023

HTML

<h1 id="title"></h1>
<p class="content"></p>
<p class="descrition"></p>

JS

let heading = document.getElementById("title")

let paragraphs = document.getElementsByClassName("content")

let allparagraphs = document.getElementsByClassName("descrition")

 console.log(heading);

 heading.innerHTML = "this is the title"

 console.log(paragraphs);

 paragraphs[0].innerHTML = "Mohamed"

console.log(allparagraphs);

 allparagraphs[1].innerHTML = "This is the second Paragraph"

عمر قره محمد · 4 مارس 2023

المشكلة انه لا يوجد إلا عنصر واحد يحمل الكلاس المسمى descrition وبالتالي فإن الكود التالي :

let allparagraphs = document.getElementsByClassName("descrition")

سيعيد مصفوفة تحتوي عنصر واحد.

وهذا يعني أن الكود التالي :

allparagraphs[1].innerHTML

سيعيد undefined لأنه لا يوجد اي عنصر في الترتيب 1 في المصفوفة allparagraphs.

وهذا يعود لكون الترتيب في المصفوفات في JS يبدأ من الصفر ولأنه لا يوجد إلا عنصر واحد في المصفوفة والذي ترتيبه 0 فسيكون الترتيب 1 فارغاً وسعيد الكود السابق القيمة undefined.

ولحل المشكلة هنالك طريقتين :

أن تضيف عنصر ثاني يحمل الكلاس descrition فيصبح كود الـ html كالتالي :
```
<h1 id="title"></h1>
<p class="content"></p>
<p class="descrition"></p>
<p class="descrition"></p>
```

او تحضر العنصر صاحب الترتيب 0 بدلاً من الترتيب 1 :

// allparagraphs[1].innerHTML = "This is the second Paragraph" نحذف هذا
allparagraphs[0].innerHTML = "This is the second Paragraph" // ونضيف هذا

محمد Fahmy · 4 مارس 2023

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

يفضل أن تحدد عناصر HTML من خلال id وليس class وإذا قمنا بهذا التعديل سوف يكون الكود علي الشكل التالي.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1 id="title"></h1>
    <p id="content"></p>
    <p id="descrition"></p>
    <script>
      let heading = document.getElementById("title");
      let paragraphs = document.getElementById("content");
      let allparagraphs = document.getElementById("descrition");

      console.log(heading);
      heading.innerHTML = "this is the title";
      console.log(paragraphs);
      paragraphs.innerHTML = "Mohamed";
      console.log(allparagraphs);
      allparagraphs.innerHTML = "This is the second Paragraph";

    </script>
  </body>
</html>

في هذه الحالة لن تحتاج إلى تحديد العنصر من مصفوفة كما فعلت في الكود الخاص بك لأن الدلة getElementsByClassName تقوم بأرجاع مصفوقة اما الدالة getElementById تقوم بأرجاع عنصر واحد فقط .

و من مميزات تحديد عناصر HTML من خلال id هو أنك لن تستطيع تكرار هذا ال id علي أي عنصر أخر ولكن يحدث العكس عند استخدام class في تحديد عناصر HTML لأنك يمكنك استخدام نفس ال class علي أكثر من عنصر.

وهذه بعض المصادر المفيدة في هذا الموضوع.

مشكلة في التعامل مع الـ DOM في JavaScript

السؤال

Mr Mohamed Alsdawy

2 أجوبة على هذا السؤال

Recommended Posts

عمر قره محمد

محمد Fahmy

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية