مشخصات مقاله
-
3409
-
0.0
-
6625
-
0
-
0
آموزش HTML DOM Elements
HTML DOM Elements
این مبحث نحوه ی پیدا کردن و دسترسی به تگ های HTML در یک سند HTML را به شما آموزش می دهد.
نحوه ی دستیابی به المان های HTML
کاربرد عمده ی زبان جاوا اسکریپت، مدیریت و دستکاری المان های HTML است.
برای این منظور، ابتدا باید المان را یافته و به آن دسترسی پیدا کنید. روش های مختلفی برای پیدا کردن المان HTML وجود دارد که به شرح زیر می باشد:
دسترسی به المان HTML به وسیله ی ID (شناسه)
دستیابی به المان HTML با کمک اسم تگ (tag name)
پیدا کردن المان HTML با استفاده از اسم کلاس
دسترسی به المان HTML با گزینش گرهای CSS
پیدا کردن المان دلخواه به وسیله ی مجموعه اشیا (object collection) HTML
دسترسی به المان HTML به وسیله ی id (شناسه)
آسان ترین روش برای دسترسی به المان مورد نظر در DOM، استفاده از شناسه ی (id) المان مربوطه است.
این مثال المانی که شناسه ی آن id="intro" است را پیدا می کند:
نمونه یک
1 2 3 | var myElement = document.getElementById("intro");document.getElementById("demo").innerHTML ="The text from the intro paragraph is " + myElement.innerHTML;<button></button> |
در صورت یافت شدن المان مودرنظر، متد المان را به صورت شی برمی گرداند.
چنانچه المان مورد نظر یافت نشد، myElement مقدار null را در خود برخواهد گرداند.
پیدا کردن المان HTML به وسیله ی اسم تگ (tag name)
این مثال کلیه ی المان های <p> را (پیدا کرده و) بازیابی می کند:
نمونه دو
1 2 3 | var x = document.getElementsByTagName("p");document.getElementById("demo").innerHTML ='The first paragraph (index 0) is: ' + x[0].innerHTML;<button></button> |
این مثال المانی که شناسه ی آن "main"می باشد را یافته، سپس تمامی عناصر یا تگ های
داخل آن را بازایابی می کند:
نمونه سه
1 2 3 4 | var x = document.getElementById("main");var y = x.getElementsByTagName("p");document.getElementById("demo").innerHTML ='The first paragraph (index 0) inside "main" is: ' + y[0].innerHTML;<button></button> |
یافتن المان های HTML به وسیله ی اسم کلاس (class name)
اگر می خواهید به تمامی المان های HTML که دارای class name یکسان هستند دسترسی پیدا کنید، لازم است از متد ()getElementsByClassName استفاده نمایید.
این مثال آرایه ای از کلیه ی المان های که اسم کلاس آن "intro" (class="intro") می باشد را بازگردانی می نماید:
نمونه چهار
1 2 3 | var x = document.getElementsByClassName("intro");document.getElementById("demo").innerHTML ='The first paragraph (index 0) with class="intro": ' + x[0].innerHTML;<button></button> |
متاسفانه این روش دسترسی به المان در نسخه ی 8 و قدیمی تر IE پشتیبانی نمی شود.
دستیابی به المان های HTML به وسیله ی گزینش گرهای (CSS selector) CSS
برای دسترسی به تمامی المان های HTML که با گزینش گرهای مشخص شده CSS (شناسه ، اسم کلاس، نوع، خصیصه، مقادیر خصیصه ها و غیره ...) مطابقت دارند، باید از تابع ()querySelectorAll بهره جست.
این مثال آرایه ای از تمامی المان های
که اسم کلاس آن "intro" (class="intro") می باشد را بازمی گرداند:
نمونه پنج
1 2 3 | var x = document.querySelectorAll("p.intro");document.getElementById("demo").innerHTML ='The first paragraph (index 0) with class="intro": ' + x[0].innerHTML;<button></button> |
تابع ()querySelectorAll در ویرایش 8 و پیشتر مرورگر IE پشتیبانی نمی شود.
یافتن و بازیابی المان های HTML به وسیله ی مجموعه اشیا (object collection)
مثال زیر المان form که شناسه ی آن "frm1" ( (id="frm1"می باشد را در مجموعه المان های form یافته و مقدار تمامی المان ها را نمایش می دهد:
نمونه شش
1 2 3 4 5 6 7 8 9 | function myFunction() { 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; }<button></button> |
اشیا HTML زیر نیز قابل دسترسی می باشند:
document.anchors
document.body
document.documentElement
document.embeds
document.forms
document.head
document.images
document.links
document.scripts
document.title
مشاهده فیلم آموزشی
کلیه حقوق مادی و معنوی این مقاله متعلق به آموزشگاه تحلیل داده بوده و هر گونه استفاده غیر قانونی از آن پیگرد قانونی دارد.