آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش 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" است را پیدا می کند:

نمونه یک

        var myElement = document.getElementById("intro");
        document.getElementById("demo").innerHTML =
        "The text from the intro paragraph is " + myElement.innerHTML;
امتحان کنید

در صورت یافت شدن المان مودرنظر، متد المان را به صورت شی برمی گرداند.
چنانچه المان مورد نظر یافت نشد، myElement مقدار null را در خود برخواهد گرداند.

پیدا کردن المان HTML به وسیله ی اسم تگ (tag name)

این مثال کلیه ی المان های <p> را (پیدا کرده و) بازیابی می کند:

نمونه دو

        var x = document.getElementsByTagName("p");
        document.getElementById("demo").innerHTML =
        'The first paragraph (index 0) is: ' + x[0].innerHTML;
امتحان کنید

این مثال المانی که شناسه ی آن "main"می باشد را یافته، سپس تمامی عناصر یا تگ های
داخل آن را بازایابی می کند:

نمونه سه

        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;
امتحان کنید

یافتن المان های HTML به وسیله ی اسم کلاس (class name)

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

نمونه چهار

        var x = document.getElementsByClassName("intro");
        document.getElementById("demo").innerHTML =
        'The first paragraph (index 0) with class="intro": ' + x[0].innerHTML;
امتحان کنید
توجه:

متاسفانه این روش دسترسی به المان در نسخه ی 8 و قدیمی تر IE پشتیبانی نمی شود.

دستیابی به المان های HTML به وسیله ی گزینش گرهای (CSS selector) CSS

برای دسترسی به تمامی المان های HTML که با گزینش گرهای مشخص شده CSS (شناسه ، اسم کلاس، نوع، خصیصه، مقادیر خصیصه ها و غیره ...) مطابقت دارند، باید از تابع ()querySelectorAll بهره جست.
این مثال آرایه ای از تمامی المان های

که اسم کلاس آن "intro" (class="intro") می باشد را بازمی گرداند:

نمونه پنج

        var x = document.querySelectorAll("p.intro");
        document.getElementById("demo").innerHTML =
        'The first paragraph (index 0) with class="intro": ' + x[0].innerHTML;
امتحان کنید

تابع ()querySelectorAll در ویرایش 8 و پیشتر مرورگر IE پشتیبانی نمی شود.

یافتن و بازیابی المان های HTML به وسیله ی مجموعه اشیا (object collection)

مثال زیر المان form که شناسه ی آن "frm1" ( (id="frm1"می باشد را در مجموعه المان های form یافته و مقدار تمامی المان ها را نمایش می دهد:

نمونه شش

       function myFunction() {
            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; }
امتحان کنید

اشیا HTML زیر نیز قابل دسترسی می باشند:

document.anchors
document.body
document.documentElement
document.embeds
document.forms
document.head
document.images
document.links
document.scripts
document.title


مشاهده فیلم آموزشی کلیه حقوق مادی و معنوی این مقاله متعلق به آموزشگاه تحلیل داده بوده و هر گونه استفاده غیر قانونی از آن پیگرد قانونی دارد.

  • 2775
  •    1740
  • تاریخ ارسال :   1394/08/13

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .