آموزش جاوا اسکریپت – جلسه 23 – تغییر محتوای DOM

در مقاله قبل، بخش 22 سری آموزشی JS، درخت DOM را تعریف کردیم و نحوه پیمایش درخت DOM، نحوه یافتن عناصر موردنظر را در DOM، نحوه کار با تب Console در مرورگر و… را آموزش دادیم. در این مقاله می خواهیم نحوه درج المان های جدید در DOM ، تغییر المان های فعلی DOM، حذف المان های موجود در dom را آموزش دهیم.

تولید عنصر جدید در DOM:

برای تعریف یک المان جدید در DOM دو روش داریم:

document.createElement(tag): برای ایجاد نود المان (element node) با تگ ارائه شده. مثال:

let div = document.createElement('div');

document.createTextNode(text): برای ایجاد نود تکست (text node) با متن ارائه شده. مثال:

let textNode = document.createTextNode('Here I am');

بعنوان مثال می خواهیم یک DIV با کلاس alert را توسط جاوا اسکریپت ایجاد کنیم:

let div = document.createElement('div');
div.className = "alert";
div.innerHTML = "<strong>Hi there!</strong> You've read an important message.";

مشاهده می شود که به منظور تعریف کلاس css برای یک المان، از className و به منظور تعریف محتوای داخلی المان از innerHTML استفاده شده است.

خروجی کدهای js فوق در قالب css-html بصورت زیر است:

<style>
.alert {
  padding: 15px;
  border: 1px solid #d6e9c6;
  border-radius: 4px;
  color: #3c763d;
  background-color: #dff0d8;
}
</style>

<div class="alert">
  <strong>Hi there!</strong> You've read an important message.
</div>

درج عنصر جدید در DOM:

تا اینجای کار المان دلخواه را تعریف کرده ایم ولی در صفحه نمایش نمی یابد. زیرا هنوز آن را در DOM درج نکرده ایم. پس برای اینکه المانی که ایجاد کرده ایم قابل مشاهده باشد باید آن را در جایی در داکیومنت (مثلا document.body) درج کنیم. متدی که اینکار را برای ما انجام می دهد document.body.append(div) است:

<style>
.alert {
  padding: 15px;
  border: 1px solid #d6e9c6;
  border-radius: 4px;
  color: #3c763d;
  background-color: #dff0d8;
}
</style>

<script>
  let div = document.createElement('div');
  div.className = "alert";
  div.innerHTML = "<strong>Hi there!</strong> You've read an important message.";

  document.body.append(div);
</script>

لیست متدهای درج المان در DOM در جاوااسکریپت بصورت زیر است:

append(…nodes or strings) : درج node ها یا رشته ها در انتهای node
prepend(…nodes or strings) : درج node ها یا رشته ها در ابتدای node
before(…nodes or strings) : درج node ها یا رشته ها قبل از node
after(…nodes or strings) : درج node ها یا رشته ها بعد از node
replaceWith(…nodes or strings) : جایگزین کردن node با نودها یا رشته ها

در مثال زیر می خواهیم نحوه افزودن یک آیتم به لیست و یک متن قبل/بعد از آن را آموزش دهیم:

<ol id="ol">
  <li>0</li>
  <li>1</li>
  <li>2</li>
</ol>

<script>
  ol.before('before'); // insert string "before" before <ol>
  ol.after('after'); // insert string "after" after <ol>

  let liFirst = document.createElement('li');
  liFirst.innerHTML = 'prepend';
  ol.prepend(liFirst); // insert liFirst at the beginning of <ol>

  let liLast = document.createElement('li');
  liLast.innerHTML = 'append';
  ol.append(liLast); // insert liLast at the end of <ol>
</script>

خروجی این مثال:

before
1.	prepend
2.	0
3.	1
4.	2
5.	append
after

تصویر زیر بیانگر نحوه کارکرد متدهای فوق را نشان داده است:

بنابراین خروجی کد فوق به این صورت خواهد شد:

