درسمن - بزرگترین ارائه دهنده دوره های آموزش برنامه نویسی و مهندسی

صفحه اصلی / دوره‌های آموزشی / دوره آموزش جاوا اسکریپت-مقدماتی تا متوسط / DOM در جاوا اسکریپت (قسمت اول)

DOM در جاوا اسکریپت (قسمت اول)

برای خرید این درس نیاز است وارد سایت شوید. در صورت نداشتن حساب کاربری عضو شوید.

معرفی مدل‌های BOM و DOM و پویایی عناصر صفحه وب

معرفی مدل DOM (Document Object Model)

در صفحه‌ی ایجاد شده در بخش body عناصری را همانند زیر اضافه میکنیم.

<div>
        <img src="images/1.jpg"/>
        <img src="images/2.jpg"/>
        <img src="images/3.jpg"/>
        <img src="images/4.jpg"/>
  </div>
    <h1>
        darsman.com
    </h1>
    <p>
        دروه آموزشی زبان برنامه نویسی جاوا اسکریپت
    </p>
    <ul>
        <li>Item1</li>
        <li>Item2</li>
        <li>Item3</li>
        <li>Item4</li>
    </ul>

در زبان برنامه نویسی Html یک ساختار درختی با نام DOM و جود دارد، در این ساختار تگ های داخل یک صفحه دارای والد و فرزندی هستند.

برای مثال در عناصری که بالا ایجاد کردیم همین ساختار وجود دارد.

عنصر div دارای والدی به نام body است و همین عنصر فرزندی به نام img دارد.

در بحث ساختار DOM عناصر میتوانند همزاد باشند، در بالا تگ div با تگ p همزاد است چرا که در یک رده قرار گرفته اند و هر دو فرزند body میباشند.

پیدا کردن عناصر در صفحه:

از ایجاد این ساختار هدفی وجود دارد که چگونه میتوان یک عنصر را حذف کرد یا اینکه اضافه کرد.

که با استفاده از زبان برنامه نویسی جاوا اسکریپت در بحث DOM ممکن میشود.

برای کار کردن با DOM از کلاس Document استفاده میکنیم با استفاده از این کلمه ما میتوانیم به همه اشیاء داخل صفحه دسترسی پیدا کینم.

حال برای اینکه به یک عنصر در صفحه دسترسی پیدا کینم از کلمه کلیدی .getElementById() بعد از document استفاده میکنیم که برای دسترسی نیاز به id عنصر مورد نظر دارد.

document.getElementById("id");

در ادامه بعد از اینکه عنصر مورد نظر را پیدا کرد درون یک متغییر قرار میدهیم و تغییراتی را بر روی آن متغییر اعمال میکنیم.

var element=document.getElementById("img1");
element.style.border="1px solid #ffff00"

در صفحات html گاهی به وجود می‌آید که به چندین عنصر در صفحه دسترسی پیدا کنیم.

در این صورت از .getElementsByClassName() استفاده میکنیم.

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

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

var elemens=document.getElementsByClassName("img");
for (let index = 0; index < elemens.length; index++) {
const element = elemens[index];
element.style.border="1px solid #ff00ff"
}

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

var elemens2=document.getElementsByTagName("نام تگ");
for (let index = 0; index < elemens2.length; index++) {
const element = elemens2[index];
element.style.border="1px solid #ff00ff"
}

اضافه کردن عنصر به صفحه:

موضوع بعدی اضافه کردن تگ html با زبان جاوا اسکریپت به صفحه html است.

در بخش Script به کمک متد زیر ابتدا تگ html مورد نظرمان را ایجاد میکنیم و درون یک متغییر قرار میدهیم.

var tag=document.createElement("نام تگ");

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

var text=document.createTextNode("متن مورد نظر");

حال با استفاده از متد appendChild متغییر متنی را درون متغییر از نوع tag قرار میدهیم.

tag.appendChild(text);

و در ادامه به کمکه متد بالا به صورت زیر متغییر از نوع tag را به body اضافه میکنیم.

document.body.appendChild(tag);

حذف کردن عنصر در صفحه:

برای حذف کردن عکس در صفحه ابتدا با استفاده از id آنها را پیدا میکنیم و درون یک متغییر قرار میدهیم.

var item=document.getElementById("img1");

حال با استفاده از نام عنصر،والد این عنصر را هم پیدا میکنیم.

var div=document.getElementsByTagName("div");

با استفاده از شماره خانه تگ div مورد نظر عکس را حذف میکنیم.

div[0].removeChild(img1);

برچسب ها :

DOM در جاوا اسکریپت

