DOM HTML (DOM HTML)
در این صفحه «تغییر محتوای DOM» را یاد می گیریم. «DOM» مدل شی ء سند است. با آن می توان متن، ویژگی و خروجی صفحه را عوض کرد. مثال ها کوتاه هستند و شبیه کارهای روزمره در سایت.
عوض کردن محتوا با innerHTML
ویژگی «innerHTML» محتوای عنصر را تنظیم می کند. مثل عوض کردن متن یک برگه مدرسه.
document.getElementById("p1").innerHTML = "New text!";
همین کار برای عنوان هم ممکن است. کافیست عنصر را بگیری و متن را عوض کنی.
const element = document.getElementById("id01");
element.innerHTML = "New Heading";
تغییر ویژگی ها مثل src
ویژگی «attribute» یعنی مشخصه تگ؛ مثل src تصویر. آن را مستقیم تنظیم کن.
document.getElementById("myImage").src = "landscape.jpg";
محتوای داینامیک: تاریخِ الان
می توانی خروجی را از جاوااسکریپت بسازی. مثل چاپ تاریخ فعلی.
document.getElementById("demo").innerHTML = "Date : " + Date();
document.write(): فقط برای قبل از لود
این متد مستقیم در خروجی می نویسد. پس مراقب پاک شدن صفحه باش.
document.write(Date());
هشدار: بعد از لود کامل صفحه از document.write() استفاده نکن. صفحه را بازنویسی می کند.
گام های عملی
- عنصر هدف را با جستجوی عناصر DOM پیدا کن.
- بر حسب نیاز:
innerHTMLیا ویژگی را تغییر بده. - برای متن زنده، از تاریخ و زمان استفاده کن.
برای تغییرهای پیشرفته تر، بخش DOM متدها را ببین. همچنین این صفحه درباره «تغییر محتوای DOM» نمونه های پایه دارد.
جمع بندی سریع
innerHTMLمحتوا را سریع عوض می کند.- ویژگی ها را مستقیم تنظیم کن.
- برای خروجی زنده، از
Date()کمک بگیر. document.write()بعد از لود خطرناک است.