صورت Element HTML DOM

عنصر Element

در HTML DOM، شیء Element نماینده عنصر HTML است، مانند P، DIV، A، TABLE یا هر عنصر HTML دیگر.

ویژگی‌ها و روش‌ها

این ویژگی‌ها و روش‌ها برای تمام عناصر HTML قابل استفاده هستند:

ویژگی / روش توضیح
accessKey مقدار attribute accesskey عنصر را تنظیم یا بازمی‌گرداند.
addEventListener() مدیریت‌کننده رویداد را به عنصر متصل می‌کند.
appendChild() فرزند جدیدی به عنصر اضافه می‌کند.
attributes نمای NamedNodeMap از ویژگی‌های عنصر را بازمی‌گرداند.
blur() توجه عنصر را از عنصر حذف می‌کند.
childElementCount تعداد فرزندان عنصر را بازمی‌گرداند.
childNodes نodelist فرزندان عنصر را بازمی‌گرداند.
children کمک‌جمع‌آوری HTML از فرزندان عنصر را بازمی‌گرداند.
classList نام کلاس عنصر را بازمی‌گرداند.
className مقدار属性 class عنصر را تنظیم یا بازمی‌گرداند.
click() 单击 روی عنصر را شبیه‌سازی می‌کند.
clientHeight ارتفاع عنصر را بازمی‌گرداند، شامل حاشیه‌ها.
clientLeft عرض حاشیه چپ عنصر را بازمی‌گرداند.
clientTop عرض حاشیه بالای عنصر را بازمی‌گرداند.
clientWidth عرض عنصر را بازمی‌گرداند، شامل حاشیه‌ها.
cloneNode() عنصر را کپی می‌کند.
closest() در درخت DOM به دنبال نزدیک‌ترین عنصر مطابقت‌دار با انتخاب‌کننده CSS می‌گردد.
compareDocumentPosition() موقعیت مستند دو عنصر را مقایسه می‌کند.
contains() اگر یک نقطه یک نقطه از نسل یک نقطه باشد، مقدار true را بازمی‌گرداند.
contentEditable تنظیم یا بازگشت اینکه محتوای عنصر قابل ویرایش است یا خیر.
dir تنظیم یا بازگشت مقادیر ویژگی dir یک عنصر.
firstChild اولین فرزند عنصر را بازمی‌گرداند.
firstElementChild اولین فرزند عنصر را بازمی‌گرداند.
focus() عنصر را تمرکز می‌دهد.
getAttribute() مقدار ویژگی عنصر را بازمی‌گرداند.
getAttributeNode() نقطه ویژگی بازمی‌گرداند.
getBoundingClientRect() اندازه عنصر و موقعیت آن نسبت به پنجره نمایش را بازمی‌گرداند.
getElementsByClassName() مجموعه‌ای از فرزندان دارای نام کلاس داده شده را بازمی‌گرداند.
getElementsByTagName() مجموعه‌ای از فرزندان دارای نام برچسب داده شده را بازمی‌گرداند.
hasAttribute() اگر عنصر دارای ویژگی داده شده باشد، مقدار true را بازمی‌گرداند.
hasAttributes() اگر عنصر هرگونه ویژگی داشته باشد، مقدار true را بازمی‌گرداند.
hasChildNodes() اگر عنصر هرگونه فرزند داشته باشد، مقدار true را بازمی‌گرداند.
element.id تنظیم یا بازگشت مقادیر ویژگی id یک عنصر.
innerHTML تنظیم یا بازگشت محتوای عنصر.
innerText تنظیم یا بازگشت محتوای متن فرزندان و گره.
insertAdjacentElement() در موقعیت مربوط به عنصر یک عنصر HTML جدید می‌افزاید.
insertAdjacentHTML() در موقعیت مربوط به عنصر متن فرمت HTML را می‌افزاید.
insertAdjacentText() در موقعیت مربوط به عنصر متن را می‌افزاید.
insertBefore() در پیش از فرزند موجود یک فرزند جدید می‌افزاید.
isContentEditable اگر محتوای عنصر قابل ویرایش باشد، مقدار true را بازمی‌گرداند.
isDefaultNamespace() اگر namespaceURI داده شده مقادیر پیش‌فرض باشد، مقدار true را بازمی‌گرداند.
isEqualNode() بررسی می‌کند که دو عنصر یکسان هستند یا خیر.
isSameNode() بررسی می‌کند که دو عنصر آیا یک و همان هستند.
isSupported() استفاده شده است.
lang تنظیم یا بازگشت مقادیر ویژگی lang یک عنصر.
lastChild بازگشت به آخرین فرزند یک عنصر.
lastElementChild بازگشت به آخرین فرزند عنصر.
matches() اگر عنصر با انتخاب‌گر CSS داده شده همخوانی دارد، true بازمی‌گرداند.
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 مستند به عنصر ریشه Element این مستند اشاره دارد. ویژگی body شیء HTMLDocument نیز مشابه است، که به عنصر <body> مستند اشاره دارد. برای یافتن عنصر مشخصی در یک مستند HTML از method Document.getElementById() استفاده می‌شود (و به این عنصر یک نام منحصر به فرد از طریق ویژگی id می‌دهند). برای تعیین عنصر از طریق نام نشانه، از method getElementsByTagName() استفاده می‌شود، که هم یک روش Element و هم یک روش Document است. در مستند HTML، می‌توان از روش مشابه HTMLDocument.getElementsByName() برای جستجوی عنصر بر اساس ویژگی name استفاده کرد. در نهایت، می‌توان از method Document.createElement() برای ایجاد یک عنصر Element جدید برای اضافه کردن به مستند استفاده کرد.

