• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید تا کنون 6251 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

سری آموزشی Ajax – جلسه دوم : مدل شیء گرای سند (DOM)

11 6408 ۱۰ فروردین ۹۳

سلام میگم به همه ی هموطنان عزیزم و مخصوصا سون لرنی های گل. امیدوارم که ایام به کامتون باشه. شاید کمی دیر دارم اینو میگم ولی واسه ما ایرانیا تا سیزده به در هنوز عیده پس عیدتون مبارک.

سال ۹۲ هم با همهٔ خوبی‌ و بدی‌ها و خاطرات خوب و بد گذشت. یه عده میگن سال خیلی‌ خوبی‌ بود و یه عده هم حتما سال ۹۲ رو سال بدی می‌دونن. عزیزانی از میان ما رفتن و عزیزانی تازه متولّد شدن. و بالاخره وارد سال ۹۳ شدیم. امیدوارم خوب شروع کنیم. با یه حسّ خوب. با یه امید قلبی به اینکه روز‌های خوبی‌ در پیشه. با امید به اینکه همه چی‌ درست می‌شه. با امید به روز‌های قشنگ. روز‌های سلامتی‌، موفقیت، پیشرفت، رسیدن به بالاترین مدارج در رشته‌های تحصیلی‌ و کاری مختلف، آشنا شدن با اونی‌ که می‌خواستی و ایمان داری که کنارش خوشبخت میشی‌ و رسیدن به عشق واقعی‌. از ته دلم آرزو می‌کنم که سال ۹۳ برای همهٔ ما یکی‌ از بهترین و خاطره انگیز‌ترین سال‌های عمرمون باشه.

خب بریم سراغ آموزش :

در این جلسه از آموزش AJAX به بررسی DOM و تعاریف مربوط به اون، سپس به بررسی DOM در زبان Javascript  و طریقه دسترسی به عناصر خواهیم پرداخت.

DOM

DOM مخفف عبارت Document Object Model به معنای مدل شیء گرای سند است، که به عنوان روشی برای دسترسی و مدیریت کردن تگ ها (المان ها)، صفات و محتوای آن ها در سندهای xml و html است. ما با استفاده از DOM ، قادر به حرکت در طول ساختار سند، افزودن ، اصلاح و یا حذف المان های یک سند می باشیم. DOM در کل یک ساختار شبه درختی از یک سند را برای ما ایجاد می کند که المان Document دارای بالاترین سطح (ریشه) در درختِ ایجاد شده است.

اگر سند HTML زیر را در نظر بگیریم :

درخت سند ما شکلی شبیه زیر را خواهد داشت.

Domحال می خواهیم با استفاده از مدل DOM به عناصر دستیابی، و آن ها را ویرایش کینم. اگر با جاوااسکریپت آشنایی داشته باشید، می دانید که روش های متفاوتی برای انجام اینکار وجود دارد. که اگر آن ها را دسته بندی کنیم به شکل زیر خواهند بود.

دستیابی و پیدا کردن عناصر 

  • document.getElementById
  • document.getElementsByTagName
  • document.getElementsByClassName
  • document.forms

ویرایش عناصر

  • element.innerHTML
  • element.attribute
  • element.setAttribute
  • element.style.property

ایجاد و حذف عناصر

  • document.createElement
  • document.removeChild
  • document.appendChild
  • document.replaceChild
  • document.write

البته، ما با استفاده از این متد ها، نه تنها فایل های html بلکه فایل های xml و json که در Ajax کاربرد دارند را نیز ویرایش کنیم.

خب حال یک مثال برای یک سند Html را با هم مرور می کنیم.

کدهای HTML زیر را در نظر بگیرید.

کد های فوق یک فرم ، که دارای textarea و یک دکمه است. کاری که میخواهیم با استفاده از جاوا اسکریپت انجام دهیم این است که پس از فشردن دکمه ی submit، متنی که درون textarea موجود است را به سند htmlمان با استفاده از مدل Dom اضافه کنیم.

اگر دقت کرده باشید، ما یک فایل js نیز به سندمان متصل کرده ایم، پس کدهای جاوا اسکریپت رو در اون فایل می نویسیم.

