نوع Text

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

مقدمه

گره‌های متنی یا `Text`، ساده‌ترین نوع گره در DOM هستند و محتوای متنی یک عنصر را نمایندگی می‌کنند. این گره‌ها نمی‌توانند فرزندی داشته باشند. برای مثال، در کد ` <p>Hello World</p> `، رشته "Hello World" یک گره از نوع `Text` است که به عنوان فرزند گره `Element` یعنی `<p>` قرار دارد.

گره‌های `Text` نیز از `Node` ارث‌بری می‌کنند، بنابراین `nodeType` آن‌ها برابر با 3، `nodeName` آن‌ها "#text" و `nodeValue` آن‌ها خود محتوای متنی است. نکته مهمی که باید به آن توجه داشت این است که فضاهای خالی (whitespace) در کد HTML، مانند فاصله‌ها و خطوط جدید بین تگ‌ها، نیز می‌توانند به عنوان گره‌های متنی در نظر گرفته شوند که این موضوع گاهی در پیمایش DOM با پراپرتی‌هایی مانند `firstChild` باعث نتایج غیرمنتظره می‌شود.

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

پس از دسترسی به یک گره متنی، می‌توانیم محتوای آن را بخوانیم یا با استفاده از پراپرتی‌ها و متدهای مختلف آن را دستکاری کنیم.

پراپرتی‌های data و nodeValue

برای دسترسی به محتوای یک گره `Text`، می‌توانید از پراپرتی `data` یا پراپرتی به ارث رسیده `nodeValue` استفاده کنید. هر دو به یک مقدار اشاره دارند و قابل خواندن و نوشتن هستند.

Copy Icon JAVASCRIPT 
// HTML: <div id="message">Initial message.</div>
const div = document.getElementById('message');
const textNode = div.firstChild;

// Read the text content
console.log(textNode.data); // "Initial message."

// Update the text content
textNode.data = "The message has been updated!";

در این کد، ما ابتدا گره `div` را پیدا کرده و سپس با `firstChild` به گره متنی داخل آن دسترسی پیدا می‌کنیم. سپس محتوای آن را خوانده و با مقداردهی مجدد به پراپرتی `data`، متن نمایش داده شده در صفحه را تغییر می‌دهیم.

متدهای کار با متن

نوع `Text` چندین متد برای دستکاری‌های پیچیده‌تر روی رشته متنی خود فراهم می‌کند:

  • appendData(text): متنی را به انتهای گره اضافه می‌کند.
  • deleteData(offset, count): بخشی از متن را از موقعیت `offset` به تعداد `count` کاراکتر حذف می‌کند.
  • insertData(offset, text): متنی را در موقعیت `offset` وارد می‌کند.
  • replaceData(offset, count, text): بخشی از متن را با متنی جدید جایگزین می‌کند.
  • splitText(offset): گره متنی را از موقعیت `offset` به دو گره متنی مجزا تقسیم می‌کند.
  • substringData(offset, count): زیررشته‌ای از متن را استخراج می‌کند.
Copy Icon JAVASCRIPT 
// HTML: <p id="para">Some text.</p>
const p = document.getElementById('para');
const textNode = p.firstChild;

// Append data to the text node
textNode.appendData(' More text was added.');

// Split the text node into two nodes
const newNode = textNode.splitText(5);
console.log(p.childNodes.length); // 2
console.log(p.firstChild.data);      // "Some "
console.log(newNode.data);              // "text. More text was added."

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

نرمال‌سازی گره‌های متنی

همانطور که در مثال قبل دیدیم، گاهی اوقات در اثر دستکاری‌های دینامیک، ممکن است یک عنصر دارای چندین گره متنی پشت سر هم شود. این وضعیت می‌تواند پیمایش و مدیریت DOM را پیچیده کند.

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

Copy Icon JAVASCRIPT 
// Continuing from the previous example, where p has 2 text nodes
console.log(p.childNodes.length); // 2

// Normalize the parent element
p.normalize();

console.log(p.childNodes.length); // 1
console.log(p.textContent);   // "Some text. More text was added."

این کد نشان می‌دهد که پس از فراخوانی `p.normalize()`، دو گره متنی که در مثال قبل ایجاد شده بودند، دوباره به یک گره واحد تبدیل می‌شوند و ساختار DOM را ساده‌تر و تمیزتر می‌کنند.

در این درس با نوع `Text` و جزئیات کار با آن آشنا شدیم. دیدیم که چگونه محتوای متنی یک گره را از طریق پراپرتی `data` بخوانیم و تغییر دهیم و با متدهایی مانند splitText() و normalize() دستکاری‌های پیشرفته‌تری روی ساختار متن انجام دهیم. با این درس، با مهم‌ترین انواع گره یعنی `Document`، `Element` و `Text` آشنا شدیم. اما درخت DOM شامل انواع دیگری از گره‌ها نیز هست، مانند گره‌های کامنت و فرگمنت. در درس بعدی، نگاهی کوتاه به این انواع دیگر خواهیم داشت تا درک ما از ساختار کامل DOM عمیق‌تر شود.