مетод getElementsByTagName() HTML DOM Document

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

getElementsByTagName() این روش مجموعه‌ای از عناصر با نام برچسب مشخص شده را بازمی‌گرداند.

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

getElementsByTagName() این خاصیت فقط خواندنی است.

نکته:getElementsByTagName("*") همه عناصر موجود در مستند را بازمی‌گرداند.

HTMLCollection

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

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

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

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

مетод getElementById()

مетод getElementsByClassName()

مетод querySelector()

مетод querySelectorAll()

مجموعه HTMLCollection

مثال

مثال 1

دسترسی به همه عناصر با نام برچسب "li":

const collection = document.getElementsByTagName("li");

آزمایش کنید

مثال 2

دسترسی به همه عناصر مستند:

const collection = document.getElementsByTagName("*");

آزمایش کنید

مثال 3

تغییر HTML داخلی اولین عناصر <p> در مستند:

document.getElementsByTagName("p")[0].innerHTML = "Hello World!";

آزمایش کنید

مثال 4

تعداد عناصر <li> در مستند:

let numb = document.getElementsByTagName("li").length;

آزمایش کنید

مثال 5

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

const collection = document.getElementsByTagName("P");
برای (باید i = 0; i < collection.length; i++) {
  collection[i].style.backgroundColor = "red";
}

آزمایش کنید

قانون‌نویسی

document.getElementsByTagName(tagName)

پارامترها

پارامترها توضیح
tagName ضروری. نام برچسب عنصر.

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

نوع توضیح
عنصر

مجموعه HTMLCollection

مجموعه‌ای از عناصر با نام برچسب مشخص شده.

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

جزئیات فنی

این روش یک مجموعه NodeList (می‌توان آن را به عنوان یک آرایه خوانا در نظر گرفت) برمی‌گرداند که شامل تمام Element‌های مستند با نام برچسب مشخص شده است، و ترتیب آن‌ها بر اساس ترتیب ظاهر در مستند منبع است.

مجموعه NodeList یک «زنده» است، یعنی اگر در مستند به عناصر با نام برچسب مشخص شده اضافه یا حذف شوند، محتوای آن به طور خودکار به‌روزرسانی می‌شود.

در مستند HTML، فرمت حروف بزرگ و کوچک مهم نیست، بنابراین می‌توان از هر فرمت حروف بزرگ و کوچک استفاده کرد tagName، که با تمام برچسب‌های مشابه در مستند جستجو می‌کند، بدون توجه به فرمت حروف بزرگ و کوچک استفاده شده در مستند منبع.tagName فقط با برچسب‌هایی که نام و فرمت حروف بزرگ و کوچک دقیقاً مشابه نام منبع دارند مطابقت دارد.

توجه:رابط Element یک روش هم‌نام تعریف کرده است که فقط از درخت مستند جستجو می‌کند. علاوه بر این، رابط HTMLDocument یک روش تعریف کرده است مетод getElementByName()، که بر اساس ارزش نام属性 جستجو می‌کند (نه نام برچسب).

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

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

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

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

صفحات مرتبط

دستورالعمل JavaScript:element.getElementsByTagName()

آموزش JavaScript:لیست گره‌های HTML DOM JavaScript