آشنایی با دستورات و روش‌های پرکاربرد تغییر HTML به کمک جاوااسکریپت

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

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

آشنایی با ساختار HTML و ارتباط جاوااسکریپت از طریق DOM

یک جدول ساده در HTML با تگ table‌ ساخته می‌شود. می‌توانید در فایلی با پسوند html از تگ یا سلکتور <table> استفاده کنید و ساخت جدول را آغاز کنید. برای کار کردن و تغییر دادن کدهای HTML که ممکن است به صفحات استاتیک یا دینامیک سایت‌ها مربوط باشند، می‌توان از JavaScript استفاده کرد که در این صورت ارتباط بین HTML و جاوااسکریپت از طریق DOM یا Document-To-Object برقرار می‌شود. در واقع ساختار صفحه‌ی وب که یک صفحه‌ی HTML است، به صورت اشیاء یا Object دیده شده و قابل تغییر است.

هر یک از عناصر صفحه در HTML، واسط DOM خاص خود را دارد که خواص آن را مشخص می‌کند و به عنوان مثال ویژگی‌هایی را به آن اختصاص می‌دهد که می‌توان ویژگی‌هایی مثل ظاهر المان باشد. به عنوان مثال المان جدول دارای واسطی به اسم HTMLTableElement است.

برای کار کردن با المان‌های صفحه‌ی وب، ابتدا باید المان را پیدا کنید. برای این کار می‌توانید از دستوری مثل نمونه‌ی زیر استفاده کنید که المانی با id مشخص شده یعنی search-box را پیدا می‌کند و در متغیر searchbox قرار می‌دهد:

const searchBox = document.getElementById('search-box');

در ادامه می‌توانید خواص المان مشخص‌شده را دریافت کنید یا تغییر دهید. به عنوان مثال برای دریافت مقدار یا عبارت داخل جعبه‌ی سرچ می‌توانید از searchBox.value استفاده کنید و برای قرار دادن نشانگر تایپ در این جعبه، می‌توانید از دستور searchBox.focus() استفاده کنید.

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

توجه کنید که برای کار با صفحات وب و طراحی وب، می‌توانید از DevTools مرورگرهایی مثل گوگل کروم یا موزیلا فایرفاکس استفاده کنید. در مورد هر دو مرورگر می‌توانید روی صفحه راست‌کلیک کنید و گزینه‌ی Inspect Element را انتخاب کنید. برای کدنویسی و تست کردن دستورات جاوااسکریپت، در ابزار توسعه و طراحی وب، نمایش Console را فعال کنید.

برای دریافت ریفرنس یک المان انتخاب شده، می‌توانید $0 را تایپ کنید و کلید Enter را فشار دهید.

کار با جداول HTML به کمک جاوااسکریپت

برای اضافه کردن سلول یا ردیف در جداول و همین‌طور اضافه کردن head به جداول موجود، می‌توانید ابتدا جدول موردنظر را در صفحه پیدا کنید و سپس از insertCell و insertRow و همین‌طور createTHead استفاده کنید. نیازی به استفاده از روش document.createElement() برای ایجاد المان‌های جدید در صفحه نیست و کار ساده‌تر است. به کدهای زیر توجه کنید که سلول‌ها و ردیف‌هایی را در جدول اضافه می‌کند و حتی در ابتدای جدول بخش هد ایجاد می‌کند:

const tableEl = document.querySelector('table');

const headerRow = tableEl.createTHead().insertRow();
headerRow.insertCell().textContent = 'Make';
headerRow.insertCell().textContent = 'Model';
headerRow.insertCell().textContent = 'Color';

const newRow = tableEl.insertRow();
newRow.insertCell().textContent = 'Yes';
newRow.insertCell().textContent = 'No';
newRow.insertCell().textContent = 'Thank you';

اسکرول کردن برای نمایش المان‌ها با scrollIntoView

اگر در صفحه‌ی وب لینکی وجود داشته باشد که آدرس آن به صورت #something باشد، با کلیک کردن روی آن، صفحه اسکرول می‌شود تا المانی با همین id را در ویوپورت قرار دهد. مثل المان زیر:

<div id="something"></div>

بنابراین برای اسکرول کردن و رفتن به سرتیترها و بخش نظرات و همین‌طور اسلایدهای یک اسلایدر، می‌توانید از لینک‌هایی با آدرس شناسه‌ی المان استفاده کنید. بنابراین جای تعجب نیست که می‌توان بدون جاوااسکریپت هم اسلایدر طراحی کرد!

اما نکته اینجاست که اگر المان پس از بارگذاری صفحه‌ی وب، اضافه و رندر شود، این روش عملکرد بی‌نقصی ندارد. برای حل کردن مشکل می‌توان اسکرول را با دستور scrollIntoView بازسازی کرد:

document.querySelector(document.location.hash).scrollIntoView();

پنهان کردن عناصر صفحه با hidden

یک روش متداول برای ناپدید کردن برخی المان‌های صفحه‌ی وب این است که از دستور زیر استفاده کنیم:

myElement.style.display = 'none'

اما روش ساده‌تر این است که ویژگی hidden را true کنیم. برای ظاهر کردن مجدد می‌توان از false استفاده کرد.

myElement.hidden = true

حذف و اضافه کردن ویژگی‌هایی مثل کلاس با toggle

