آموزش جاوااسکریپت (قسمت 10) مدل DOM و قدرت جاوا اسکریپت !

دسته بندی: جاوا اسکریپت
زمان مطالعه: 2 دقیقه
۱۹ اردیبهشت ۱۳۹۲

در این قسمت از آموزش جاوااسکریپت در مورد مدل DOM صحبت می‌کنیم . مدلی که با استفاده از اون می‌تونید توسط جاوااسکریپت تغیرات عمده ای رو در صفحات وب ایجاد کنید . در واقع مدل DOM یک نگاشت از تک تک عناصر و ویژگی‌های صفحه ی وب به اشیاء در زبان جاوااسکریپت رو تعریف کرده که شما با استفاده از این اشیاء می‌تونید همه ی تگ‌ها و عناصر صفحه وب رو تغیر بدید و دستکاری کنید و این همون چیزیه که به جاوااسکریپت قدرت و جذابیت داده : تغیرات پویا در صفحات وب !

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

::در این آموزش  موارد زیر رو مطرح خواهیم کرد :

  • مدل DOM چیست؟
  • ساختار درختی تگ‌ها و عناصر صفحه وب در Document Object Model
  • کاربردهای مدل DOM در جاوااسکریپت و صفحات وب
  • نحوه دسترسی به تگ‌ها و عناصر صفحه وب در جاوااسکریپت
  • معرفی متد‌ها getElementById و getElementsByTagName در javascript
:: همچنین مثال‌های زیر رو در این ویدیو با هم خواهیم نوشت :
  • یک صفحه وب ساده به عنوان بستر مثال‌های مطرح شده
  • تغیر رنگ متن و پس زمینه پاراگراف‌های دلخواه توسط جاوااسکریپت
  • افزودن مشخصه‌های CSS به تگ‌های دلخواه با استفاده از جاوااسکریپت
  • استفاده از متدهای getElementById و getElementsByTagName برای دسترسی به عناصر صفحه وب
  • شمارش تعداد تگ‌های از نوع خاص (مثلا تگ‌های p) در صفحه وب
  • یک اسکریپت تعاملی برای مخفی و ظاهر کردن عناصر دلخواه در صفحه وب با داشتن id آنها
 

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

پیشنهاد میشه برای داشتن کیفیت کامل ، این ویدیو رو به صورت تمام صفحه (Full Screen) ببینید :

این بخش از محتوا مخصوص اعضای سایت است
چه امتیازی به این مقاله می دید؟
نویسنده لقمان آوند
بیش از 15 سال هست که برنامه نویسی می کنم و از بین همه زبون هایی که کار کردم جاوا، اسمبلی و php رو دوست دارم. دانشجوی دکترای نرم افزارم و توی دانشگاه روی پردازش بیگ دیتا و پردازش موازی کار کردم و عاشق چالش از هر نوعیش هستم! سون لرن مثل بچه منه که 12 سال براش وقت گذاشتم، اینجا همه تلاش می کنیم از شروع یادگیری تا ورود به بازر کار حوزه برنامه نویسی و IT همراهتون باشیم.

نظرات کاربران

محمد حاتمی

سلام بینهایت ممنونم عالی بود

طاها زارع

با سلام و خدا قوت به خاطر وب سایت خوبتون
اگه میشه لطف کنید و کد ثبت نام در سایت رو که برای چند مورد مسابقه هم جهت ثبت نام بشه استفاده کرد برام بفرستید از زحمات شما متشکرم

کیوان علی محمدی

سلام شرمنده وقت ارسال کد به ایمیل رو به صورت رایگان نداریم؛در انجمن مطرح کنید دوستان کممک میکنن.

m.yMJJ

در نظر قبلی از HTML استفاده کردم ولی حواسم نبود حذف میشه! 😐

تصحیح میکنم :

تگ

<i>

چی میشه ؟ اصلا کلمه “i” مخفف چیست ؟ ❓

سجاد دریس

سلام
در زبان اچ تی ام ال i مخفف italic هست که متن مورد نظری که درون این تگ قرار می گیره رو به صورت کج نشون میده.

سجاد دریس

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

<script>
var str = "this is a italic text";
document.write(str.italics());
</script>
m.yMJJ

سلام

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

تگ img تو HTML در جاوا اسکریپت image میشه :

http://www.w3schools.com/jsref/dom_obj_image.asp

تگ چی میشه ؟ اصلا کلمه “i” مخفف چیست ؟ ❓

پیشاپیش تشکر 🙂

سجاد دریس

اینم ما بقی توابع که برای قالب بندی متن با استفاده از جاوااسکریپت وجود داره

<script>
var txt = "Hello World!";
document.write("<p>Big: " + txt.big() + "</p>");
document.write("<p>Small: " + txt.small() + "</p>");
document.write("<p>Bold: " + txt.bold() + "</p>");
document.write("<p>Italic: " + txt.italics() + "</p>");
document.write("<p>Fixed: " + txt.fixed() + "</p>");
document.write("<p>Strike: " + txt.strike() + "</p>");
document.write("<p>Fontcolor: " + txt.fontcolor("green") + "</p>");
document.write("<p>Fontsize: " + txt.fontsize(6) + "</p>");
document.write("<p>Subscript: " + txt.sub() + "</p>");
document.write("<p>Superscript: " + txt.sup() + "</p>");
document.write("<p>Link: " + txt.link("https://7learn.com") + "</p>");
document.write("<p>Blink: " + txt.blink() + " (does not work in IE, Chrome, or Safari)</p>");
</script>
f_talebi

padding left با margin left چه فرقی میکنه؟

وحید صالحی

margin فاصله حاشیه خارجی یک عنصر رو با عناصر اطرافش مشخص میکنه ولی padding حاشیه داخلی یه عنصر رو مشخص میکنه…

محمدسینا معراجیان

با استفاده از margin شما فاصله را تعیین می کنید اما با استفاده از padding فاصله ای ایجاد می کنید که اون فاصله بخشی از خود div تون می شه

kiansoft2000

ممنون

farvimgh

thank you so much

Mojtaba

سلام
خسته نباشید.
10 قسمت رو خوندم عالی بود. من از visual studio استفاده میکنم. چند تا از مثال ها رو اجرا میکنم بر می گرده به حالت اول. مثلا Show/Hide یا رنگ برای پس زمینه، یعنی رویدادها خوب عمل نمی کنه. دقیق هم مثال ها رو انجا میدم درست هم عمل میکنه ولی 1 ثانیه بعد از بین میره. به نظر شما مشکل کجاست؟
با تشکر

لقمان آوند

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

علیرضا اسمعیل زاد

با عرض سلام.میخواستم بدونم چطوری میشه یه چک باکس گذاشت و تعیین کرد وقتی که اون چک باکس تیک خورده باشه شرط اجرا شه؟

علیرضا اسمعیل زاد

ممنون از پاسخ و رسیدگیتون کامنت های بعد از منو هم تایید میکنید

meraj

سلام.
اگه میشه مثل جاوااسکریپت قسمت ابزار های کاربردی هم مطلب قرار بدید.
تشکر….

سجاد دریس

سلام
چشم.

REZATAKRO

دقیقا ته نداره
ممنون خیلی زیاد

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.