تغییر Attributeها از طریق DOM :
DOM یا Document Object Model یک روش برای نمایش و مدیریت مستندات HTML و XML است. با استفاده از DOM، می توانید به سادگی به عناصر صفحه HTML دسترسی پیدا کنید و آنها را تغییر دهید. یکی از عملکردهایی که می توانید با استفاده از DOM انجام دهید، تغییر Attributeهای عناصر HTML است.
برای تغییر Attribute یک المان HTML، ابتدا باید به المان مورد نظر دسترسی پیدا کنید. به عنوان مثال، فرض کنید که می خواهید Attribute src تصویری را که در یک المان img وجود دارد تغییر دهید. شما می توانید این کار را با استفاده از کد زیر انجام دهید:
“`javascript
// پیدا کردن المان img
var img = document.querySelector(‘img’);
// تغییر Attribute src
img.setAttribute(‘src’, ‘new-image.jpg’);
“`
در کد بالا، ابتدا با استفاده از تابع querySelector، المان img را پیدا می کنیم. سپس با استفاده از تابع setAttribute، Attribute src را به مقدار جدیدی که در اینجا ‘new-image.jpg’ است تغییر می دهیم.
با استفاده از DOM، می توانید Attribute های بیشتری را نیز تغییر دهید. به عنوان مثال، فرض کنید که می خواهید Attribute href یک لینک را تغییر دهید. شما می توانید این کار را با استفاده از کد زیر انجام دهید:
“`javascript
// پیدا کردن المان لینک
var link = document.querySelector(‘a’);
// تغییر Attribute href
link.setAttribute(‘href’, ‘http://www.new-link.com’);
“`
در کد بالا، ابتدا با استفاده از تابع querySelector، المان لینک را پیدا می کنیم. سپس با استفاده از تابع setAttribute، Attribute href را به مقدار جدیدی که در اینجا ‘http://www.new-link.com’ است تغییر می دهیم.
بنابراین، با استفاده از DOM، می توانید به راحتی Attribute های عناصر HTML را تغییر دهید. این کار می تواند برای ایجاد افکت های جالب در صفحات وب، بهبود دسترسی وبسایت به موتورهای جستجو و بهبود تجربه کاربری مفید باشد.
