سبد خرید (0)

Dom چیست؟

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


مدل DOM یا (Document Object Model)

Wiki

زمانی که یک صفحه ی وب بارگذاری می شود، مرورگر از آن صفحه، یک مدل شیء گرا (Document Object Model) ایجاد می کند.

مدل DOM یک ساختار درختی از اشیاء موجود در صفحه HTML می سازد:

درخت DOM

DOM HTML tree

JavaScript با استفاده از مدل شیء گرای DOM، یک صفحه HTML داینامیک یا پویا ایجاد می کند:

  • JavaScript می تواند، تمام عناصر یک صفحه ی HTML را تغییر دهد.
  • JavaScript می تواند، تمام خصوصیات عناصر یک صفحه HTML را تغییر دهد.
  • JavaScript می تواند، تمام سبک های CSS یک صفحه HTML را تغییر دهد.
  • JavaScript می تواند، به تمام رویدادهای یک صفحه HTML واکنش نشان دهد.

پیدا کردن عناصر HTML

Wiki

خیلی اوقات می خواهید، با JavaScript عناصر HTML را دستکاری کنید.

برای انجام این کار، ابتدا باید عنصر مورد نظر را پیدا کنید. برای دسترسی به عنصر، راه های مختلفی وجود دارد:

  • پیدا کردن عنصر از طریق id
  • پیدا کردن عنصر، از طریق نام عنصر
  • پیدا کردن عنصر، از طریق نام class

پیدا کردن عنصر، از طریق id

Wiki

در مدل DOM، آسان ترین راه برای پیدا کردن یک عنصر، از طریق id یا شناسه آن است.

در مثال زیر، به عنصر با شناسه "intro" دسترسی پیدا کرده ایم:

مثال (Dom چیست؟)

var x=document.getElementById("intro");
خودتان امتحان کنید »

اگر عنصر مورد نظر پیدا شد، تابع ()getElementById آنرا مانند یک شی برمی گرداند (داخل متغیر x).

اگر عنصر مورد نظر پیدا نشد، محتوای متغیر x خالی (null) خواهد بود.


پیدا کردن عنصر، از طریق نام عنصر

Wiki

در مثال زیر، ابتدا به عنصر با شناسه "main" و سپس به تمام عناصر با نام <p> داخل "main" دسترسی پیدا کرده ایم:

مثال (Dom چیست؟)

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
خودتان امتحان کنید »

توجه: دسترسی به عنصر، از طریق نام class در IE نسخه 5، 6، 7 و 8 کار نمی کند.


آموزش DOM

در مطالب بعدی این فصل، به موارد زیر خواهیم پرداخت:

  • چگونه در مدل DOM محتوای (innerHTML) عناصر HTML را تغییر دهیم.
  • چگونه در مدل DOM ظاهر عناصر HTML را با استفاده از CSS تغییر دهیم.
  • چگونه در مدل DOM به رویدادهای یک صفحه، واکنش نشان دهیم.
  • چگونه در مدل DOM عناصر HTML را در یک صفحه، حذف و یا اضافه کنیم.

دیدگاه‌ها  

+3 # amin. 1394-07-11 15:21
سلام بر شما
ایا فقط با استفاده از اچ تی ام ال ، سی اس اس و جاوا اسکریپت می شود یک وب سایت داینامیک بدون استفاده از پی اچ پی یا دیگر زبان ها از این قبیل ساخت ؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # مهرداد صلاحی 1394-07-15 22:00
با سلام.
داینامیک در لغت به معنی پویا هست. در طراحی سایت به معنی سایت‌های تعاملی که قابلیت ذخیره و پردازش اطلاعات رو داره اطلاق میشه.

با استفاده‌ از HTML، CSS و جاوااسکریپت شما می‌تونید یه سایت رو راه‌اندازی کنید. ولی در این سایت نمی‌تونید اطلاعات از کاربر دریافت و ذخیره کنید. پردازش اطلاعات در این سایت‌ها عملا معنی نداره. کاربر فقط محتویاتی رو می‌بینه که براش به نمایش گذاشته شده،‌نه بیشتر و نه کمتر.

