روش getElementsByClassName() HTML DOM Element

تعریف و استفاده

getElementsByClassName() این روش مجموعه‌ای از فرزندان دارای نام کلاس خاص را به عنوان یک شیء NodeList بازمی‌گرداند.

لطفاً به اینجا نیز مراجعه کنید:

خصوصیت classList

خصوصیت className

روش querySelector()

روش querySelectorAll()

روش getElementsByTagName()

شی Style HTML DOM

آموزش:

نحوه CSS

انتخاب‌کننده CSS

دستورالعمل انتخاب‌کننده CSS

NodeList

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

شما می‌توانید با استفاده از شماره‌ی نشانه‌گذاری (index) به گره‌های موجود در لیست دسترسی پیدا کنید. شماره‌ی نشانه‌گذاری از 0 شروع می‌شود.

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

مثال

مثال 1

متن اولین آیتم لیست را با استفاده از class="child" تغییر دهید:

const list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";

آموزش خودتان انجام دهید

مثال 2

تعداد عناصر class="child" در "myDIV":

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
number = nodes.length;

آموزش خودتان انجام دهید

مثال 3

اندازه دومین عنصر class="child" را تغییر دهید:

const element = document.getElementById("myDIV");
element.getElementsByClassName("child")[1].style.fontSize = 24px";

آموزش خودتان انجام دهید

مثال 4

در عنصر دوم با class="example" از کلاس‌های "child" و "color" برای تغییر اندازه اولین عنصر استفاده کنید:

const elements = document.getElementsByClassName("example")[1];
elements.getElementsByClassName("child color")[0].style.fontSize = "24px";

آموزش خودتان انجام دهید

مثال 5

تغییر رنگ تمام عناصر با class="child" در "myDIV":

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
برای (let i = 0; i < nodes.length; i++) {
  nodes[i].style.color = "red";
}

آموزش خودتان انجام دهید

نحوه استفاده

element.getElementsByClassName(classname)

پارامتر

پارامتر توضیح
classname

لازم است. نام کلاس فرزند.

نام‌های چندگانه را با فاصله جدا کنید (مثلاً "child color").

مقدار بازگشتی

نوع توضیح
NodeList

عناصر فرزند شامل عناصر با نام کلاس داده شده.

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

پشتیبانی مرورگر

element.getElementsByClassName() این یک ویژگی DOM Level 1 (1998) است.

همه مرورگرها از آن به طور کامل پشتیبانی می‌کنند:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
پشتیبانی 9-11 پشتیبانی پشتیبانی پشتیبانی پشتیبانی