عناصر HTML DOM در JavaScript

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

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

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

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

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

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

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

پیدا کردن عنصر HTML توسط شناسه
 var myElement = document.getElementById("intro"); 
مشاهده مثال

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

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

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

پیدا کردن عناصر HTML با نام برچسب
 var x = document.getElementsByTagName("p"); 
مشاهده مثال

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

پیدا کردن عناصر HTML با نام برچسب
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
مشاهده مثال

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

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

پیدا کردن عناصر HTML با نام کلاس
var x = document.getElementsByClassName("intro"); 
مشاهده مثال

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

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

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

پیدا کردن عناصر HTML توسط CSS Selectors
var x = document.querySelectorAll("p.intro"); 
مشاهده مثال

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

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

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

پیدا کردن عناصر HTML توسط مجموعه مقالات HTML
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;
مشاهده مثال

 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری JavaScript

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط