لیست نویدهای JavaScript HTML DOM

شی NodeList HTML DOM

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

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

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

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

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

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

مثال

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

آزمایش کنید

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

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

y = myNodeList[1];

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

طول NodeList HTML DOM

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

مثال

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

آزمایش کنید

توضیح مثال:

  • ایجاد لیست همه عناصر <p>
  • نمایش طول این لیست

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

مثال

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

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

آزمایش کنید

تفاوت HTMLCollection و NodeList

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

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

NodeList تقریباً کاملاً مشابه مجموعه HTML است.

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

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

هر دو می‌توانند با استفاده از شاخص (0، 1، 2، 3، 4، ...) مانند آرایه به هر پروژه دسترسی پیدا کنند.

برای دسترسی به پروژه‌های HTMLCollection، می‌توانید از نام، id یا شاخص شاخص استفاده کنید.

برای دسترسی به پروژه‌های NodeList، تنها می‌توانید از شماره‌های شاخص استفاده کنید.

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

لیست گره‌ها آرایه نیست!

لیست گره‌ها مانند آرایه به نظر می‌رسد، اما نیست.

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

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