نظرات

غزاله

از آموزش خوبتون تشکر میکنم بسیار عالی بود

برای پاسخ باید وارد شوید

مدیر سایت

سلام و درود خدمت شما، ممنونیم بابت نظرتون

نظر بدهید

نشانی ایمیل شما منتشر نخواهد شد .

برای ارسال نظر نیاز است وارد سایت شوید. در صورت نداشتن حساب کاربری عضو شوید.

دوره آموزش جاوا اسکریپت-مقدماتی تا متوسط

1 - مقدمه ای بر زبان برنامه نویسی جاوا اسکریپت

29 دقیقه / رایگان

2 - ساختار کلی برنامه در زبان جاوا اسکریپت

33 دقیقه / رایگان

3 - عملگرها در زبان جاوا اسکریپت

35 دقیقه / رایگان

4 - روشهای نمایش اطلاعات در خروجی در زبان جاوا اسکریپت

31 دقیقه / رایگان

5 - روشهای دریافت داده از ورودی و تغییر نوع داده در زبان جاوا اسکریپت

26 دقیقه / رایگان

6 - توابع و رویدادها در زبان جاوا اسکریپت

29 دقیقه / رایگان

7 - انواع رویدادها در زبان جاوا اسکریپت

42 دقیقه / رایگان

8 - دستورات کنترلی در زبان جاوا اسکریپت

25 دقیقه / رایگان

9 - حلقه های تکرار در زبان جاوا اسکریپت

20 دقیقه / رایگان

10 - اشیا و آرایه ها در زبان جاوا اسکریپت

41 دقیقه / رایگان

11 - شی گرایی در زبان جاوا اسکریپت

40 دقیقه / رایگان

12 - متد های کار با رشته ها و اعداد در زبان جاوا اسکریپت

35 دقیقه / رایگان

13 - متدهای کار با آرایه ها، تاریخ و زمان در جاوا اسکریپت

26 دقیقه / رایگان

14 - DOM در جاوا اسکریپت (قسمت اول)

33 دقیقه / رایگان

15 - DOM در جاوا اسکریپت (قسمت دوم)

25 دقیقه / رایگان

16 - BOM در جاوا اسکریپت (browser object model )

28 دقیقه / رایگان

17 - مدیریت خطا و استثنا در جاوا اسکریپت

27 دقیقه / رایگان

مشخصات دوره

مدرس دوره : مهدی عباسی

تعداد جلسات 17 جلسه

مدت زمان 470 دقیقه

حجم دوره 1/21 گیگابایت

سطح مهارت مقدماتی تا متوسط

وضعیت دوره درحال برگزاری

: میانگین امتیاز دوره

رایگان

برای دسترسی به این دوره وارد یا عضو شوید.

مهدی عباسی

درباره مدرس :

مدیر‌ عامل‌ شرکت آریا‌ نرم‌‌ افزار دارنده مدرک کارشناسی‌ ارشد مهندسی کامپیوتر 12‌ سال سابقه تدریس دروس کامپیوتر را در دانشگاههای دولتی، آزاد، پیام‌نور ملایر، شهیدشمسی‌پور تهران و تدریس برنامه‌نویسی در انیستیتو ایزایران، مجتمع فنی و موسسه راه‌آینده تهران دارا میباشد و تا به حال راهنمایی انجمنهای علمی دانشگاه و صدها پروژه دانشجویی را برعهده داشته است. تخصص اصلی: با داشتن گواهی‌نامه‌های معتبر تدریس از انیستیتو‌ ایزایران، راه آینده‌تهران و سازمان‌فنی‌حرفه‌ای، تدریس و آموزش‌ دروس کامپیوتر، ‌برنامه‌نویسی کامپیوتر و کلاسهای کنکور کارشناسی و کارشناسی‌ارشد میباشد.همچنین تجربه داوری و نظارت مسابقات برنامه‌نویسی کشوری‌ACM را در سالهای متعدد داشته و تیم مورد رهبری ایشان در 3سال متوالی مقام اول مسابقات کشوری را از آن خود کرده است.ایشان مقالاتی در زمینه شبکه‌های کامپیوتری، تکنیک‌های وزارت دفاع و ... به ثبت رسانده و مشاور و کارشناس در طراحی و برنامه نویسی بیش از 50‌برنامه کاربردی تحت وب و ویندوز و موبایل میباشد. افتخارات دیگر:کسب مقام دوم ایده‌های برتر در مسابقات استارت‌آپ و بکند کشوری را نام برد.

دانلود رزومه

فائزه نادعلی

ادامه مطلب