شیء HTMLCollection و شیء NodeList

شیء HTMLCollection

شیء HTMLCollection یک لیست آرایه مانند از تمام عناصر HTML است و در واقع هنگامی که در کدهایمان از دستور ()getElementsByTagName استفاده می کنیم یک شیء HTMLCollection به ما برگردانده می شود. بگذارید با یک مثال ببینیم.

کد زیر تمام عناصر <p> را به ما برمیگرداند:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello Iran!</p>

<p id="demo"></p>

<script>
var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML =
"The innerHTML of the second paragraph is: " +
myCollection[1].innerHTML;
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

دلیل انتخاب Iran این است که ایندکس آرایه ها از صفر شروع می شود بنابراین ایندکس 1 مساوی است با مورد دوم.

همچنین ما می توانیم از خاصیت length استفاده کنیم تا بدانیم در HTMLCollection چند شیء وجود دارد. در مثال زیر می خواهیم همین کار را انجام دهیم:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello Iran!</p>

<p id="demo"></p>

<script>
var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = 
"This document contains " + myCollection.length + " paragraphs.";
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

می بینید که عدد 3 به ما برگردانده شده است. در این کد ابتدا گفته ایم یک مجموعه از عناصر <p> را بساز. سپس از جاوا اسکریپت خواسته ایم که تعداد اعضای این مجموعه را به ما برگرداند که همان عدد 3 است. اگر تعداد پاراگراف ها را اضافه کنیم:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello Iran!</p>
  
  <p>Hello Iran!</p>
  
  <p>Hello Iran!</p>
  
  <p>Hello Iran!</p>
  
  <p>Hello Iran!</p>
  
  <p>Hello Iran!</p>
  
  <p>Hello Iran!</p>
  
  <p>Hello Iran!</p>

<p id="demo"></p>

<script>
var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = 
"This document contains " + myCollection.length + " paragraphs.";
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

میبینید که در خروجی عبارت This document contains 10 paragraphs به معنی «این سند 10 پاراگراف دارد» نمایش داده می شود.

سوال: فایده ی خاصیت length جیست و به چه دردی می خورد؟

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello Iran!</p>

<p>Click the button to change the color of all p elements.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var myCollection = document.getElementsByTagName("p");
  var i;
  for (i = 0; i < myCollection.length; i++) {
    myCollection[i].style.color = "red";
  }
}
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

به این کد گفته ایم تک تک اعضای شیء ما را پیدا کن و به آن ها style.color به رنگ قرمز بده! به این نحو تمامی عناصر صفحه قرمز می شوند.

هشدار: HTMLCollection شیء است نه آرایه! شباهت بیش از حد آن به آرایه ها (گردش در آن توسط حلقه ها و ...) باعث می شود خیلی ها فکر کنند که یک آرایه است اما HTMLCollection در حقیقت شیء است. به طور مثال شما نمی توانید از توابع مربوط به آرایه ها مانند ()valueOf و ()pop و ()push و ()join استفاده کنید.

شیء NodeList

شیء NodeList در حقیقت یک لیست از Node ها است که از یک سند گرفته شده است. بنابراین شیء NodeList تقریبا مشابه شیء HTMLCollection است. برخی از مرورگرهای قدیمی به جای برگرداندن شیء HTMLCollection در هنگام استفاده از ()getElementsByClassName شیء NodeList را بر می گردانند.

البته تمام مرورگر ها برای خصوصیت childNodes یک NodeList برمیگردانند. همچنین اکثر مرورگر ها برای دستور ()querySelectorAll باز هم یک NodeList برمیگردانند. بر اساس چیزی که گفتیم می توانیم بفهمیم که کد زیر تمام node های <p> را انتخاب می کند:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM!</h2>

<p>Hello World!</p>

<p>Hello Iran!</p>

<p id="demo"></p>

<script>
var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML =
"The innerHTML of the second paragraph is: " +
myNodelist[1].innerHTML;
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

حتما توجه دارید که ایندکس ها از صفر شروع می شوند! با دانستن این نکته می توانیم مانند آرایه ها از طریق ایندکس به این شیء دسترسی داشته باشیم. حالا می توانیم از خاصیت length برای این شیء نیز استفاده کنیم تا تعداد node های یک لیست یا شیء را برایمان برگرداند:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM!</h2>

<p>Hellow World!</p>

<p>Hellow Iran!</p>

<p id="demo"></p>

<script>
var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML =
"This document contains " + myNodelist.length + " paragraphs.";
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

در این مثال ابتدا با استفاده از دستور querySelectorAll تمام عناصر <p> را می گیریم. سپس آن ها را با استفاده از خاصیت length اندازه گیری می کنیم. استفاده ی عملی از آن نیز دقیقا هنگام گردش در آیتم های مختلف NodeList توسط حلقه ها است:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM!</h2>

<p>Hello World!</p>

<p>Hello Iran!</p>

<p>Click the button to change the color of all p elements.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var myNodelist = document.querySelectorAll("p");
  var i;
  for (i = 0; i < myNodelist.length; i++) {
    myNodelist[i].style.color = "red";
  }
}
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

تفاوت میان HTMLCollection و NodeList چیست؟

طبق تعریفی که به شما ارائه دادیم، شیء HTMLCollection حاوی مجموعه ای از عناصر HTML است و شیء NodeList نیز حاوی node های سند HTML. این دو در واقع یکی هستند و هر دو لیستی آرایه مانند از اشیاء هستند. هر دو آن ها خاصیت length را دارند که نشان دهنده ی تعداد اعضای این لیست ها است و هر دو ایندکس دارند. اعضای HTMLCollection از طریق نامشان، id شان و شماره ایندکس شان قابل دسترسی هستند اما اعضای NodeList ها تنها از طریق شماره ایندکس شان قابل دسترسی هستند.

امیدوارم از این قسمت لذت برده باشید.