before
<ol id="ol">
  <li>prepend</li>
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>append</li>
</ol>
after

در متدهای فوق می توان چندین نود یا تکست را در یک فراخوانی به محل مورد نظر اضافه کرد. مثلا در کد زیر در یک دستور می خواهیم یک hr و یک پاراگراف p را قبل از div درج کنیم:

<div id="div"></div>
<script>
  div.before('<p>Hello</p>', document.createElement('hr'));
</script>

کد خروجی بصورت زیر خواهد بود:

<p>Hello</p>
<hr>
<div id="div"></div>

حذف عنصر از DOM:

برای حذف یک نود از دام متد node.remove() را داریم. بیایید در مثال نمایش پیغام کاری کنیم که پیغام نمایش داده شده پس از یک ثانیه ناپدید شود:

<style>
.alert {
  padding: 15px;
  border: 1px solid #d6e9c6;
  border-radius: 4px;
  color: #3c763d;
  background-color: #dff0d8;
}
</style>

<script>
  let div = document.createElement('div');
  div.className = "alert";
  div.innerHTML = "<strong>Hi there!</strong> You've read an important message.";

  document.body.append(div);
  setTimeout(() => div.remove(), 1000);
</script>

نکته: تمام متدهای درج (insertion methods) المان موردنظر را از محل مبدا حذف کرده و در محل مقصد درج می کند.

<div id="first">First</div>
<div id="second">Second</div>
<script>
  // no need to call remove
  second.after(first); // take #second and after it insert #first
</script>

کپی کردن عنصر در DOM:

اگر بخواهیم دو تگ یکسان با محتوای مشابه داشته باشیم چه راهکاری وجود دارد؟

روش اول اینست که دستور ایجاد المان را در یک تابع تعریف کنیم و هرجا که خواستیم مجددا این المان را داشته باشیم کافیست این تابع را فراخوانی کنیم.

اما روش اصولی تر و سریع تر برای کپی گرفتن از یک المان در جاوا اسکریپت استفاده از متد cloneNode می باشد. اگر متد را بصورت elem.cloneNode(true) تعریف کنیم کلون بصورت عمیق انجام می شود یعنی تمام المان های زیرمجموعه المان اصلی نیز کپی می شوند. اما اگر بصورت elem.cloneNode(false) باشد تنها المان اصلی کپی می شود و المان های فرزند کپی نخواهند شد.

مثالی از کپی کردن پیغام:

<style>
.alert {
  padding: 15px;
  border: 1px solid #d6e9c6;
  border-radius: 4px;
  color: #3c763d;
  background-color: #dff0d8;
}
</style>

<div class="alert" id="div">
  <strong>Hi there!</strong> You've read an important message.
</div>

<script>
  let div2 = div.cloneNode(true); // clone the message
  div2.querySelector('strong').innerHTML = 'Bye there!'; // change the clone

  div.after(div2); // show the clone after the existing div
</script>

افزودن متن به عنصر در DOM:

یکی از روش های قدیمی و کلاسیک افزودن یک متن به DOM توسط جاوا اسکریپت، استفاده از متد document.write است.

<p>Somewhere in the page...</p>
<script>
  document.write('<b>Hello from JS</b>');
</script>
<p>The end</p>

متد write فقط زمانی درست کار می کند که صفحه در حال لود شدن باشد. اگر پس از لود صفحه متد write را اجرا کنیم تمام محتوای صفحه با مقدار داخل write جایگزین خواهد شد:

<p>After one second the contents of this page will be replaced...</p>
<script>
  // document.write after 1 second
  // that's after the page loaded, so it erases the existing content
  setTimeout(() => document.write('<b>...By this.</b>'), 1000);
</script>

در جاوا اسکریپت مدرن دیگر از متد write برای نوشتن محتوا استفاده نمی شود اما جاوا اسکریپت هنوز از این متد پشتیبانی می کند زیرا هنوز وب سایت هایی وجود دارند که از write استفاده کرده اند و مدرن نشده اند.