مетод addEventListener() (و جایگزین اختصاصی IE آن attachEvent()) روشی را برای ثبت فراخوانی‌های رخ‌دادها برای نوع خاصی از رخ‌دادها در یک عنصر ارائه می‌دهد. از لحاظ فنی، addEventListener()، removeEventListener() و dispatchEvent() همه توسط رابط EventTarget در استاندارد دومین DOM Events تعریف شده‌اند. همه اشیاء Element به EventTarget پیروی می‌کنند.

روش‌های مختلف این رابط برای دسترسی به ویژگی‌های عنصر ارائه می‌دهند. در مستند HTML (و بسیاری از مستندات XML)، تمام ویژگی‌ها دارای ارزش ساده‌ای از نوع رشته هستند و می‌توانید از روش‌های ساده getAttribute() و setAttribute() برای هرگونه عملیات ویژگی استفاده کنید.

اگر در حال استفاده از مستند XML هستید، ممکن است بخشی از ویژگی به عنوان بخشی از ارجاع Entity شامل شود، شما باید از Attr Object و زیرشاخه‌های آن استفاده کنید. می‌توانید برای یک ویژگی از getAttributeNode() و setAttributeNode() برای دریافت و تنظیم Attr Object استفاده کنید، یا می‌توانید از آرایه attributes[] در Node Interface برای جستجوی گره Attr استفاده کنید. اگر از مستند XML با فضای نام استفاده شده هستید، باید از روش‌های مختلفی با نام‌های شامل "NS" استفاده کنید.

در استاندارد DOM سطح 1، روش normalize() بخشی از Element Interface است. در استاندارد سطح 2، normalize() بخشی از Node Interface است. تمام گره‌های Element از این روش ارث می‌برند و همچنان می‌توانند از آن استفاده کنند.

مطالعه: گره‌های HTML DOM

در HTML DOM (مدل مستند مستند)، هر بخش یک گره است:

  • مستند خود گره مستند است
  • تمام عناصر HTML گره عناصر هستند
  • تمام ویژگی‌های HTML گره ویژگی هستند
  • متن داخل عناصر HTML گره متن هستند
  • نظرات گره نظرات هستند

عنصر Element

در HTML DOM، عنصر Element نمونه‌ای از عناصر HTML است.

عنصر Element می‌تواند زیرگره‌هایی با نوع گره عنصر، گره متن، یا گره نظرات داشته باشد.

مجموعه NodeList نمونه‌ای از لیست گره‌ها است، مانند مجموعه زیرگره‌های عناصر HTML.

عناصر نیز می‌توانند ویژگی داشته باشند. ویژگی‌ها نقطه ویژگی (در بخش بعدی مشاهده می‌شود).