متد element.getElementsByTagName

مثال (متد element.getElementsByTagName)

تغییر دادن محتوای HTML از اولین عنصر <li>(اندیس 0) در یک list:

var list = document.getElementsByTagName("UL")[0];
list.getElementsByTagName("LI")[0].innerHTML = "Milk";

قبل از تغییر دادن متن:

Coffee
Tea

بعد از تغییر دادن متن:

Milk
Tea

خودتان امتحان کنید »

تعریف و کاربرد

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

شیء NodeList یک مجموعه از گره ها را مشخص می کند. گره ها می توانند به وسیله ی اندیس ها مورد دسترسی قرار بگیرند. اندیس شروع نیز 0 می باشد.

نکته: شما می توانید از خصوصیت length در شیء NodeList برای مشخص کردن تعداد گره های فرزند، با یک تگ نام مشخص استفاده کنید. سپس شما می توانید بر روی تمام گره ها یک حلقه ایجاد کرده و اطلاعات مورد نظر خود را استخراج کنید.

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

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

اعداد داخل جدول زیر نشان دهنده ی اولین ورژن مرورگری است که به طور کامل از این متد پشتیبانی می کند.

متد
getElementsByTagName()	1.0	6.0	3.0	3.0	9.5

نحوه استفاده

element.getElementsByTagName(tagname)

مقادیر پارامترها

پارامتر	Type	توضیحات
tagname	String	ضروری. نام تگ عناصر فرزندی که شما می خواهید به دست بیاورید.

جزئیات تکنیکی

DOM Version	Core Level 1 کلیه توابع و خصوصیت های شیء Element در JavaScript
مقدار برگشتی	یک شیء NodeList که مشخص کننده ی یک مجموعه از عناصر فرزند یک عنصر با یک نام تگ مشخصمی باشد. عناصر درون مجموعه ی برگردانده شده همان گونه که در سورس کد ظاهر می شوند، ذخیره می شوند.

مثال - خودتان امتحان کنید

مثال (متد element.getElementsByTagName)

فهمیدن اینکه چه تعداد عنصر <p> درون یک عنصر <div> وجود دارند(استفاده از خصوصیت length از شیء NodeList):

var x = document.getElementById("myDIV").getElementsByTagName("P").length;

خروجی x در کد بالا

خودتان امتحان کنید »

مثال (متد element.getElementsByTagName)

تغییر دادن رنگ پس زمینه ی دومین عنصر <p>(اندیس 1) درون یک عنصر <div>:

var x = document.getElementById("myDIV");
x.getElementsByTagName("P")[1].style.backgroundColor = "red";

خودتان امتحان کنید »

مثال (متد element.getElementsByTagName)

تغییر دادن رنگ پس زمینه ی تمام عناصر <p>، که درون یک عنصر <div> قرار دارند:

var x = document.getElementById("myDIV");
var y = x.getElementsByTagName("P");
var i;
for (i = 0; i < y.length; i++) {
y[i].style.backgroundColor = "red";
}

خودتان امتحان کنید »

مثال (متد element.getElementsByTagName)

تغییر دادن رنگ پس زمینه ی چهارمین عنصر(اندیس 3) درون یک عنصر <div>:

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

خودتان امتحان کنید »

مثال (متد element.getElementsByTagName)

استفاده از پارامتر "*".

تغییر دادن رنگ پس زمینه ی تمام عناصر درون یک عنصر <div>:

var x = document.getElementById("myDIV");
var y = x.getElementsByTagName("*");
var i;
for (i = 0; i < y.length; i++) {
y[i].style.backgroundColor = "red";
}

خودتان امتحان کنید »