در کل میشه اینطوری گفت که بدون استفاده از یک زبان سمت سرور، امکان ساخت سایت‌های داینامیک معنی نداره. زبان‌هایی که شما نام بردی قسمت در سمت کلاینت کاربرد داره.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # Reza Bahrami 1394-01-29 13:21
سلام
من جاوا اسکریپت رو نخوندم و مستقیم سراغ یادگیری jquery رفتم حالا نیازی هست که برای یادگیری jquery آموزش dom و bom رو یاد بگیرم یا نه ؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+6 # امیر پهلوان صادق 1394-01-30 09:45
البته اگر با مفهوم DOM و BOM آشنا باشید، بسیار بهتر خواهد بود. اینکه بوسیله مدل DOM یک ساختار درختی از عناصر موجود در صفحه و ویژگی های آنها ایجاد می شود و دسترسی به عناصر را میسر می سازد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیرکیان 1393-12-15 11:41
در مورد این کد دستمون آقا یا خانم "s" میشه یکم توضیح بدید بیی زحمت
من که یکم گیج شدم
یعنی جاوا اسکریپت تمام عناصر صفحه را به صورت یک آرایه در نظر میگیرد؟!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # مظاهر نصوحی 1393-12-16 10:08
هر تابع یک سری پارامتر ورودی دارد و یک نوع داده را به عنوان خروجی بر می گرداند. ورودی تابع getElementsByTa gName یک رشته (string) و خروجی آن یک آرایه می باشد. این ارتباطی با در نظر گرفتن عناصر صفحه به شکل آرایه ندارد. بعد از محاسبات نتیجه به صورت آرایه به خروجی تحویل داده می شود. برای توضیح بیشتر موردی را در نظر بگیرید که چندین عنصر p در صفحه وجود داشته باشد، بنابراین چاره ای به جز این نیست که نتایج فراخوانی تابع به صورت آرایه باشد و تک تک عناصر p در آرایه باشد و شما با ذکر اندیس هر کدام از عناصر در آرایه به آن عنصر دستیابی داشته باشید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # S 1393-12-03 19:39
در مورد پیدا کردن عنصر، از طریق نام عنصر
getElementsByTagName("tag_name")
ذکر این مطلب الزامیه که برای استفاده از این دستور برای یک تگ مثل BODY باید به این صورت فراخوانی کرد:
getElementsByTagName("body")[0]
زیرا این دستور عناصر DOM را به صورت یک collection فراخوانی میکند(به صورت یک آرایه)
مثال:
document.getElementsByTagName("p").innerHTML="New text!";
کد بالا، هرگز عمل نخواهد کرد مگر اینکه بشکل زیر باشد:
document.getElementsByTagName("p")[0].innerHTML="New text!";
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # سامی0 1394-08-22 19:58
document.getEle mentsBycClassNa me هم همینطور
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1394-08-22 21:05
بله!!! با استفاده از این دستور میتوان المنت هایی رو که کلاس موردنظر رو دارن، انتخاب کرد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیرکیان 1393-12-22 12:08
نیگاه کنید من یکسری لیست دارم با class=target ؛میخام با استفاده از document.getekemenbyclassname به اینها دسترسی پیدا کنم؛چطوری میشود؟یعنی باید بگم آرایه چندمو میخام ،اگر کل بخام چه می شود؟؟؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مظاهر نصوحی 1393-12-23 09:45
این دقیقاً بستگی به کاری که دارید انجام می دهید داره. مثلاً فرض کنید می خواهید روی onClick این لیست یک کاری انجام بدهید.
در اینجا باید یک حلقه ی for بنویسید که روی عناصر این آرایه حرکت می کند و به تک تک آن ها تابع رویداد مرتبط با onClick را انتساب می دهد.
فرض کنید اولین عنصر را می خواهید باید با آرایه ی اندیس صفر کار کنید و ...
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # erer 1396-02-18 10:05
عالی بود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی JavaScript

بستن
مدرس:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!