صفحه اصلی / دوره‌های آموزشی / آموزش جاوا اسکریپت، شروعی ساده، پایانی قدرتمند / آموزش کامل و حرفه ای DOM در زبان جاوا اسکریپت (بخش اول)

آموزش کامل و حرفه ای DOM در زبان جاوا اسکریپت (بخش اول)

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

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

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

<div>
        <img src="images/1.webp"/>
        <img src="images/2.webp"/>
        <img src="images/3.webp"/>
        <img src="images/4.webp"/>
  </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);

نظر بدهید نظر شما در تصمیم دیگران اثرگذار است. لطفا برای ما و همراهان درسمن نظر خود را بنویسید.

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

آموزش جاوا اسکریپت، شروعی ساده، پایانی قدرتمند

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

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

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

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

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

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

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

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

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

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

6 - آموزش توابع (Functions) در جاوا اسکریپت

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

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

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

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

29 دقیقه / 35,000 تومان

9 - آموزش کامل رویدادهای صفحه کلید در جاوا اسکریپت

26 دقیقه / 35,000 تومان

10 - رویدادهای فرم در جاوا اسکریپت و کار با پنجره ها به صورت جامع

34 دقیقه / 35,000 تومان

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

25 دقیقه / 35,000 تومان

12 - حلقه های تکرار در جاوا اسکریپت

20 دقیقه / 35,000 تومان

13 - آموزش اشیاء (Objects) در جاوا اسکریپت

21 دقیقه / 35,000 تومان

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

11 دقیقه / 35,000 تومان

15 - آموزش تکمیلی کار با اشیاء و آرایه ها در زبان جاوا اسکریپت

25 دقیقه / 35,000 تومان

16 - آموزش شی گرایی در جاوا اسکریپت به همراه معرفی کلاس ها

22 دقیقه / 35,000 تومان

17 - متد های کار با رشته ها در جاوا اسکریپت

25 دقیقه / 35,000 تومان

18 - متد های کار با آرایه‌ ها و اعداد در جاوا اسکریپت

33 دقیقه / 35,000 تومان

19 - آموزش کار با تاریخ و زمان در زبان جاوا اسکریپت

18 دقیقه / 35,000 تومان

20 - آموزش کامل و حرفه ای DOM در زبان جاوا اسکریپت (بخش اول)

39 دقیقه / 35,000 تومان

21 - آموزش کامل و حرفه ای DOM در زبان جاوا اسکریپت (بخش دوم)

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

22 - آموزش کامل و حرفه ای DOM در زبان جاوا اسکریپت (بخش سوم)

31 دقیقه / 35,000 تومان

23 - آموزش کامل و حرفه ای DOM در زبان جاوا اسکریپت (بخش چهارم)

24 دقیقه / 35,000 تومان

24 - آموزش کامل و حرفه ای DOM در زبان جاوا اسکریپت (بخش پنجم)

22 دقیقه / 35,000 تومان

25 - پیاده سازی یک روز شمار بالا به پایین (تمرین جاوا اسکریپت)

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

26 - پیاده سازی toggle password (تمرین جاوا اسکریپت)

9 دقیقه / 35,000 تومان

27 - پیاده سازی یک اسلایدر بسیار زیبا (تمرین جاوا اسکریپت)

28 دقیقه / 35,000 تومان

28 - آموزش کامل و حرفه ای BOM در زبان جاوا اسکریپت (بخش اول)

33 دقیقه / 35,000 تومان

29 - آموزش کامل و حرفه ای BOM در زبان جاوا اسکریپت (بخش دوم)

35 دقیقه / 35,000 تومان

30 - مدیریت خطا و استثنا در جاوا اسکریپت (بخش اول)

23 دقیقه / 35,000 تومان

31 - مدیریت خطا و استثنا در جاوا اسکریپت (بخش دوم)

27 دقیقه / 35,000 تومان

32 - آموزش عبارات منظم (Regular Expression) در جاوا اسکریپت (بخش اول)

30 دقیقه / 35,000 تومان

33 - آموزش عبارات منظم (Regular Expression) در جاوا اسکریپت (بخش دوم)

22 دقیقه / 35,000 تومان

34 - آموزش عبارات منظم (Regular Expression) در جاوا اسکریپت (بخش سوم)

23 دقیقه / 35,000 تومان

35 - آموزش عبارات منظم (Regular Expression) در جاوا اسکریپت (بخش چهارم)

18 دقیقه / 35,000 تومان

مشخصات دوره

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

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

مدت زمان : 851 دقیقه

حجم دوره : 2/76 گیگابایت

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

وضعیت دوره : پایان یافته

تعداد دانشجویان : 1449

: میانگین امتیاز

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

مهدی عباسی هستم، مسلط به حداقل ۲۰ زبان مطرح برنامه نویسی به صورت پیشرفته، مدیر عامل شرکت آریا نرم افزار و بنیانگذار آکادمی درسمن، مسلط به تدریس دروس تخصصی کاردانی و کارشناسی کامپیوتر، پایگاه داده ها، برنامه نویسی پیشرفته، مبانی برنامه نویسی، مباحث ویژه طراحی وب و ....

مطالعه بیشتر

جدیدترین دوره ها