مفهوم Element HTML DOM

العنصر Element

في DOM HTML، يمثل عنصر Element العنصر HTML مثل P، DIV، A، TABLE أو أي عنصر HTML آخر.

الخصائص والطرق

يمكن استخدام هذه الخصائص والطرق لجميع عناصر HTML:

الخصائص / الطرق الوصف
accessKey تعيين أو استعادة خاصية accesskey العنصر.
addEventListener() تثبيت معالج الحدث على العنصر.
appendChild() إضافة (تثبيت) عقدة ابنة جديدة إلى العنصر.
attributes استعادة NamedNodeMap لخصائص العنصر.
blur() إزالة التركيز من العنصر.
childElementCount استعادة عدد العناصر الابنية للعنصر.
childNodes استعادة NodeList من العناصر الابنية للعنصر.
children استعادة مجموعة من العناصر الابنية للعنصر.
classList استعادة اسم الصنف للعنصر.
className تعيين أو استعادة قيمة خاصية class العنصر.
click() محاكاة ضرب العنصر بالفأرة.
clientHeight استعادة طول العنصر، بما في ذلك الهوامش.
clientLeft استعادة عرض الحافة اليسرى للعنصر.
clientTop استعادة عرض الحافة العلوية للعنصر.
clientWidth استعادة عرض العنصر، بما في ذلك الهوامش.
cloneNode() نسخ العنصر.
closest() البحث عن أقرب عنصر يتطابق مع选择ق CSS في شجرة DOM.
compareDocumentPosition() مقارنة موقف العناصر في المستند.
contains() إذا كان العنصر هو نسل العنصر، فإنه يعود بالصحيح.
contentEditable تعيين أو استرجاع ما إذا كان محتوى العنصر قابلاً للتحرير.
dir تعيين أو استرجاع قيمة الخاصية dir للعنصر.
firstChild إرجاع العنصر الأول من بين الأبناء.
firstElementChild إرجاع العنصر الأول من بين الأبناء.
focus() جعل العنصر يحصل على التركيز.
getAttribute() إرجاع قيمة الخاصية للعنصر.
getAttributeNode() إرجاع عقدة الخاصية.
getBoundingClientRect() إرجاع حجم العنصر و موقفه بالنسبة للشاشة.
getElementsByClassName() إرجاع مجموعة من العناصر الفرعية التي تحمل اسم الفئة المحدد.
getElementsByTagName() إرجاع مجموعة من العناصر الفرعية التي تحمل اسم العنصر المحدد.
hasAttribute() إذا كان العنصر يحتوي على الخاصية المحددة، فإنه يعود بالصحيح.
hasAttributes() إذا كان العنصر يحتوي على أي خصائص، فإنه يعود بالصحيح.
hasChildNodes() إذا كان العنصر يحتوي على أي عناصر فرعية، فإنه يعود بالصحيح.
element.id تعيين أو استرجاع قيمة الخاصية id للعنصر.
innerHTML تعيين أو استرجاع محتوى العنصر.
innerText تعيين أو العودة إلى محتوى النص للأعمدة والأنسجة.
insertAdjacentElement() إدراج عنصر HTML جديد في موقف العنصر.
insertAdjacentHTML() إدراج نص في صيغة HTML في موقف العنصر.
insertAdjacentText() إدراج نص في موقف العنصر.
insertBefore() إدراج عقدة جديدة قبل العقدة الابنة الحالية.
isContentEditable إذا كان محتوى العنصر قابلاً للتحرير، فإنه يعود بالصحيح.
isDefaultNamespace() إذا كان namespaceURI المقدم هو القيمة الافتراضية، فإنه يعود بالصحيح.
isEqualNode() تحقق مما إذا كانت العناصر إثنين متساويتين.
isSameNode() تحقق مما إذا كانت العناصر إثنين من نفس العنصر.
isSupported() مستبعد.
lang تعيين أو استرجاع قيمة الخاصية lang للعنصر.
lastChild تسليم العنصر الأخير من بين الأبناء.
lastElementChild إرجاع العنصر الفرعي الأخير للعنصر.
matches() إرجاع true إذا كان العنصر يتطابق مع مبدأ الاختيار CSS المحدد.
namespaceURI إرجاع URI المساحة الاسمية للعنصر.
nextSibling إرجاع العقدة التالية في نفس مستوى الشجرة للعنصر.
nextElementSibling إرجاع العنصر التالي في نفس مستوى الشجرة للعنصر.
nodeName إرجاع اسم العقدة.
nodeType إرجاع نوع العقدة.
nodeValue تعيين أو إرجاع القيمة للعقدة.
normalize() دمج العناصر النصية المجاورة في العنصر، وإزالة العناصر النصية الفارغة.
offsetHeight إرجاع الارتفاع للعنصر، بما في ذلك الهوامش الداخلية والهوامش الخارجية والهوامش الداخلية.
offsetWidth إرجاع العرض للعنصر، بما في ذلك الهوامش الداخلية والهوامش الخارجية والهوامش الداخلية.
offsetLeft إرجاع الارتفاع الأفقي للعنصر.
offsetParent إرجاع عقدة الارتفاع للعنصر.
offsetTop إرجاع الارتفاع العمودي للعنصر.
outerHTML تعيين أو إرجاع محتوى العنصر (بما في ذلك العناصر البدءية والنهاية).
outerText تعيين أو إرجاع النص الخارجي للعقدة وما بعدها من الأبناء.
ownerDocument إرجاع العنصر الجذر (مثال المستند).
parentNode إرجاع عقدة الأب للعنصر.
parentElement إرجاع عقدة الأب للعنصر.
previousSibling إرجاع العقدة السابقة في نفس مستوى الشجرة للعنصر.
previousElementSibling إرجاع العنصر السابق في نفس مستوى الشجرة للعنصر.
querySelector() إرجاع العنصر الفرعي الأول الذي يتطابق مع مبدأ الاختيار CSS.
querySelectorAll() إرجاع جميع العناصر الفرعية التي تتطابق مع مبدأ الاختيار CSS.
remove() إزالة العنصر من DOM.
removeAttribute() إزالة الخاصية من العنصر.
removeAttributeNode() إزالة عقدة الخاصية، وإرجاع العقدة المزالة.
removeChild() إزالة العنصر الفرعي من العنصر.
removeEventListener() حذف معالج الحدث المضاف باستخدام طريقة addEventListener().
replaceChild() استبدال العناصر الفرعية في العنصر.
scrollHeight تقديم إجمالي الارتفاع للعنصر، بما في ذلك الهوامش الداخلية.
scrollIntoView() السحب العنصر إلى منطقة الرؤية في نافذة المتصفح.
scrollLeft تعيين أو العودة إلى عدد البكسلات الأفقية لسحب المحتوى.
scrollTop تعيين أو العودة إلى عدد البكسلات العمودية لسحب المحتوى.
scrollWidth العودة إلى عرض العنصر الكلي، بما في ذلك الهوامش الداخلية.
setAttribute() تعيين أو تغيير قيمة الخاصية.
setAttributeNode() تعيين أو تغيير خاصية العنصر.
style تعيين أو العودة إلى قيمة خاصية style للعنصر.
tabIndex تعيين أو العودة إلى قيمة خاصية tabIndex للعنصر.
tagName العودة إلى اسم العنصر.
textContent تعيين أو العودة إلى محتوى النص للأعمدة والأنسجة.
title تعيين أو العودة إلى قيمة خاصية title للعنصر.
toString() تحويل العنصر إلى سلسلة من الأحرف.

