عناصر جافا سكربت HTML DOM

هذا الفصل يشرح كيفية البحث والوصول إلى عناصر HTML في الصفحة HTML.

البحث عن عناصر HTML

عادةً، تحتاج إلى التفاعل مع عناصر HTML باستخدام JavaScript.

لتحقيق هذا الهدف، يجب أولاً العثور على هذه العناصر. هناك عدة طرق للقيام بذلك:

  • البحث عن عناصر HTML من خلال id
  • البحث عن عناصر HTML من خلال الاسم
  • البحث عن العناصر من خلال الاسم
  • البحث عن عناصر HTML من خلال CSS selector
  • البحث عن عناصر HTML من خلال مجموعة HTML objects

البحث عن عناصر HTML من خلال id

من أبسط الطرق لبحث عن عناصر HTML في DOM هو استخدام id العنصر.

في هذا المثال، يتم البحث عن العنصر الذي يحتوي على id="intro":

مثال

var myElement = document.getElementById("intro");

تجربة بنفسك

إذا تم العثور على العنصر، سيعود هذا الأسلوب بالعنصر كمسجل (في myElement).

إذا لم يتم العثور على العنصر، سيحتوي myElement على null.

البحث عن عناصر HTML من خلال الاسم

في هذا المثال، يتم البحث عن جميع <p> العنصر:

مثال

var x = document.getElementsByTagName("p");

تجربة بنفسك

في هذا المثال، يتم البحث عن العنصر الذي يحتوي على id="main"، ثم البحث عن جميع العناصر في "main". <p> العنصر:

مثال

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");

تجربة بنفسك

البحث عن العناصر من خلال الاسم

إذا كنت بحاجة إلى العثور على جميع العناصر التي تحتوي على نفس الاسم class، استخدم getElementsByClassName().

في هذا المثال، تعود قائمة بالعناصر التي تحتوي على class="intro":

مثال

var x = document.getElementsByClassName("intro");

تجربة بنفسك

البحث عن العناصر من خلال الاسم لا ينطبق على إصدارات Internet Explorer 8 وما قبلها.

البحث عن عناصر HTML من خلال CSS selector

إذا كنت بحاجة إلى البحث عن جميع العناصر التي تطابق مسبقًا CSS selector (id، class name، نوع، خصائص، قيمة الخاصية، إلخ)، استخدم querySelectorAll() الأساليب.

في هذا المثال، تعود جميع العناصر التي تحتوي على class="intro". <p> قائمة العناصر:

مثال

var x = document.querySelectorAll("p.intro");

تجربة بنفسك

querySelectorAll() لا ينطبق على إصدارات Internet Explorer 8 وما قبلها.

البحث عن العناصر باستخدام مسبق HTML

في هذا المثال، يتم البحث عن عنصر form الذي يحتوي على id="frm1" في مجموعة forms، ثم عرض جميع قيم العناصر:

مثال

var x = document.forms["frm1"];
var text = "";
 var i;
for (i = 0; i < x.length; i++) {
    text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;

تجربة بنفسك

هذه العناصر (و مجموعات العناصر) من HTML قابلة للوصول إليها أيضًا: