عناصر 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" را می‌یابد.

مثال[ویرایش | ویرایش]

var x = document.getElementById("main");
var 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") را پیدا می‌کند، و مقادیر تمام عناصر را نمایش می‌دهد:

مثال[ویرایش | ویرایش]

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 (و مجموعه اشیاء) زیر نیز قابل دسترس هستند:

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

تمرینات جاوا اسکریپت[ویرایش | ویرایش]

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



منابع آموزشی[ویرایش]