یکی از ویژگی‌های مهمی که جاوااسکریپت رو تا این حد به HTML پیوند زده، دسترسی به DOM توسط جاوااسکریپت هست. (در این مقاله فرض بر اینه که HTML رو بلدید). مثلا فرض کنید یه div تعریف کردیم که دوتا فرزند از نوع p داره، توسط جاوااسکریپت میتونیم به div و یا هرکدوم از p ها دسترسی پیدا کنیم، حالا چجوری؟

قبل از شروع کار فایل پروژه رو که طرح یه ماشین حساب سادست از لینک زیر دریافت کنید تا روی اون کار کنیم. این ماشین حساب ۳ بخش اصلی داره که تو شکل زیر مشخص شده. بخش ۱ مربوط به دکمه ها، بخش ۲ برای نمایش عملیات و بخش ۳ برای نمایش نتیجه عملیات.

دریافت فایل پروژه

فایل index.js رو باز کنید و کدهای زیر رو بنویسید. شیء window مربوط به همون صفحه ای هست که روش کار میکنید. با استفاده از window.onload میتونید به جاوااسکریپت بگید وقتی صفحه کاملا لود شد یه سری کارها رو انجام بده.

window.onload = function() {

}

توی قدم بعدی میخوایم بگیم وقتی کاربر روی هر کدوم از دکمه‌‌ها کلیک کرد یه اتفاقی بیفته. برای اینکار اول از همه باید بدونید که چجوری میتونیم به هر المنت توی صفحه دسترسی داشته باشیم. ۳ روش معمول برای اینکار وجود داره :

۱- document.getElementById : این متد، المنت‌ با id مورد نظر رو برمیگردونه. (خروجی این متد فقط یک المنت هست.)

var test = document.getElementById("test");

2- document.getElementsByTagName : این متد تمام المنت‌ها با اسم تگ مشخص شده رو برمیگردونه.

var divs = document.getElementsByTagName("div");

3- document.getElementsByClassName : این متد تمام المنت‌ها با اسم کلاس مشخص شده رو برمیگردونه.

var tests2 = document.getElementsByClassName("tests2");

حالا با استفاده از این متدها میتونیم تغییرات لازم روی المنت مورد نظرمون بدیم. مثلا توی کدمون چندین المنت با کلاس calc-button داریم. میایم با استفاده از کد زیر استایلشون رو دستکاری میکنیم و رنگ بک گراندشون رو به قرمز تغییر میدیم.

window.onload = function() {
	var btns = document.getElementsByClassName("calc-button");
	for (var i = 0; i < btns.length; i++) {
		btns[i].style.backgroundColor = "#F00";
	}
}

اول از همه میایم تمام المنت‌ها با کلاس calc-button رو میریزیم توی متغیر btns، بعد با استفاده از حلقه به تک تک این المنت‌ها دسترسی داریم. با استفاده از style هم میتونیم به استایل‌ها دسترسی داشته باشیم و اون ها رو تغییر بدیم.

*این قسمت تغییر رنگ برای پروژه ماشین حساب لازم نیست.

حالا که تونستیم به تمام دکمه ها دسترسی داشته باشیم میتونیم با استفاده از EventListener یه عملی براشون تعریف کنیم، یعنی به جاوااسکریپت میگیم حواست باشه وقتی اتفاق x برای المنت y افتاد عمل z رو انجام بده. یکم پیچیده شد. یه نگاه به کدهای پایین بندازید تا مفهومش واضح شه براتون.

	var calc_buttons = document.getElementsByClassName('calc-button');
	for (var i = 0; i < calc_buttons.length; i++) {
		calc_buttons[i].addEventListener('click', function() {
			calc_button_click(this);
		});
	}

تو کد بالا اول از همه اومدیم تمام المنت‌ها با کلاس calc-button رو توی متغیر calc_buttons ریختیم(تو HTML پروژه به تمام دکمه‌هامون کلاس calc-button داده بودیم پس الان تمام دکمه‌هامون رو داریم)، بعدش با استفاده از حلقه به تک تک دکمه‌هامون دسترسی داریم. حالا با استفاده از متد addEventListener به جاوااسکریپت میگیم هروقت روی این دکمه کلیک شد تابع calc_button_click رو اجرا کن و this رو به عنوان آرگومان بهش بفرست.(this همون دکمه‌ای هست که روش کلیک شده.)

قدم بعدیمون نوشتن تابع calc_button_click هست.

function calc_button_click(element) {
	var value = element.getAttribute('data-value');
	document.getElementById('calc-monitor-function').innerHTML = value;
}

با استفاده از getAttribute میتونیم به صفت‌های المنت دسترسی داشته باشیم. که دراینجا صفت data-value دکمه‌ای که کلیک شده رو میخونیم و تو متغیر value میریزیم. با استفاده از innerHTML میتونیم محتوای یه المنت رو تغییر بدیم که دراینجا مقدار value رو توی المنتی که آیدی calc-monitor-function داره مینویسیم. نتیجه‌ی کار این میشه که روی هر دکمه‌ای کلیک کردیم مقدارش توی المنتی که آیدی calc-monitor-function داره نمایش پیدا میکنه.

برای اینکه مقدار تمام دکمه‌هایی که میزنین دنبال هم نمایش پیدا کنن تابع calc_button_click رو به شکل زیر تغییر بدید.

function calc_button_click(element) {
	var value = element.getAttribute('data-value');
	var old_value = document.getElementById('calc-monitor-function').innerHTML;
	document.getElementById('calc-monitor-function').innerHTML = old_value + value;
}

هردفعه مقدار قبلی رو میگیریم و مقدار جدید رو به آخرش میچسبونیم و دوباره نمایش میدیدم.

الان فایل index.js پروژتون باید شبیه کد زیر باشه

window.onload = function() {
	var calc_buttons = document.getElementsByClassName('calc-button');
	for (var i = 0; i < calc_buttons.length; i++) {
		calc_buttons[i].addEventListener('click', function() {
			calc_button_click(this);
		});
	}
	
}

function calc_button_click(element) {
	var value = element.getAttribute('data-value');
	var old_value = document.getElementById('calc-monitor-function').innerHTML;
	document.getElementById('calc-monitor-function').innerHTML = old_value + value;
}

این پروژه تا رسیدن به ماشین حسابی که بتونه خوب کار کنه راه زیادی داره و توی این مقاله فقط بخشی که مربوط به DOM میشد رو بررسی کردیم. امیدوارم براتون مفید بوده باشه.