عناصر HTML DOM

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو

این صفحه به شما آموزش می‌دهد که چگونه عناصر HTML را در یک صفحه HTML بیابید و به آنها دسترسی داشته باشید.[۱]

پیدا کردن عناصر HTML

اغلب، شما با جاوا اسکریپت می‌خواهید که عناصر HTML را تغییر دهید.

برای انجام اینکار شما می‌بایست ابتدا عناصر را بیابید. راه‌های مختلفی برای انجام این کار وجود دارد:

  • پیدا کردن عناصر HTML با شناسه (id)
  • پیدا کردن عناصر HTML با نام تگ
  • پیدا کردن عناصر HTML با نام کلاس (class)
  • پیدا کردن عناصر HTML با مجموعه اشیاء (objects) در HTML

پیدا کردن عناصر با استفاده از شناسه (id)

ساده‌ترین راه برای پیدا کردن یک عنصر HTML در DOM استفاده از id عنصر است.

این مثال عنصری با id برابر با "intro" را می‌یابد: id="intro"

مثال

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


مشاهدهٔ نتیجه


اگر عنصر پیدا شود، متد عنصر را به صورت یک شیء (در متغیر myElement) برمی‌گرداند.

اگر عنصر پیدا نشود، متغیر myElement برابر با null خواهد بود.

پیدا کردن عناصر HTML با نام تگ

این مثال تمامی عناصر <p> را پیدا می‌کند:

مثال

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


مشاهدهٔ نتیجه


این مثال عنصری را با id برابر با "main" پیدا می‌کند و سپس تمامی عناصر <p> درون عنصر "main" را می‌یابد.

مثال

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


مشاهدهٔ نتیجه


پیدا کردن عناصر HTML با استفاده از نام کلاس

اگر شما می‌خواهید تمامی عناصری را که با نام کلاس برابری دارند را پیدا کنید، از متد getElementsByClassName() استفاده کنید.

این مثال لیستی از تمام عناصر با نام class="intro" را برمی‌گرداند.

مثال

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


مشاهدهٔ نتیجه


پیدا کردن عناصر با نام کلاس در مرورگر اینترنت اکسپلور نسخه ۸ یا قدیمی‌تر کار نمی‌کند.

پیدا کردن عناصر HTML با استفاده از انتخابگرهای CSS

اگر شما می‌خواهید که تمامی عناصر HTML ای را که یک انتخابگر به خصوص (شناسه (id)، نام کلاس (className)، نوع (type)، خاصیت‌ها (attributes)، مقادیر خاصیت‌ها و…) دارند پیدا کنید از متد querySelectorAll() استفاده کنید.

این مثال لیستی از تمام عناصر <p> با نام کلاس برابر با "intro" است را برمی‌گرداند.

مثال

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


مشاهدهٔ نتیجه


متد querySelectorAll() در مرورگر اینترنت اکسپلور نسخه ۸ یا نسحه‌های قدیمی‌تر کار نمی‌کند.

پیدا کردن عناصر HTML با مجموعه اشیاء HTML (HTML Object Collections)

این مثال در مجموعه فرم‌ها، عنصر فرم را با id برابر با (id="frm1") را پیدا می‌کند، و مقادیر تمام عناصر را نمایش می‌دهد:

مثال

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


مشاهدهٔ نتیجه


اشیاء HTML (و مجموعه اشیاء) زیر نیز قابل دسترس هستند:

امتحان کنید اشیاء HTML
document.anchors
document.body
document.documentElement
document.embeds
document.forms
document.head
document.images
document.links
document.scripts
document.title

تمرینات جاوا اسکریپت

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.



منابع آموزشی