عناصر HTML DOM در JavaScript

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

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

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

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

• پیدا کردن عناصر HTML توسط شناسه
• پیدا کردن عناصر HTML توسط نام برچسب
• پیدا کردن عناصر HTML توسط نام کلاس
• پیدا کردن عناصر HTML توسط selectors CSS
• پیدا کردن عناصر HTML توسط مجموعه شیء HTML

پیدا کردن عنصر HTML توسط شناسه

ساده ترین راه برای پیدا کردن یک عنصر HTML در DOM، استفاده از عنصر است.
این مثال عنصر را با id="intro"پیدا می کند:

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

اگر عنصر یافت شود، این عنصر را به عنوان یک object (در myElement) باز می گرداند.
اگر عنصر یافت نشد، myElement حاوی صفر است.

پیدا کردن عناصر HTML با نام برچسب

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

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

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

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

پیدا کردن عناصر HTML با نام کلاس

اگر می خواهید تمام عناصر HTML با نام همان کلاس پیدا کنید، از getElementsByClassName () استفاده کنید.
این مثال به لیستی از تمام عناصر با class = "intro" بازمی گردد.

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

نکته: پیدا کردن عناصر بر اساس نام کلاس در Internet Explorer 8 و نسخه های قبلی کار نمی کند.

پیدا کردن عناصر HTML توسط CSS Selectors

اگر می خواهید تمام عناصر HTML که با انتخابگر CSS مشخص شده (شناسه، نام کلاس، نوع، صفات، مقادیر صفات و غیره) پیدا کنید، از روش querySelectorAll () استفاده کنید.
این مثال به لیستی از تمام عناصر <p> با class="intro" باز می گردد.

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

نکته: روش querySelectorAll () در Internet Explorer 8 و نسخه های قبلی کار نمی کند.

پیدا کردن عناصر HTML توسط مجموعه مقالات HTML

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

var x = document.forms["frm1"];
var text = "";
var i;
for (i = 0; i < x.length; i++) {
    text += x.elements[i].value + "
";
}
document.getElementById("demo").innerHTML = text;