مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن ، جاوا اسکریپت در واقع به عنوان زبانی برای اعمال رفتارهای خاص و پویایی به صفحات وب، و همچنین تعاملی ساختن صفحات وب انتشار یافت، پس یکی از ویژگی ها و خصوصیات مهم در جاوا اسکریپت قابلیت دسترسی و تغییر عناصر HTML و محتوای آن ها در صفحات وب می باشد. که در ادامه ای این مبحث ما چگونگی دسترسی به عناصر HTML در جاوا اسکریپت را بررسی کرده ایم.
دسترسی به عناصر HTML در جاوا اسکریپت
دسترسی به عناصر HTML در جاوا اسکریپت نیز روش های متعددی دارد که در این بخش به آن می پردازیم.
پیدا کردن عناصر HTML در جاوا اسکریپت
با جاوا اسکریپت شما می توانید عناصر مختلف HTML را دستکاری کنید.
برای انجام این کار، ابتدا باید عناصر مورد نظر را در صفحه وب پیدا کنید. که چند راه برای انجام این کار وجود دارد:
- پیدا کردن عناصر HTML توسط شناسه (id).
- پیدا کردن عناصر HTML توسط نام تگ .
- پیدا کردن عناصر HTML توسط نام کلاس (class).
- پیدا کردن عناصر HTML توسط selectors .
- پیدا کردن عناصر HTML توسط مجموعه آبجکت HTML.
پیدا کردن عناصر HTML با استفاده از id
ساده ترین راه برای پیدا کردن یک عنصر HTML در DOM، استفاده از id عنصر است.
این مثال عنصری را با ویژگی “id=”intro پیدا می کند:
مثال : پیدا کردن عناصر با استفاده از id
| var myElement = document.getElementById("intro"); |
اگر عنصر یافت شود، این عنصر را به عنوان یک object (در myElement) باز می گرداند.
اگر عنصر یافت نشد، myElement حاوی صفر است.
پیدان کردن عناصر HTML با استفاده از نام عناصر (تگ ها)
در مثال زیر تمام عناصر <p> پیدا می شود:
مثال زیر عنصری با ویژگی “id=”main را پیدا کرده و سپس تمام عناصر <p> داخل “main” را نیز پیدا می کند:
مثال : نمونه دوم انتخابگر id
| var x = document.getElementById("main"); var y = x.getElementsByTagName("p"); |
پیدا کردن عناصر HTML با استفاده از نام Class
اگر می خواهید تمام عناصر HTML با نام یک نام کلاس را پیدا کنید، از () getElementsByClassName استفاده کنید.
این مثال یک لیستی از تمام عناصر را با ویژگی “class = “intro را باز می کند.
مثال : پیدا کردن عناصر با نام کلاس
| var x = document.getElementsByClassName("intro"); |
نکته : پیدا کردن عناصر بر اساس نام کلاس در Internet Explorer 8 و نسخه های قبلی کار نمی کند.
پیدا کردن عناصر HTML با استفاده از انتخابگرهای CSS
اگر می خواهید تمام عناصر HTML که با یک انتخابگر مشخص CSS مطابقت دارند (id، نام کلاس، نوع، صفات، مقادیر صفات و …) پیدا کنید، از متد () querySelectorAll استفاده کنید.
این مثال لیستی از تمام عناصر <p> با “class=”intro را باز می گرداند.
نکته : متد ()querySelectorAll در مرورگرهای Internet Explorer 8 و نسخه ی قدیمی تر کار نمی کند.
پیدا کردن عناصر HTML با مجموعه ای از آبجکت های HTML
این مثال عناصر form را با ویژگی “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 زیر (و مجموعه آبجکت) نیز قابل دسترسی هستند:
- document.anchors
- document.body
- document.documentElement
- document.embeds
- document.forms
- document.head
- document.images
- document.links
- document.scripts
- document.title
کلام آخر
می دانیم که جاوا اسکریپت به عنوان زبانی برای تعاملی کردن و کامل تر کردن صفحات وب و همچنین اعمال رفتارهای خاص به صفحات وب ارائه شده است، از این رو دانستن روش های دسترسی به عناصر HTML در جاوا اسکریپت از ضروریات کار با جاوا اسکریپت می باشد، از این رو در این بخش به این مباحث مهم پرداختیم.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
