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


DOM در جاوا اسکریپت (قسمت دوم)
براي خريد اين درس نياز است وارد سايت شويد. در صورت نداشتن حساب کاربري عضو شويد.

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

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

DOM ساختاری است که توسط HTML ایجاد میشود و این امکان را به وجود می‌آورده که زبان‌های برنامه نویسی با اشیاء برنامه ارتباط برقرار کنند.
برای این جلسه page3 با پسوند html را ایجاد میکنیم.
اولین کاری که انجام میدهیم در بخش body چندین اِلمان در قالب (تصاویر، باکس متن، تگ لینک و...) به صفحه اضافه میکنیم تا عملیاتی را بر روی این اِلمان‌ها انجام دهیم.
   
<img src="img/1.jpg" width="200" height="200" />
    <img src="img/2.jpg" width="200" height="200" />
    <img src="img/3.jpg" width="200" height="200"/>
    <img src="img/4.jpg" 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);
}
 


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


مشخصات دوره


مدرس دوره : مهدی عباسی
تعداد جلسات 17 جلسه
مدت زمان 525 دقیقه
حجم دوره 1/21 گیگابایت
سطح مهارت مقدماتی تا متوسط
وضعیت دوره پایان یافته
تعداد دانشجویان 1462
: میانگین امتیاز

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

مهدی عباسی


درباره مدرس :

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