مетод getElementsByTagName() در HTML DOM Element

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

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

نکته:مقدار پارامتر "*" برگرداندن تمام فرزندان عناصر.

لطفاً ببینید:

مетод getElementsByClassName()

مетод querySelector()

مетод querySelectorAll()

NodeList

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

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

ویژگی lengthبرگرداندن تعداد گره‌های لیست.

مثال

مثال 1

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

const list = document.getElementsByTagName("UL")[0];
list.getElementsByTagName("li")[0].innerHTML = "Milk";

آزمایش کنید

مثال 2

تعداد عناصر <p> در "myDIV":

const element = document.getElementById("myDIV");
const nodes = element.getElementsByTagName("p");
let numb = nodes.length;

آزمایش کنید

مثال 3

تغییر اندازه‌ی فونت عناصر <p> دوم در "myDIV":

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

آزمایش کنید

مثال 4

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

const div = document.getElementById("myDIV");
const nodes = x.getElementsByTagName("P");
برای (let i = 0; i < nodes.length; i++) {
  nodes[i].style.backgroundColor = "red";
}

آزمایش کنید

مثال 5

تغییر رنگ پس‌زمینه‌ی عناصر چهارم (索引 3) در "myDIV":

const div = document.getElementById("myDIV");
div.getElementsByTagName("*")[3].style.backgroundColor = "red";

آزمایش کنید

مثال 6

با استفاده از پارامتر "*"، رنگ پس‌زمینه همه عناصر موجود در "myDIV" را تغییر دهید:

const div = document.getElementById("myDIV");
const nodes = div.getElementsByTagName("*");
برای (let i = 0; i < nodes.length; i++) {
  nodes[i].style.backgroundColor = "red";
}

آزمایش کنید

نحوه استفاده

element.getElementsByTagName(tagname)

پارامتر

پارامتر توضیح
tagname ضروری. نام برچسب فرزند.

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

نوع توضیح
NodeList

فرزندان عناصری که دارای نام برچسب مشخص شده هستند.

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

جزئیات فنی

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

توجه داشته باشید

رابط Documentهمچنین مетод getElementsByTagName()نزدیک است، اما به جای جستجوی فرزندان یک عنصر، کل سند را جستجو می‌کند.

این روش را با مетод HTMLDocument.getElementsByName() با یکدیگر اشتباه می‌گیرند، در حالی که دومی بر اساس ارزش ویژگی name عناصر جستجو می‌کند، نه بر اساس نام برچسب آن‌ها.

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

همه مرورگرها از این پشتیبانی می‌کنند element.getElementsByTagName():

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