نوع Element

مقدمه

پس از آشنایی با `Node` و `Document`، به رایج‌ترین و پرکاربردترین نوع گره در DOM می‌رسیم: `Element`. این نوع، نماینده‌ی یک تگ HTML در سند است، مانند ` <div>`، `<p>`، `<a>` یا `<span>`. از آنجایی که `Element` از `Node` ارث‌بری می‌کند، تمام ویژگی‌های پایه‌ای مانند `nodeType` (که برای عناصر همیشه 1 است)، `nodeName` و پراپرتی‌های پیمایشی را دارد. اما علاوه بر آن‌ها، `Element` مجموعه‌ای غنی از پراپرتی‌ها و متدهای اختصاصی برای کار با محتوای HTML، استایل و اتریبیوت‌ها را فراهم می‌کند که آن را به ابزار اصلی ما برای دستکاری صفحه تبدیل کرده است.

خواندن و تغییر محتوای عنصر

یکی از اولین کارهایی که پس از انتخاب یک عنصر می‌خواهیم انجام دهیم، خواندن یا تغییر محتوای درون آن است. برای این کار چندین پراپرتی وجود دارد که هر کدام کاربرد خاص خود را دارند.

پراپرتی innerHTML

پراپرتی `innerHTML` به ما اجازه می‌دهد به کل محتوای HTML داخل یک عنصر، شامل تگ‌های دیگر، دسترسی داشته باشیم یا آن را به طور کامل بازنویسی کنیم. این پراپرتی بسیار قدرتمند است اما هنگام تنظیم آن با مقادیر ورودی از کاربر باید مراقب بود، زیرا می‌تواند منجر به حملات امنیتی XSS (Cross-Site Scripting) شود.

JAVASCRIPT

// HTML: <div id="content">Here is some <strong>bold</strong> text.</div>
const contentDiv = document.getElementById('content');

// Read the HTML content
console.log(contentDiv.innerHTML);

// Overwrite the HTML content
contentDiv.innerHTML = 'New content with an <em>italic</em> element.';

کد بالا ابتدا محتوای HTML داخل `div` را می‌خواند و در کنسول چاپ می‌کند. سپس کل محتوای آن را با یک رشته HTML جدید جایگزین می‌کند که باعث می‌شود مرورگر آن را مجدداً پردازش کرده و نمایش دهد.

پراپرتی‌های textContent و innerText

اگر فقط با محتوای متنی یک عنصر کار دارید و نیازی به تگ‌های HTML ندارید، استفاده از `textContent` یا `innerText` انتخاب بهتری است.

• textContent: تمام محتوای متنی داخل یک عنصر و فرزندانش را برمی‌گرداند، بدون در نظر گرفتن استایل CSS (حتی متن عناصر مخفی). این پراپرتی امن‌تر و سریع‌تر از `innerHTML` است.
• innerText: فقط محتوای متنی "قابل مشاهده" برای کاربر را برمی‌گرداند و استایل CSS (مانند `display: none`) را در نظر می‌گیرد.

JAVASCRIPT

// HTML: <p id="info">This is <span>visible</span> and <span style="display:none;">hidden</span> text.</p>
const p = document.getElementById('info');
console.log(p.textContent); // "This is visible and hidden text."
console.log(p.innerText);   // "This is visible and text."

این مثال تفاوت کلیدی بین `textContent` و `innerText` را نشان می‌دهد. `textContent` تمام متن را بدون توجه به دیده شدن یا نشدن آن برمی‌گرداند، در حالی که `innerText` متن داخل `span` مخفی را نادیده می‌گیرد.

کار با اتریبیوت‌ها (Attributes)

می‌دانید که اتریبیوت‌ها مقادیری هستند که در تگ باز یک عنصر برای پیکربندی آن قرار می‌گیرند (مانند `href` در `<a>` یا `src` در `<img>`). نوع `Element` متدهایی برای مدیریت این اتریبیوت‌ها ارائه می‌دهد.

متدهای استاندارد مدیریت اتریبیوت

این متدها روش استاندارد و عمومی برای کار با هر نوع اتریبیوتی، اعم از استاندارد یا سفارشی، هستند.

• getAttribute(name): مقدار یک اتریبیوت را برمی‌گرداند.
• setAttribute(name, value): یک اتریبیوت جدید ایجاد می‌کند یا مقدار یک اتریبیوت موجود را تغییر می‌دهد.
• hasAttribute(name): بررسی می‌کند که آیا یک عنصر اتریبیوت مشخصی را دارد یا خیر (true/false).
• removeAttribute(name): یک اتریبیوت را از عنصر حذف می‌کند.

JAVASCRIPT

// HTML: <a id="myLink" href="#">A link</a>
const link = document.getElementById('myLink');

link.setAttribute('href', 'https://example.com');
link.setAttribute('data-custom', 'some-value');

console.log(link.getAttribute('href')); // "https://example.com"

link.removeAttribute('data-custom');

در کد بالا، ابتدا مقدار اتریبیوت `href` یک لینک را تغییر داده و یک اتریبیوت سفارشی `data-custom` به آن اضافه می‌کنیم. سپس مقدار `href` جدید را می‌خوانیم و در نهایت اتریبیوت سفارشی را حذف می‌کنیم.

پراپرتی‌های مستقیم

برای بسیاری از اتریبیوت‌های استاندارد HTML، می‌توان به طور مستقیم از طریق پراپرتی‌های همنام روی شیء عنصر به آنها دسترسی داشت. این روش معمولاً ساده‌تر و خواناتر است.

توجه داشته باشید که نام برخی پراپرتی‌ها با اتریبیوت معادلشان تفاوت دارد؛ مهم‌ترین مثال، اتریبیوت `class` است که پراپرتی معادل آن `className` می‌باشد، زیرا `class` یک کلمه کلیدی رزرو شده در جاوااسکریپت است.

JAVASCRIPT

// HTML: <img id="myImage" src="old.jpg" class="thumbnail">
const image = document.getElementById('myImage');

console.log(image.id); // "myImage"
image.src = 'new.jpg';
console.log(image.className); // "thumbnail"

این مثال نشان می‌دهد که چگونه می‌توان به سادگی و به صورت مستقیم پراپرتی‌هایی مانند `id`، `src` و `className` را خواند و مقداردهی کرد.

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