JavaScript HTML DOM عناصر

این فصل به شما یاد می‌دهد که چگونه عناصر HTML در صفحه HTML را پیدا کنید و به آنها دسترسی پیدا کنید.

یافتن عناصر HTML

معمولاً، با استفاده از JavaScript، نیاز به عمل کردن بر روی عناصر HTML دارید.

برای دستیابی به این هدف، ابتدا باید این عناصر را پیدا کنید. چندین روش برای انجام این کار وجود دارد:

  • یافتن عناصر HTML از طریق id
  • یافتن عناصر HTML از طریق نام برچسب
  • یافتن عناصر HTML از طریق نام کلاس
  • یافتن عناصر HTML از طریق انتخاب‌گر CSS
  • یافتن عناصر HTML از طریق مجموعه HTML

یافتن عناصر HTML از طریق id

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

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

مثال

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

آموزش عملی

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

اگر عنصری پیدا نشد، myElement شامل null.

یافتن عناصر HTML از طریق نام برچسب

در این مثال، تمام عناصر <p> عنصر:

مثال

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

آموزش عملی

در این مثال، عنصر با id="main" پیدا می‌شود، سپس تمام عناصر داخل "main" پیدا می‌شوند: <p> عنصر:

مثال

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

آموزش عملی

یافتن عناصر HTML از طریق نام کلاس

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

در این مثال، لیست تمام عناصر شامل class="intro" بازگردانده می‌شود:

مثال

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

آموزش عملی

یافتن عناصر از طریق نام کلاس برای Internet Explorer 8 و نسخه‌های قدیمی‌تر آن مناسب نیست.

یافتن عناصر HTML از طریق انتخاب‌گر CSS

اگر نیاز دارید تا تمام عناصر تطابق یافته با انتخاب‌گر CSS مشخصی (id، نام کلاس، نوع، ویژگی، مقدار ویژگی و غیره) را پیدا کنید، از querySelectorAll() روش.

در این مثال، تمام عناصر با class="intro" بازگردانده می‌شوند: <p> لیست عناصر:

مثال

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

آموزش عملی

querySelectorAll() این نسخه مناسب برای Internet Explorer 8 و نسخه‌های قدیمی‌تر آن نیست.

با استفاده از selector HTML object به HTML object دسترسی پیدا کنید

این مثال به دنبال element با id="frm1" در collection forms است و سپس تمام values elements را نمایش می‌دهد:

مثال

var x = document.forms["frm1"];
var text = "";
 var i;
برای (i = 0; i < x.length; i++) {
    text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;

آموزش عملی

در اینجا نیز می‌توان به HTML objects (و مجموعه‌های object) دسترسی داشت: