DOM سند (DOM Document)
اینجا «سند DOM» را می شناسیم. «سند (Document)» صاحب همه چیز در صفحه است. برای دسترسی به هر عنصر، از document شروع کن. هدف ما کار ساده با سند DOM است.
شیء سند DOM چیست؟
شیء (Object) یعنی موجودی با ویژگی و متد. شیء document نماینده کل صفحه است. با آن می توانی عناصر را پیدا کنی و تغییرشان دهی.
یافتن عناصر HTML
سه روش مهم: با id، با tag، و با class. هرکدام مجموعه ای از عنصرها را می دهد.
const byId = document.getElementById("demo");
const byTag = document.getElementsByTagName("p");
const byClass = document.getElementsByClassName("note");
تغییر دادن عناصر
می توانی محتوا، ویژگی یا استایل را عوض کنی. «ویژگی (Property)» یک مقدار در شیء است. «متد (Method)» یک عمل اجرایی است.
const el = document.getElementById("demo");
el.innerHTML = "سلام دنیا!";
el.setAttribute("title", "greeting");
el.style.color = "red";
نکته: innerHTML محتوا را جایگزین می کند. داده ناآمن را مستقیم وارد نکن.
افزودن و حذف عناصر
می توانی عنصر بسازی، اضافه کنی، حذف کنی یا جایگزین کنی. این برای ساختن رابط های پویا عالی است.
const p = document.createElement("p");
p.innerHTML = "یک پاراگراف جدید";
document.body.appendChild(p);
// حذف
// document.body.removeChild(p);
const oldEl = document.getElementById("demo");
const newEl = document.createElement("div");
newEl.innerHTML = "جایگزین شد";
document.body.replaceChild(newEl, oldEl);
رویدادها با سند DOM
«رویداد (Event)» یعنی اتفاقی مثل کلیک. می توانی کد واکنش را وصل کنی.
const btn = document.getElementById("runBtn");
btn.onclick = function() {
document.getElementById("demo").innerHTML = "کلیک شد";
};
چند ویژگی مفید سند
این ویژگی ها در جدول منبع آمده اند و کاربردی اند.
const pageTitle = document.title;
const pageUrl = document.URL;
const bodyEl = document.body;
گام های عملی
- از
documentشروع کن. - عنصر را پیدا کن.
- محتوا یا ویژگی اش را تغییر بده.
ادامه مسیر: سند DOM: متدها · سند DOM: عناصر.
جمع بندی سریع
documentصاحب کل صفحه است.- پیدا کردن: id، tag، class.
- تغییر محتوا با
innerHTML. - افزودن با
appendChild، حذف باremoveChild. - رویدادها را با
onclickوصل کن.