عناصر JavaScript HTML DOM
تعلمك هذه الصفحة كيفية البحث عن عناصر HTML والوصول إليها في صفحة HTML.
البحث عن عناصر HTML
غالبًا ، باستخدام JavaScript ، تريد معالجة عناصر HTML.
للقيام بذلك ، عليك أن تجد العناصر أولاً. هناك عدة طرق للقيام بذلك:
- البحث عن عناصر HTML عن طريق المعرف
- البحث عن عناصر HTML عن طريق اسم العلامة
- البحث عن عناصر HTML حسب اسم الفئة
- البحث عن عناصر HTML بواسطة محددات CSS
- البحث عن عناصر HTML من خلال مجموعات كائن HTML
البحث عن عنصر HTML بالمعرف
أسهل طريقة للعثور على عنصر HTML في DOM ، هي باستخدام معرف العنصر.
يجد هذا المثال العنصر مع id="intro"
:
مثال
const element = document.getElementById("intro");
إذا تم العثور على العنصر ، فإن الطريقة ستعيد العنصر ككائن (في عنصر).
إذا لم يتم العثور على العنصر ، فسيحتوي العنصر null
.
البحث عن عناصر HTML عن طريق اسم العلامة
يجد هذا المثال جميع <p>
العناصر:
مثال
const element = document.getElementsByTagName("p");
يجد هذا المثال العنصر مع id="main"
، ثم يجد جميع <p>
العناصر بداخله "main"
:
مثال
const x = document.getElementById("main");
const y = x.getElementsByTagName("p");
البحث عن عناصر HTML حسب اسم الفصل
إذا كنت تريد العثور على جميع عناصر HTML التي تحمل نفس اسم الفئة ، فاستخدم
getElementsByClassName()
.
يعرض هذا المثال قائمة بجميع العناصر ذات الامتداد class="intro"
.
مثال
const x = document.getElementsByClassName("intro");
البحث عن عناصر HTML بواسطة CSS Selectors
إذا كنت تريد العثور على جميع عناصر HTML التي تتطابق مع محدد CSS محدد (المعرف ، وأسماء الفئات ، والأنواع ، والسمات ، وقيم السمات ، وما إلى ذلك) ، فاستخدم querySelectorAll()
الطريقة.
يعرض هذا المثال قائمة بجميع <p>
العناصر ذات الامتداد class="intro"
.
مثال
const x = document.querySelectorAll("p.intro");
البحث عن عناصر HTML من خلال مجموعات كائنات HTML
يجد هذا المثال عنصر النموذج مع id="frm1"
، في مجموعة النماذج ، ويعرض جميع قيم العناصر:
مثال
const x = document.forms["frm1"];
let text = "";
for (let i = 0; i < x.length; i++) {
text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
يمكن أيضًا الوصول إلى كائنات HTML (ومجموعات الكائنات) التالية: