لیست گره‌ها در HTML DOM

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو

شیء NodeList در HTML DOM

یک NodeList یا لیست گره‌ها، یک لیست (مجموعه) ای از گره‌هایی است که از یک سند استخراج شده‌است.[۱]

یک NodeList بسیار شبیه به یک شیء HTMLCollection است.

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

تمامی مرورگرها برای ویژگی childNodes یک شیء NodeList برمی‌گردانند.

بیشتر مرورگرها برای متد querySelectorAll() یک شیء NodeList برمی‌گردانند.

کد زیر تمام گره‌های <p> درون یک سند را انتخاب می‌کند:

مثال

var myNodeList = document.querySelectorAll("p");


مشاهدهٔ نتیجه


به عناصر درون یک NodeList می‌توان به وسیله یک اندیس عددی دسترسی داشت.

برای دسترسی به node یا گره دوم <p> شما می‌توانید کد زیر را بنویسید:

1var myNodelist = document.querySelectorAll("p");
2document.getElementById("demo").innerHTML = myNodelist.length;

نکته: اندیس‌ها از ۰ آغاز می‌شوند.

طول یک لیست گره‌ها در HTML DOM

ویژگی length تعداد گره‌های موجود درون یک لیست گره (node list) را تعریف می‌کند:

مثال

1var myNodelist = document.querySelectorAll("p");
2var i;
3for (i = 0; i < myNodelist.length; i++) {
4  myNodelist[i].style.backgroundColor = "red";
5}


مشاهدهٔ نتیجه


توضیح مثال:

  1. لیستی از تمام عناصر <p> می‌سازد.
  2. طول لیست را نمایش می‌دهد.

ویژگی length زمانی کاربردی است که شما می‌خواهید بین گره‌های درون یک لیست گره (node list) به وسیله حلقه پیمایش کنید:

مثال

رنگ پس زمینه تمام عناصر <p> درون یک لیست گره یا nodelist را تغییر می‌دهد:

var myNodeList = document.querySelectorAll("p");


مشاهدهٔ نتیجه


تفاوت بین یک HTMLCollection و یک NodeList

یک HTMLCollection (فصل قبل) مجموعه ای از عناصر HTML است.

یک NodeList مجموعه ای از گره‌های یک سند است.

در بین یک NodeList و یک HTML Collection بسیاری موارد مشابه است.

هر دو HTMLCollection و NodeList یک لیست آرایه مانند (مجموعه‌ای) از اشیاء هستند.

هر دو ویژگی length دارند که تعداد آیتم‌های لیست (مجموعه) را تعریف می‌کند.

هر دو از اندیس (۰، ۱، ۲، ۳، ۴ ، ...) برای دسترسی به عناصر همانند یک آرایه استفاده می‌کنند.

به آیتم‌های HTMLCollection می‌توان به وسیله نام، شناسه یا شماره اندیس آنها دسترسی داشت.

به آیتم‌های NodeList تنها می‌توان به وسیلهٔ اندیس‌های عددیشان دسترسی داشت.

تنها شیء NodeList می‌توانند شامل گره‌های خاصیت (Attribute nodes) و گره‌های متنی (Text nodes) شوند.

یک لیست گره یا Node list یک آرایه نیست!

یک NodeList ممکن است شبیه به یک آرایه به نظر برسد، اما آرایه نیست.

شما می‌توانید به وسیله یک حلقه بین گره‌های موجود در یک لیست گره (node list) پیمایش کنید و گره‌های آن همانند یک آرایه دسترسی پیدا کنید.

اما، شما نمی‌توانید متدهای آرایه مانند: valueOf(), push(), pop(), join() را روی یک لیست گره استفاده کنید.

منابع آموزشی