مدل DOM در HTML
فایل HTML روی دیسک فقط نویسه نگه می‌دارد. مرورگر از روی همان فایل یک درخت زنده می‌سازد و نام این درخت DOM است. روی شیشهٔ ایستگاه دو خط است: عنوان Market و یادداشت Stand clear. صفحه که باز باشد document همان‌جاست. new document() خطا می‌دهد. new Document() هم یک سند خالی می‌سازد، نه این تابلو.
این درخت است، نه گرد کردن
در جلسهٔ شیء Math از یک شیء مشترک عدد می‌گرفتی. اینجا نه عرضی گرد می‌شود و نه لحظه‌ای با new Date ساخته می‌شود. مسیر از document شروع می‌شود و پایین می‌آید: عنصر html، بعد head کنار body، بعد عنوان کنار یادداشت. انتخاب با چند روش، عوض کردن نشانه‌گذاری، و ساختن گرهٔ تازه برای جلسه‌های بعدی مانده. کار این صفحه شناختن شکل درخت و خواندن دو گره است.
هر تکه کجای تابلو است
ردیف‌ها فهرست حفظ‌کردنی نیستند. هر ردیف یک جا است که می‌توانی نشانش بدهی. ستون آخر همان‌جایی است که دست معمولاً می‌لغزد.
📊 جای هر تکه روی تابلو
| جا | چه چیزی دستت است | روی این تابلو | لغزش رایج |
|---|---|---|---|
document |
خود درخت | ورودی، بدون نام برچسب | گرفتن آن به‌جای body |
document.documentElement |
عنصر html | برچسب HTML |
عوضی گرفتنش با عنوان |
document.head |
عنصر head | خواهر یا برادر body | گشتن دنبال Market اینجا |
document.body |
عنصر body | پدر عنوان | یکی گرفتنش با گرهٔ متنی |
h1#stop |
عنصر عنوان | متن Market |
فایل ذخیره‌شده روی دیسک |
| متن داخل عنوان | فقط نویسه | واژهٔ Market | عنصری که id دارد |
عنوان و یادداشت هر دو فرزند عنصری body هستند، پس خواهر و برادر یکدیگرند. واژهٔ Market خواهر یادداشت نیست؛ داخل عنوان نشسته، به‌صورت متن. tagName حروف بزرگ برمی‌گرداند، برای همین عنصر html می‌گوید HTML. خود گرهٔ document برچسب ندارد و عنصر پدر هم ندارد.
سه نام بالای درخت
این سه ویژگی عنصرهای بیرونی را نام می‌برند. عنوان روی شیشه جزو این سه تا نیست.
console.log(document.documentElement.tagName);
console.log(document.head.tagName);
console.log(document.body.tagName);
خروجی سه خط است: HTML، بعد HEAD، بعد BODY. head و body هر دو فرزند عنصر html هستند و برای همین کنار هم‌اند. Market را داخل head جست‌وجو نکن. عنوانک تب در head یک رشتهٔ جداست و با عنوان شیشه یکی نیست.
خانوادهٔ عنوان
stop دستگیرهٔ عنصر عنوان است، نه خود واژه. عنصر پدر، body است. عنصر بعدی، یادداشت است.
let stop = document.getElementById("stop");
console.log(stop.parentElement.tagName);
console.log(stop.nextElementSibling.id);
خط اول BODY است. خط دوم note. nextElementSibling شکست خط را عنصر حساب نمی‌کند و روی پاراگراف می‌نشیند. عنصر قبلی عنوان null است، چون در body قبل از عنوان عنصر دیگری نیست.
واژه جدا، دستگیره جدا
خواندن عنصر با خواندن نویسه‌های داخلش یکی نیست.
let stop = document.getElementById("stop");
console.log(stop.textContent);
console.log(stop.id);
اولی Market است و دومی stop. textContent نویسه‌ها را می‌دهد و id دستگیره را. یادداشت می‌گوید Stand clear. آن رشته روی عنوان نیست.
اول عنصر، بعد هر گره
children فقط فرزند عنصری می‌شمارد. childNodes گرهٔ متنی را هم می‌آورد، از جمله شکست خط فایل تابلو. این دو عدد را روی bodyی بسنج که فقط عنوان و یادداشت دارد. صفحهٔ همین درس، و فایل پایانی که پاراگراف سوم و اسکریپت دارد، شمارش دیگری می‌دهند.
console.log(document.body.children.length);
console.log(document.body.childNodes.length);
شکست خط قبل از عنوان، یکی بین دو عنصر، و یکی بعد از یادداشت را که بشماری، children.length می‌شود ۲ و childNodes.length می‌شود ۵. آن سه تای اضافه فقط فاصله‌اند. اگر هر دو برچسب را در یک خط بچسبانی، گره‌های متنی می‌روند و دو طول یکی می‌شوند.
اسمی که فایل ننوشته
id را همان‌طور که در فایل نیست صدا بزن.
console.log(document.getElementById("platform"));
console.log(document.getElementById("stop") === null);
خط اول null است. خط دوم false است، چون stop واقعاً هست. null یعنی عنصری با این id پیدا نشد، نه یک عنوان خالی و نه رشتهٔ تهی. اگر رشتهٔ تازه‌ای را در textContent بگذاری، درخت داخل مرورگر عوض می‌شود. فایل روی دیسک هنوز Market را دارد.
یک خط گزارش، ته صفحه
پاراگراف سوم نام برچسب پدر و متن عنوان را نشان می‌دهد. اسکریپت ته body است، یعنی بعد از ساخته شدن همان عنصرها.
<!DOCTYPE html>
<html>
<head>
<title>dom — page</title>
</head>
<body>
<h1 id="stop">Market</h1>
<p id="note">Stand clear</p>
<p id="board">…</p>
<script>
let stop = document.getElementById("stop");
let board = document.getElementById("board");
board.textContent = stop.parentElement.tagName + " / " + stop.textContent;
</script>
</body>
</html>
پاراگراف می‌نویسد BODY / Market. در این فایل، پیش از اسکریپت سه عنصر داخل body است، پس عدد ۲ مال اینجا نیست. خود script هم یک فرزند است. جلسهٔ بعد عنصر را با راه‌هایی غیر از یک id انتخاب می‌کند.
خودت قدم بزن
- سه نام برچسب بیرونی را بنویس و انتظار HTML، بعد HEAD، بعد BODY داشته باش
- برچسب پدر عنوان را بنویس و انتظار BODY داشته باش
- id عنصر بعدی را بنویس و انتظار note داشته باش
- متن عنوان را بنویس و انتظار Market داشته باش، بعد id را و انتظار stop
- روی تابلوی دو عنصری، طول children را ۲ و طول childNodes را ۵ انتظار داشته باش
- id غایب را بنویس و انتظار null داشته باش، بعد مقایسه با stop را و انتظار false
- پاراگراف را بخوان و انتظار BODY / Market داشته باش
جای غلط
صفحه باز می‌شود، ولی جایی که نشان دادی جای عنوان نیست.
new document()زدن، یا خالیِnew Document()را همین تابلو دیدن- گشتن دنبال Market داخل
document.head - واژهٔ Market را عنصرِ خواهر یادداشت حساب کردن
children.lengthرا وقتی همهٔ گره‌ها، از جمله شکست خط، را می‌خواهیchildNodes.lengthرا وقتی فقط عنوان و یادداشت را می‌خواهیnullرا رشتهٔ خالی خواندن- انتظار اینکه نوشتن در
textContentفایل دیسک را هم عوض کند
این‌ها را قاطی نکن
documentخود درخت است وdocumentElementعنصر htmlheadوbodyزیر همان html کنار هم‌اند- پدر عنوان body است و عنصر بعدی‌اش یادداشت
textContentنویسه است وidدستگیرهchildrenفقط عنصر است وchildNodesمتن فاصله را هم دارد- id غایب
nullاست و فایل ذخیره‌شده همان درخت زنده نیست - جلسهٔ بعد انتخاب عنصر را از یک id فراتر می‌برد
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود