نوع Document

آموزش جاوااسکریپت

مقدمه

در درس قبل با مفهوم کلی `Node` آشنا شدیم. نوع `Document` یکی از مهم‌ترین انواع گره در DOM است که از `Node` ارث‌بری می‌کند. این نوع، نماینده‌ی کل صفحه وب است و به عنوان ریشه درخت DOM عمل می‌کند. در محیط مرورگر، ما از طریق شیء سراسری document به نمونه‌ای از این نوع دسترسی داریم. این شیء نقطه ورود ما برای هرگونه تعامل با محتوای صفحه است. هر عملیاتی، از پیدا کردن یک عنصر گرفته تا تغییر عنوان صفحه، از طریق شیء document آغاز می‌شود.

پراپرتی‌های شیء Document

شیء document دارای پراپرتی‌های فراوانی است که اطلاعات مفیدی درباره سند و دسترسی سریع به گره‌های کلیدی آن را فراهم می‌کنند.

اطلاعات کلی سند

برخی پراپرتی‌ها اطلاعات عمومی و متادیتای مربوط به صفحه را در اختیار ما قرار می‌دهند.

  • title: عنوان سند را که در تگ `<title>` مشخص شده، نمایش می‌دهد یا تغییر می‌دهد.
  • URL: آدرس کامل (URL) صفحه فعلی را به صورت فقط-خواندنی برمی‌گرداند.
  • domain: نام دامنه سروری که سند از آن بارگذاری شده را برمی‌گرداند.
  • lastModified: تاریخ و زمان آخرین تغییر سند را به صورت رشته برمی‌گرداند.
Copy Icon JAVASCRIPT 
// Get document information
console.log(document.title);
console.log(document.URL);

// Change the document title
document.title = "New Page Title";

همانطور که در کد بالا مشاهده می‌شود، می‌توانیم به راحتی اطلاعاتی مانند عنوان و URL صفحه را بخوانیم. همچنین پراپرتی `title` قابل نوشتن است و با تغییر آن، عنوان تب مرورگر نیز به صورت پویا تغییر می‌کند.

دسترسی به عناصر اصلی

شیء `document` میانبرهایی برای دسترسی به گره‌های اصلی و مهم صفحه ارائه می‌دهد:

  • documentElement: همیشه به گره `<html>` در سند اشاره دارد.
  • head: به گره ` <head>` اشاره دارد.
  • body: به گره ` <body>` اشاره دارد.
Copy Icon JAVASCRIPT 
console.log(document.documentElement.tagName); // "HTML"
console.log(document.head.tagName);            // "HEAD"
console.log(document.body);                   // The <body> element object

این پراپرتی‌ها روشی سریع و مطمئن برای رسیدن به ریشه سند (`<html>`) و فرزندان اصلی آن یعنی `head` و `body` هستند و ما را از پیمایش در درخت بی‌نیاز می‌کنند.

پیدا کردن عناصر در سند

یکی از اصلی‌ترین وظایف شیء `document`، فراهم کردن متدهایی برای جستجو و پیدا کردن عناصر (elements) در صفحه است. در ادامه متدهای کلاسیک و پرکاربرد این کار را بررسی می‌کنیم.

متدهای کلاسیک انتخاب عنصر

این متدها از اولین نسخه‌های DOM وجود داشته‌اند و همچنان کاربرد گسترده‌ای دارند.

  • getElementById(id): یک عنصر را بر اساس مقدار `id` آن پیدا کرده و برمی‌گرداند. از آنجایی که `id` باید یکتا باشد، این متد همیشه یک عنصر یا `null` (اگر عنصری با آن `id` پیدا نشود) برمی‌گرداند.
  • getElementsByTagName(tagName): تمام عناصر با نام تگ مشخص شده (مثلاً 'p' برای تمام پاراگراف‌ها) را پیدا کرده و یک `HTMLCollection` زنده (live) از آن‌ها برمی‌گرداند.
  • getElementsByClassName(className): تمام عناصر با نام کلاس مشخص شده را پیدا کرده و یک `HTMLCollection` زنده برمی‌گرداند.

`HTMLCollection` یک کالکشن شبیه به آرایه است. به آن "زنده" یا "live" می‌گویند چون اگر عنصری در سند اضافه یا حذف شود، این کالکشن به صورت خودکار به‌روزرسانی می‌شود.

Copy Icon JAVASCRIPT 
// HTML: <p id="intro" class="highlight">...</p>
// Find by ID
const intro = document.getElementById('intro');

// Find by Tag Name
const allParagraphs = document.getElementsByTagName('p');
console.log(allParagraphs.length);

// Find by Class Name
const highlightedElements = document.getElementsByClassName('highlight');
console.log(highlightedElements[0]);

کد بالا روش استفاده از هر سه متد را نشان می‌دهد. getElementById() مستقیماً خود عنصر را برمی‌گرداند، در حالی که دو متد دیگر یک کالکشن برمی‌گردانند که می‌توانیم با ایندکس به اعضای آن دسترسی پیدا کنیم.

در این درس با شیء `document` به عنوان نقطه ورود به DOM، پراپرتی‌های اطلاعاتی آن و روش‌های کلاسیک برای پیدا کردن عناصر آشنا شدیم. این متدها اساس کار با محتوای صفحه هستند. اما این تازه شروع کار با عناصر است. در درس بعدی، به طور اختصاصی به سراغ نوع `Element` می‌رویم تا ببینیم پس از انتخاب یک عنصر، چه ویژگی‌هایی دارد و چه کارهایی می‌توانیم با آن انجام دهیم.