آشنایی با مدل شیء سند

تا اینجا همهٔ برنامه‌ها در خروجی متنی اجرا شدند. از این درس جاوااسکریپت به خانهٔ اصلی‌اش برمی‌گردیم: مرورگر. جاوااسکریپتِ مرورگر می‌تواند صفحهٔ HTML را بخواند، عناصرش را پیدا کند و محتوا، سبک و حتی ساختار آن‌ها را در لحظه تغییر دهد؛ همان کاری که هر برنامهٔ تعاملی وب انجام می‌دهد. پل بین کد شما و صفحه، مدل شیء سند (Document Object Model) یا به‌اختصار DOM است.

صفحه به‌شکل درخت

وقتی مرورگر یک فایل HTML را می‌خواند، تگ‌های آن را به ساختاری درختی از «گره‌ها» (Nodes) تبدیل می‌کند که DOM نامیده می‌شود. هر تگ یک شیء در این درخت است و DOM رابط برنامه‌نویسی آن است: از طریق جاوااسکریپت می‌توانید گره‌ها را بخوانید، تغییر دهید، اضافه یا حذف کنید. صفحه‌ای که می‌بینید همیشه بازتاب همین درخت است؛ تغییر گره یعنی تغییر صفحه — بدون بارگذاری دوباره.

این سند کوچک را در سراسر درس همراه داریم:

<!doctype html>
<html>
  <body>
    <h1 id="title">Shopping List</h1>
    <p class="note">Let's return before 6.</p>
    <ul>
      <li>Bread</li>
      <li>Cheese</li>
    </ul>
    <script src="app.js"></script>
  </body>
</html>

فایل app.js را کنار همین فایل بسازید و مثال‌های بعدی را در آن بنویسید؛ تگ script کد شما را به صفحه وصل می‌کند.

انتخاب عناصر با querySelector

اولین قدم در هر کار DOM، پیدا کردن عنصر است. شیء سراسری document نمایندهٔ کل صفحه است و متد querySelector با یک سلکتور CSS، اولین عنصر منطبق را می‌دهد:

const title = document.querySelector("#title");
const note = document.querySelector(".note");
const heading = document.querySelector("h1");

console.log(title === heading);
console.log(note.textContent);

این کد را اجرا کنید و زبانهٔ Console ابزار توسعه‌دهنده را ببینید:

• سلکتور "#title" عنصر با id="title" را می‌گیرد و سلکتور ".note" عنصر با class="note" را — دقیقاً همان قواعد سلکتور CSS.
• title و heading به یک عنصر اشاره می‌کنند، پس true چاپ می‌شود.
• ویژگی textContent متن درونی عنصر است؛ اینجا Let's return before 6. چاپ می‌شود.

اگر هیچ عنصری با سلکتور منطبق نشود، querySelector مقدار null برمی‌گرداند؛ فراخوانی متد روی null خطای TypeError می‌دهد.

تغییر محتوا و سبک

شیئی که querySelector می‌دهد یک شیء معمولی جاوااسکریپت است — همان درس اشیاء! ویژگی‌هایش را می‌خوانید و تغییر می‌دهید و مرورگر همان لحظه صفحه را به‌روز می‌کند:

const title = document.querySelector("#title");
title.textContent = "Movie Night List";
title.style.color = "teal";

const items = document.querySelectorAll("li");
for (const item of items) {
  item.classList.add("done");
}

آنچه در صفحه رخ می‌دهد:

1. متن تیتر به «Movie Night List» تغییر می‌کند.
2. رنگ متن تیتر با style.color فیروزه‌ای می‌شود؛ هر سبک CSS یک ویژگی در شیء style دارد.
3. querySelectorAll — با S جمع — همهٔ عناصر منطبق را به‌صورت آرایه‌مانند می‌دهد و حلقهٔ for...of از درس حلقه‌ها روی آن‌ها می‌چرخد.
4. classList.add کلاس done را به هر آیتم می‌افزاید؛ classList.remove حذف می‌کند و classList.toggle می‌زند و برمی‌دارد. تغییر ظاهر را بهتر است با کلاس انجام دهید و سبک را در CSS بنویسید، نه در جاوااسکریپت.

ساخت و حذف عنصر

DOM فقط برای ویرایش نیست؛ می‌توان عناصر تازه ساخت و به صفحه افزود:

const list = document.querySelector("ul");

const newItem = document.createElement("li");
newItem.textContent = "Walnut";
list.append(newItem);

createElement عنصری خالی می‌سازد که هنوز به صفحه وصل نیست؛ با textContent پرش می‌کنید و با append آن را به انتهای فهرست می‌چسبانید. از این لحظه «Walnut» بخشی از صفحه است. برای حذف هم متد remove روی عنصر کافی است: newItem.remove().

تمرین‌ها

// Write your code here

const title = document.querySelector("#title");
title.textContent = "Today's Tasks";
title.style.color = "purple";

:::

خلاصه

• مرورگر HTML را به درختی از گره‌ها به نام DOM تبدیل می‌کند و جاوااسکریپت رابط تغییر آن است.
• document.querySelector با سلکتور CSS اولین عنصر منطبق را می‌دهد و در نبود عنصر null برمی‌گرداند.
• textContent متن عنصر را می‌خواند و تغییر می‌دهد؛ style سبک‌های درون‌خطی و classList کلاس‌ها را مدیریت می‌کند.
• querySelectorAll همهٔ عناصر منطبق را می‌دهد و روی آن می‌توان با حلقه چرخید.
• با createElement و append عنصر تازه به صفحه اضافه می‌شود و با remove حذف می‌شود.

صفحه را می‌بینیم و تغییرش می‌دهیم؛ اما هنوز واکنشی به کاربر نداریم. در درس بعدی با رویدادها، برنامه به کلیک و تایپ گوش می‌دهد.