کدهای جاوااسکریپت :

ما در خط شماره 1 تابع Write رو هنگام لود صفحه فراخونی کردیم، سپس در خط 3 تابع Write رو ایجاد کردیم که کارش اجرای تابع addText هنگام فشردن دکمه submit در فرم است.

کار اصلی را تابع addText انجام میدهد. در خط 8 ابتدا متن textarea رو گرفتیم و اون رو در داخل یک متغییر با نام inText ریختیم. سپس در خط نهم یک textNode ایجاد کردیم که متنش همان متن textarea ما هست و اون رو هم درون یک متغییر با نام newText قرار دادیم.

خب شاید بپرسید textnode چیه؟ textNode در واقع هر متنی هست که شما در یک سند می بینید، یک متن ساده که درون هر تگی میتونه قرار بگیره، اگر به مثال اول برگردید، ما یک متنی درون تگ p قرار داده بودیم، اون متن همان textNode تگ p هست. یعنی در اصل، textNode مرز بین یک تگ و محتوای اونه. که دور محتوا رو فرا می گیره.

در خط 11 یک تگ p ایجاد کردیم، و در خط 12 متن textarea که همان textnode ماست را به عنوان فرزند تگ p اعلام کردیم.

سپس در خط 14هم تگ body رو درون یک متغییر با نام docBody قرار دادیم و در خط 15  متغیر newGraf که حاوی تگ p و متن textarea بود رو به عنوان فرزند docBody اعلام کردیم تا در قسمت body نمایش داده بشه.

در اینجا هم می تونید نتیجه کد رو ببینید.

خب دیدید که کار کردن با DOM سند بسیار آسونه، اما همین کار آسون به عنوان، قدرت جاوااسکریپت نامگذاری شده. که با استفاده از اون قادر به انجام هر کاری در سند هستیم. در جلسه آینده نیز به بررسی XML و طریقه دست یابی به المان های آن با استفاده از جاوا اسکریپت خواهیم پرداخت.

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 11 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

    سلام
    اول از همه تشکر دوم سوال
    1. تو خط 4 و 14 اون [0] واسه چیه؟
    2. تو خط 12 نمی شد به جای اینکه newText رو فرزند newGraf قرار بدیم مساوی با value اون قرار بدیم. منظورم چیزی شبیه به کد زیر


    چون newGraf همون تگ p جدید هست که ایجاک کردیم دیگه؟ پس میشه مستقیم با value او کارکرد؟

  • ‏‏

    مگه value یک تگ محتوای همون تگ نیست؟ مثل txtarea.value که همون متن txtarea رو بر میگردونه. پس دیگه چرا از textnode استفاده میشه؟ مثل خط 8 نمیشه تو خط های بعدی با خود inText کار کرد که دیگه احتیاجی به ایجاد textnode و متغیر newText نباشه؟

  • ‏‏

    سلام
    نمی دونم چرا نسخه pdf دانلود نمیشه!!

  • ‏‏
    bahram mohamadi(۶ تیر ۱۳۹۳)

    سلام ممنون از آموزش های خوبتون
    من در حال طراحی یه وب سایت نظرسنجی با تکنولوژی ASP.Net برای پروژه دانشگاه هستم.
    تو صفحه ای که باید نظرات ثبت بشه،سوالات از دیتابیس خونده میشه و تو یک جدول نمایش داده میشه.چطور می تونم Radio Button ها رو تو یک حلقه قرار بدم که کنار سوالات نمایش داده بشه.
    چطور باید از DOM در اینجا استفاده کنم؟مثلا می خوام برای هر سوال چهار تا Radio Button بذارم که هر کدومشون یه Value مشخص دارن.و تو سطر بعد همین چهار تا Radio Button یه Id دیگه داشته باشن که تکرای نباشه.
    خواهش می کنم راهنماییم کنید

  • ‏‏

    سلام خسته نباشید
    میخاستم بدونم که
    dom سایت ها یه سری هاشون قابل ویریشه و یه سری هاشون غیرقابل ویرایش این چطوریه؟؟؟

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram