DOM متدها (DOM Methods)
اینجا درباره متدهای DOM صحبت می کنیم. «متد (Method)» یعنی عمل؛ «ویژگی (Property)» یعنی مقدار. با DOM می توانی عنصرهای صفحه را پیدا کنی و محتوایشان را عوض کنی.
رابط برنامه نویسی DOM
در DOM، هر عنصرِ HTML یک شیء (Object) است. هر شیء «ویژگی» و «متد» دارد. ویژگی را می گیری یا تنظیم می کنی. متد را اجرا می کنی تا کاری انجام شود.
تعریف ساده: ویژگی مثل «نام» در کارنامه است؛ متد مثل «ویرایش نام» است.
متد getElementById
رایج ترین راهِ دسترسی به یک عنصر، استفاده از id است. این متد عنصرِ دارای آن id را برمی گرداند.
// فرض کن در صفحه عنصری با id="demo" داریم.
const el = document.getElementById("demo");
el.innerHTML = "Hello World!";
نکته: اگر id اشتباه باشد، مقدار null می گیری. سپس خطا می شود.
ویژگی innerHTML
innerHTML ساده ترین راه برای گرفتن یا جایگزینی محتوای یک عنصر است. می تواند متن و تگ های HTML را تنظیم کند.
const box = document.getElementById("demo");
box.innerHTML = "<strong>سلام!</strong>";
هشدار: محتوای ناآمن را مستقیم در innerHTML نریز. ممکن است خطر XSS باشد.
گام های عملی
- عنصر هدف را با id مشخص کن.
- با
getElementByIdعنصر را بگیر. - با
innerHTMLمحتوا را تنظیم یا دریافت کن.
ادامه مطالعه: DOM معرفی · شیء document در DOM.
جمع بندی سریع
- متدهای DOM کار انجام می دهند.
- ویژگی ها مقدار را می گیرند یا می گذارند.
getElementByIdعنصر را با id می یابد.innerHTMLمحتوا را سریع عوض می کند.