دستورالعمل NodeList HTML DOM

NodeList

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

گره‌های NodeList می‌توانند از طریق شماره‌ی نشانه‌گذاری به آنها دسترسی پیدا کنند (از 0 شروع می‌شود).

خصوصیت lengthتعداد گره‌های NodeList را بازگرداند.

NodeList vs. HTMLCollection

NodeList در مقابل HTMLCollection تقریباً مشابه.

لطفاً توضیحات زیر را مشاهده کنید.

چه کسی NodeList را بازمی‌گرداند؟

ویژگی childNodes

مетод querySelectorAll()

مетод getElementsByName()

ویژگی‌ها و روش‌ها

می‌توان از موارد زیر به عنوان ویژگی‌ها و روش‌ها در NodeList استفاده کرد:

نام توضیحات
entries() یک گشت‌زن با کلید/مقدار بازگردانید.
forEach() برای هر گره در لیست، یک تابع بازگشتی اجرا کنید.
item() گره‌ای در محل مشخص شده بازگرداند.
keys() با استفاده از کلیدهای لیست، یک گشت‌زن بازگردانید.
length تعداد گره‌های NodeList را بازگرداند.
values() با استفاده از مقادیر لیست، یک گشت‌زن بازگردانید.

مثال‌ها

تمام <p> گره:

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

عناصر NodeList می‌توانند از طریق شماره‌ی نشانه‌گذاری به آنها دسترسی پیدا کنند.

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

myNodeList[1]

آزمایش کنید

توجه داشته باشید:این شمارا از 0 شروع می‌شود.

HTML DOM Node List Length

length این ویژگی تعریف تعداد گره‌های لیست گره را می‌کند:

مثال 1

myNodelist.length

آزمایش کنید

وقتی می‌خواهید گره‌های لیست گره را جستجو کنید،length این ویژگی بسیار مفید است:

مثال 2

تغییر رنگ همه عناصر <p> در لیست گره:

const myNodelist = document.querySelectorAll("p");
برای (let i = 0; i < myNodelist.length; i++) {
  myNodelist[i].style.color = "red";
}

آزمایش کنید

آرایه نیست

NodeList آرایه نیست!

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

می‌توانید NodeList را مرور کنید و از شماره‌ی شروع به گره‌های آن اشاره کنید.

اما نمی‌توانید از روش‌های آرایه مانند push()، pop() یا join() روی NodeList استفاده کنید.

تفاوت HTMLCollection و NodeList

NodeList با HTMLcollection بسیار مشابه

هر دو مجموعه‌ای از گره‌ها (عناصر) هستند که از مستند استخراج شده‌اند و به عنوان مجموعه‌های مشابه آرایه (لیست) عمل می‌کنند. می‌توان به گره‌ها از طریق شماره‌ی شروع دسترسی داشت. شماره از 0 شروع می‌شود.

هر دو خصوصیت lengthاست، که تعداد عناصر در لیست (مجموعه) را بازمی‌گرداند.

HTMLCollection یک نوععنصر مستنداست.

NodeList یک مجموعه ازگره‌ی مستندیک مجموعه از (گره‌های عناصر، گره‌های ویژگی و گره‌های متن) است.

میتوان به پروژه‌های HTMLCollection از طریق نام، id یا شماره‌ی شروع دسترسی داشت.

میتوان به NodeList‌ها از طریق شماره‌ی شروع به دسترسی داشت.

HTMLCollection همیشه یک نوعواقعیمجموعه است. به عنوان مثال: اگر یک عنصر <li> به لیست DOM اضافه شود، لیست HTMLCollection نیز تغییر می‌کند.

NodeList معمولاً یک نوعثابتمجموعه. به عنوان مثال: اگر یک عنصر <li> به لیست DOM اضافه شود، لیست NodeList تغییر نمی‌کند.

getElementsByClassName() و getElementsByTagName() این روش HTMLCollection واقعی را بازمی‌گرداند.

querySelectorAll() این روش NodeList ثابت را بازمی‌گرداند.

childNodes این خاصیت NodeList واقعی را بازمی‌گرداند.

لیست گره‌های واقعی

در برخی موارد، NodeList استواقعی：تغییرات در DOM به‌روزرسانی NodeList را به‌روزرسانی می‌کند.

childNodes این روش NodeList واقعی را بازمی‌گرداند.