DOM نمونه ها (HTML DOM)
اینجا چند «نمونه DOM» می بینیم. «DOM (Document Object Model)» نقشه درختی صفحه است. یعنی می توانیم عناصر را مثل قطعه های لگو پیدا کنیم، بخوانیم، و عوض کنیم.
شیء سند (document)
با document می توانی عنوان و آدرس صفحه را بخوانی. مثل چک کردن اسم دفتر و نشانی روی جلد.
// عنوان صفحه;
const t = document.title;
console.log(t);
// آدرس کامل صفحه;
const u = document.URL;
console.log(u);
// آخرین زمان ویرایش فایل;
const lm = document.lastModified;
console.log(lm);
// دامنه میزبان صفحه;
const d = document.domain;
console.log(d);
// نمایش جفت های نام/مقدار کوکی ها;
const pairs = document.cookie.split("; ");
for (let i = 0; i < pairs.length; i++) {
console.log(pairs[i]);
}
یافتن عناصر با نام یا تگ
گاهی باید تعداد عناصر را بشماری. مثل شمردن تعداد پاراگراف های یک برگه.
// تعداد عناصر با نام مشخص;
const byName = document.getElementsByName("username");
console.log(byName.length);
// تعداد عناصر با تگ مشخص;
const byTag = document.getElementsByTagName("p");
console.log(byTag.length);
مجموعه پیوندها و لنگرها
«Anchor» همان تگ <a> با name یا href است. مثل نشانه گذاری صفحه کتاب.
// تعداد لنگرها در سند;
const aCount = document.anchors.length;
console.log(aCount);
// آدرس اولین لینک در سند;
const firstHref = document.links[0].href;
console.log(firstHref);
فرم ها و تصویرها
فرم ها ورودی می گیرند. تصاویر هم شناسه دارند. مثل فرم نام نویسی مدرسه و عکس پروفایل.
// تعداد فرم های موجود در سند;
const fCount = document.forms.length;
console.log(fCount);
// شناسه اولین تصویر;
const firstImgId = document.images[0].id;
console.log(firstImgId);
دستکاری CSS با DOM
می توانی ظاهر را تغییر دهی. «Visibility» یعنی دیده شدن. «Background» یعنی پس زمینه. مثل خاموش کردن چراغ یا عوض کردن رنگ دیوار.
// تغییر دیده شدن یک عنصر;
const box = document.getElementById("demo");
box.style.visibility = "hidden";
// تغییر رنگ پس زمینه یک عنصر;
const panel = document.getElementById("demo");
panel.style.backgroundColor = "lightblue";
نکته: قبل از اجرا، مطمئن شو عنصر با id درست در HTML وجود دارد. سپس اسکریپت را بعد از عنصر یا در رویداد load اجرا کن.
جمع بندی سریع
- document مثل شناسنامه صفحه است.
- با مجموعه ها سریع می شماری.
- CSS را مستقیم می توانی تغییر دهی.
- id درست را همیشه چک کن.
- در ادیتور تمرین کن و تکرار کن.
برای ادامه یادگیری، نمونه های DOM را نگه دار. همچنین صفحه Navigator و D3.js دید خوبی از کار با مرورگر می دهند.