تفسير واجهة Element

واجهة Element تمثل العنصر HTML، العنصر XML أو العنصر المزين. يتم تحديد اسم العنصر من خلال خاصية tagName. يتم التطرق إلى العنصر الجذر في الوثيقة من خلال خاصية documentElement في Document. خاصية body في Object HTMLDocument مشابهة، حيث تشير إلى عنصر <body> في الوثيقة. لتجد العنصر المحدد في وثيقة HTML، يمكنك استخدام method Document.getElementById() (وإعطاء العنصر اسم فريد من خلال خاصية id). لتوجيه العنصر بناءً على الاسم، يمكنك استخدام method getElementsByTagName()، وهو طريقة الخاصة بـ Element و Document. يمكنك أيضًا استخدام method HTMLDocument.getElementsByName() في وثيقة HTML لتجد العناصر بناءً على خاصية name. وأخيرًا، يمكنك إنشاء عنصر Element جديد للاضافة إلى الوثيقة باستخدام method Document.createElement().

قام بإنشاء method addEventListener() (والطريقة البديلة المحددة لمتصفح إي بي attachEvent() ) بتقديم طريقة لسجـال وظائف معالجة الأحداث المخصصة للنوع المحدد في العنصر. من الناحية التقنية، addEventListener() و removeEventListener() و dispatchEvent() كلها مكتوبة بواسطة واجهة EventTarget في معيار DOM Events المستوى 2. جميع عناصر Element تنفذ واجهة EventTarget.

تقدم واجهة هذه العدة من الطرق إلى الوصول إلى خصائص العنصر. في مستند HTML (وفي العديد من مستندات XML)، جميع الخصائص لها قيمة سلسلة بسيطة، ويمكنك استخدام طرق بسيطة مثل getAttribute() وsetAttribute() لإجراء أي عملية على الخصائص المطلوبة.

إذا كنت تستخدم مستند XML، قد يحتوي على مرجع Entity كجزء من قيمة الخاصية، ستحتاج إلى استخدام عقدة Attr ومعرفات فرعية لها. يمكنك استخدام getAttributeNode() وsetAttributeNode() لاسترداد وتعيين عقدة Attr، أو يمكنك مرور مجموعة attributes[] في واجهة Node للحصول على عقدة Attr. إذا كنت تستخدم مستند XML يستخدم مساحة اسمية XML، فستحتاج إلى استخدام طرق تحتوي على "NS".

في معيار DOM المعمول به، يعتبر طريقة normalize() جزءًا من واجهة Element. في المعيار المعمول به من الطبقة الثانية، تكون normalize() جزءًا من واجهة Node. تنقل جميع العقد Element هذه الطريقة وتظل قابلة للتطبيق.

المعرفة: عقدة DOM HTML

في DOM HTML (نموذج وحدة المستند)، كل جزء هو عقدة:

  • المستند نفسه هو عقدة المستند
  • جميع عناصر HTML هي عقدة العنصر
  • جميع خصائص HTML هي عقدة الخاصية
  • النص داخل العنصر HTML هو عقدة النص
  • التعليقات هي عقدة التعليق

العنصر Element

في DOM HTML، يُمثل العنصر Element العنصر HTML.

يمكن للعنصر Element أن يملك أبناء من نوع عقدة العنصر، عقدة النص، أو عقدة التعليق.

يُمثل NodeList العنصر الذي يحتوي على قائمة العقد، مثل مجموعة أبناء العنصر HTML.

يمكن للعناصر أن تملك خصائص. الخصائص هي عقدة الخاصية (انظر الفصل التالي).