javascriptDocument Object ModelDOM در جاوااسکریپت
DOM ساختار صفحهٔ وب را در اختیار جاوااسکریپت می‌گذارد. ساخت عنصر، انتخاب با querySelector و نمایش امن متن با textContent را در مثال مستقل یاد بگیرید.
مفهوم به زبان ساده
DOM یا مدل شیء سند، راه برنامه‌نویسی برای کار با ساختار یک صفحهٔ وب است. مرورگر عناصر و متن‌های سند را به‌صورت گره‌هایی در یک ساختار درختی در اختیار برنامه می‌گذارد. از طریق این رابط می‌توان عنصر ساخت، متن آن را تغییر داد یا فرزندهایش را بررسی کرد. DOM خود زبان جاوااسکریپت نیست؛ یکی از رابط‌هایی است که محیط مرورگر در اختیار این زبان قرار می‌دهد.
در مثال، یک section مستقل و یک پاراگراف می‌سازیم. پاراگراف را فرزند section می‌کنیم و سپس با querySelector نخستین عنصر مطابق انتخابگر p را می‌یابیم. ویژگی textContent، متن عنصر را می‌خواند یا جایگزین می‌کند. حتی متنی شبیه برچسب HTML هم با این ویژگی به‌صورت متن نگهداری می‌شود، نه به‌عنوان عنصر تازه. این تفکیک هنگام نمایش ورودی کاربر اهمیت دارد.
ساخت عنصر با createElement آن را خودکار روی صفحه نشان نمی‌دهد. مثال عمداً درخت مستقل می‌سازد و سند اصلی را تغییر نمی‌دهد؛ برای نمایش واقعی، باید ریشهٔ ساخته‌شده را به جای مناسبی از سند متصل کنید. querySelector در نبود تطبیق، null می‌دهد، پس در کد واقعی نتیجه را پیش از استفاده بررسی کنید. این مثال به document مرورگر نیاز دارد و در Node.js معمولی document وجود ندارد. برای تمرین، یک پاراگراف دوم بسازید و بررسی کنید چرا querySelector همچنان فقط اولین تطبیق را برمی‌گرداند.
کجا به کار می‌آید؟
- ساخت و به‌روزرسانی پیام، کارت درس و بخش نتیجه در صفحه
- نمایش ورودی متنی کاربر بدون تفسیر آن به HTML
از تعریف تا یک مثال واقعی
// در کنسول مرورگر اجرا کنید؛ به HTML از پیش آماده نیاز ندارد.
const card = document.createElement('section');
const title = document.createElement('p');
title.textContent = 'درس اول';
card.append(title);
const selected = card.querySelector('p');
console.log(selected.textContent);
selected.textContent = '<strong>درس دوم</strong>';
console.log(selected.textContent);
console.log(selected.children.length);
درس اول <strong>درس دوم</strong> 0
این مثال چطور کار می‌کند؟
createElement دو عنصر مستقل در حافظه می‌سازد.
append پاراگراف را داخل section قرار می‌دهد؛ هنوز به صفحه متصل نیست.
querySelector عنصر p را در همین بخش پیدا می‌کند.
textContent متن شبیه HTML را هم متن نگه می‌دارد؛ فرزند عنصری ساخته نمی‌شود.
اشتباه رایج
innerHTML را برای نمایش مستقیم ورودی نامطمئن به کار نبرید. textContent و innerHTML رفتار متفاوتی دارند. همچنین نتیجهٔ querySelector ممکن است null باشد؛ وجود عنصر را فرض نکنید.
این را به خاطر بسپارید
DOM رابط کار با سند است؛ برای متن از textContent استفاده کنید و نتیجهٔ انتخاب عنصر را بررسی کنید.