اذهب إلى المحتوى
  • 0

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

Mr Mohamed Alsdawy

السؤال

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"

 

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

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

let allparagraphs = document.getElementsByClassName("descrition")

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

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

allparagraphs[1].innerHTML

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

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

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

  1. أن تضيف عنصر ثاني يحمل الكلاس descrition فيصبح كود الـ html  كالتالي :
    <h1 id="title"></h1>
    <p class="content"></p>
    <p class="descrition"></p>
    <p class="descrition"></p>
  2. او تحضر العنصر صاحب الترتيب 0 بدلاً من الترتيب 1 :
    // allparagraphs[1].innerHTML = "This is the second Paragraph" نحذف هذا
    allparagraphs[0].innerHTML = "This is the second Paragraph" // ونضيف هذا

     

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

يفضل أن تحدد عناصر 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 علي أكثر من عنصر.

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

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...