آموزش کامل و حرفه ای DOM در زبان جاوا اسکریپت (بخش دوم)
جلسات دوره
مدرس:
مهدی عباسی
18
سال سابقه برنامهنویسی و تدریس برنامهنویسی
کسب مقامهای اول و دوم کشوری در مسابقات برنامهنویسی
مهدی عباسی هستم، مسلط به حداقل ۲۰ زبان مطرح برنامه نویسی به صورت پیشرفته، مدیر عامل شرکت آریا نرم افزار و بنیانگذار آکادمی درسمن، مسلط به تدریس دروس تخصصی کاردانی و کارشناسی کامپیوتر، پایگاه داده ها، برنامه نویسی پیشرفته، مبانی برنامه نویسی، مباحث ویژه طراحی وب و .... مشاهده رزومه
معرفی مدلهای BOM و DOM و پویایی عناصر صفحه وب
معرفی مدل DOM (Document Object Model)
DOM ساختاری است که توسط HTML ایجاد میشود و این امکان را به وجود میآورده که زبانهای برنامه نویسی با اشیاء برنامه ارتباط برقرار کنند. برای این جلسه page3 با پسوند html را ایجاد میکنیم.
اولین کاری که انجام میدهیم در بخش body چندین اِلمان در قالب (تصاویر، باکس متن، تگ لینک و...) به صفحه اضافه میکنیم تا عملیاتی را بر روی این اِلمانها انجام دهیم.
<img src="img/1.webp" width="200" height="200" />
<img src="img/2.webp" width="200" height="200" />
<img src="img/3.webp" width="200" height="200"/>
<img src="img/4.webp" width="200" height="200">
<div>
test1
</div>
<div>
test2
</div>
<a href="https://darsman.com">درسمن</a>
<a href="https://google.com">گوگل</a>
Document.images
اولین دستور Document.images است که میتوان به همه تصاویر داخل صفحه دسترسی پیدا کرد به این صورت که همه تصاویر را درون یک متغییر قرار میدهیم، یک حلقه for ایجاد میکنیم که به تعداد موجودیتهای داخل متغییر حرکت کند و داخل حلقه تکرار در هر دور به تصاویر دسترسی پیدا کرده و به هر کدام یک Border دهد.
Var images=document.images;
for(let i=0;i<=images.length;i++)
{
images[i].style.border=”1px solid #000”;
}
Document.Links
به کمک دستور Document.Links به روش بالا میتوانیم به همه لینکهای داخل صفحه دسترسی پیدا کنیم و یک عملیاتی را بر روی لینکها انجام دهیم.
در این بین دستور جدید با نام setAttribute را یاد خواهیم گرفت، از این دستور برای اضافه کردن یک صفت به اِلمانهای داخل صفحه استفاده میشود.
این دستور دو ورودی دریافت میکند، ورودی اول نام صفتی که میخواهیم اضافه کنیم و در ورودی دوم مقدار صفت را مینویسیم.
.setAttribute(“نام صفت”,”مقدار صفت”);
مثال:
var links=document.links;
for(let i=0;i<=links.length;i++)
{
links[i].setAttribute(“target”,”blank”);
}
با استفاده از صفت target با مقدار blank لینکها به این روش عمل میکنند کهه برای باز شدن در یک تب دیگر مرورگر باز شوند.
Document.title
با استفاده از دستور document.title به عنوان صفحه دسترسی خواهیم یافت.
var title=document.title;
alert(title);
Document.URL
به کمک دستور document.URL به آدرس صفحه دسترسی خواهیم یافت.
var url=document.URL;
alert(url);
addEventLisener
ما میتوانیم در صفحه به یک اِلمان دسترسی پیدا کنیم و یک رویدادی را برای آنها تعریف کنیم، رویدادهایی همانند کلیک ، دوبل کلیک و ...
ابتدا یک اِلمان با یک ایدی مشخص را پیدا کرده و با رویداد کلیک کردن، تابع
بی نامی را که پیامی را نمایش میدهد را اجرا کند.
var img1=document.getElementById("img1");
img1.addEventListener("click",function(){alert("Hello")})
در حالت بعدی میتوان چندین تابع را فراخوانی کرد.
var img1=document.getElementById("img1");
img1.addEventListener("click",function(){alert("Hello")})
img1.addEventListener("click",fun1);
function fun1 (){
alert("hello");
}
حالتی دیگر وجود دارد که میخواهیم برای رویداد کلیک نام یک تابعی را صدا بزنیم که دارای ورودی است.
در این حالت به صورت قبل عمل نمیکنیم که ورودیهای تابع را جلوی نام تابع در پرانتز بنویسیم.
برای رویداد کلیک یک تابع بدون نام مانند بالا ایجاد میکنیم و در عملیات تابع بی نام، نام تابع با ورودی درون پرانتز جلوی آن مینویسیم.
img1=document.getElementById("img1");
img1.addEventListener("click",function(){fun2(".com")});
function fun2 (name){
alert("darsman"+name);
}
نظر شما در تصمیم دیگران اثرگذار است.
لطفا برای همراهان درسمن و بهتر شدن دوره نظر خود را بنویسید.