اگر نیاز به دکمه‌ای دارید که با کلیک کردن روی آن، کلاسی به لیست کلاس‌های یک عنصر صفحه‌ی وب اضافه می‌شود و با کلیک کردن مجدد، کلاس اضافه شده، حذف می‌شود، می‌توانید از toggle استفاده کنید. با استفاده از toggle می‌توان هر ویژگی دیگری را نیز حذف و اضافه کرد.

myElement.classList.toggle('some-class')

اگر مرورگر مدرن و امروزی باشد، می‌توانید در دستور toggle آرگومان دومی هم اضافه کنید که کارکرد شرطی را به toggle اضافه می‌کند و در صورتی که شرط برقرار و صحیح باشد، کلاس جدید را اضافه می‌کند:

el.classList.toggle('some-orange-class', theme === 'orange');

پیدا کردن اولین مورد یک کلاس یا id و ... در صفحه با querySelector

استفاده از querySelector برای یافتن عناصر صفحه‌ی وب و تغییرات بعدی بسیار متداول است اما شاید از این دستور استفاده نکرده باشید. با استفاده از querySelector می‌توانید اولین المانی که کلاس یا سلکتور یا id و حتی المانی که ویژگی خاصی دارد را به راحتی پیدا کنید. به عنوان مثال اگر به دنبال اولین المان بخشی از صفحه با کلاس my-class هستید، از دستور زیر استفاده کنید:

myElement.querySelector('.my-class')

پیدا کردن المان بالادستی در صفحه‌ی وب با closest

با دستور querySelector می‌توانید یکی از سلکتورها را پیدا کنید و برای پیدا کردن المان بالادستی آن، می‌توانید از closest استفاده کنید. به عنوان مثال اگر بخواهید div دارای اولین h1 در صفحه را پیدا کنید، دستور زیر مناسب است:

document.querySelector('h1').closest('div');

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

اگر بخواهید موقعیت یکی از عناصر صفحه‌ی HTML را پیدا کنید و از آن استفاده‌‌های مختلفی کنید، دستور getBoundingClientRect مفید واقع می‌شود. این دستور مختصات x و y و همین‌طور عرض و ارتفاع المان و فاصله از بالا و راست و همین‌طور پایین و چپ را ارایه می‌کند اما دقت کنید که در تمام مرورگرها به درستی پشتیبانی نمی‌شود و همین‌طور موجب ترسیم مجدد می‌شود. لذا برای کارهای پیچیده مناسب نیست و ممکن است سرعت اسکرول کردن و رندرینگ صفحه وب را کاهش دهد.

به عنوان مثال خروجی این دستور به صورت زیر است:

و برای فراخوانی فاصله‌ی المان از بالای صفحه، می‌توانید از دستور زیر استفاده کنید:

el.getBoundingClientRect().top

چک کردن وجود کلاس‌ها با includes و matches

برای بررسی کردن اینکه یک المان دارای کلاس خاصی است یا خیر، می‌توانید از روش includes استفاده کنید. به عنوان مثال برای ایجاد یک دستور شرطی که در صورت وجود کلاس some-class در یک المان، دستورات بعدی را اجرا می‌کند، از کد زیر استفاده می‌شود:

if (myElement.className.includes('some-class'))
{
// do something
}

روش بهتر این است که از matches استفاده کنید و دستور شرطی را ساده‌تر و کوتاه‌تر بنویسید:

if (myElement.matches('.some-class'))
{
// do something
}

افزودن المان به صفحه وب با insertAdjacentElement

برای افزودن المان‌ها در صفحات HTML می‌توانید از دستور appendChild استفاده کنید که عنصر جدید را داخل عنصر مشخص شده اضافه می‌کند اما برای کنترل کردن محلی که عنصر جدید اضافه می‌شود، می‌توانید از insertAdjacentElement استفاده کنید.

دستور زیر معادل استفاده کردن از دستور appendChild است که عنصر جدید را در انتهای عنصر مادر اضافه می‌کند:

parentEl.insertAdjacentElement('beforeend', newEl)

اما می‌توانید به جای beforeend که به معنی قبل از پایان است، از beforebegin برای افزودن قبل از ابتدا و afterbegin برای افزودن پس از ابتدا و همین‌طور  afterend برای افزودن پس از پایان المان مادر استفاده کنید.

چک کردن وجود یک المان در المانی دیگر از HTML با contains

به عنوان مثال اگر بخواهید بررسی کنید که کلیک انجام شده توسط موس، داخل یک المان مودال بوده یا خارج از محدوده‌ی آن، می‌توانید از دستور زیر استفاده کنید و در ادامه با استفاده از یک شرط ساده، مودال را پنهان کنید. درست مثل قاب نمایش عکس‌ها به صورت بزرگ و تمام‌صفحه که با کلیک کردن بسته می‌شود. در این دستور متغیر modalEl به المان مودال اشاره می‌کند.

const handleClick = e => {
  if (!modalEl.contains(e.target)) modalEl.hidden = true;
};

دریافت مشخصه‌ها یا attribute تگ‌های HTML با getAttribute

برای دریافت کردن مشخصه‌های هر یک از سلکتورهای HTML می‌توانید از دستور getAttribute استفاده کنید. به عنوان مثال اگر بخواهید لینک یک تگ <a> را استخراج و استفاده کنید، می‌توانید از دستور زیر استفاده کنید که لینک متغیر aElement را در اختیار شما قرار می‌دهد:

aElement.getAttribute('href')

بدیهی است که برای استخراج کلاس المان هم می‌توان از class‌ به جای href استفاده کرد.

hackernoonسیاره‌ی آی‌تی