روش getElementById() از Document HTML DOM

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

getElementById() این روش عنصری با id مشخصی را بازخواهد گرداند.

اگر عنصر وجود نداشته باشد،getElementById() این روش بازخواهد داد null。

getElementById() این روش یکی از روش‌های بسیار استفاده شده در HTML DOM است. تقریباً در هر بار که می‌خواهید یک عنصر HTML را بخوانید یا ویرایش کنید، از آن استفاده می‌کنید.

توجه:

هر id باید منحصر به فرد باشد، اما:

اگر دو یا چند عنصر با یک id مشترک وجود داشته باشد، getElementById() اولین را بازگرداند.

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

روش getElementsByTagName()

روش getElementsByClassName()

روش querySelector()

روش querySelectorAll()

مثال

مثال 1

عنصر دارای id مشخصی را بدست آورید:

document.getElementById("demo");

亲自试一试

مثال 2

عنصر را بدست آورید و رنگ آن را تغییر دهید:

const myElement = document.getElementById("demo");
myElement.style.color = "red";

亲自试一试

مثال 3

یا صرفاً رنگ آن را تغییر دهید:

document.getElementById("demo").style.color = "red";

亲自试一试

语法

document.getElementById(elementId)

参数

参数 描述
elementId 必需。元素的 id 值。

返回值

类型 描述
对象

拥有指定 id 的元素。

如果未找到，则返回 null。

技术细节

getElementById() 方法是一个重要的常用方法，因为它为获取表示指定的文档元素的 Element 对象提供了简便的方法。

该方法将检索 id 属性的值为 elementId 的 Element 节点，并将它返回。如果没有找到这样的元素 Element，它将返回 null。id 属性的值在文档中是唯一的，如果该方法找到多个拥有指定 elementId 的 Element 节点，它将随机返回一个这样的 Element 节点，或者返回 null。

注意：该方法的名称以 Id 结尾，不是 ID，不要拼错！

在 HTML 文档中，该方法总是检索拥有指定 id 的属性。请使用 HTMLDocument.getElementByName() 方法，根据它们的 name 属性中的值来查找 HTML 元素。

在 XML 文档中，这个方法则是使用类型为 id 的任一属性来查找，而不管这个属性的名称是什么。如果 XML 属性的类型是未知的（如 XML 解析器忽略了或不能定位文档的 DTD），该方法总是返回 nullبائیں سمت میں، اس طریقے کو اکثر XML دستاویزات کے ساتھ استعمال نہیں کیا جاتا۔ در حقیقت،getElementById() اس طریقے کو ابتدا میں HTMLDocument کا ایک رکن کے طور پر شمار کیا گیا تھا، لیکن بعد میں دومین DOM میں Document کی کوشش میں شامل کیا گیا تھا۔

براوزر کی پشتیبانی

document.getElementById() یہ DOM Level 2 (2001) کی خصوصیت ہے۔

تمام براوزر اس پر پشتیبانی کرتے ہیں:

کروم آئی ای ایج فائر فاکس سافری اوپرا
کروم آئی ای ایج فائر فاکس سافری اوپرا
پشتیبانی 9-11 پشتیبانی پشتیبانی پشتیبانی پشتیبانی

مربوط صفحات

CSS تعلیم:CSS زبان

CSS مراجعہ دستور زبان:CSS #id انتخاب گر

HTML DOM مراجعہ دستور زبان:HTML DOM id کا انداز

HTML DOM مراجعہ دستور زبان:ایچ تی ایم ال ڈوم اسٹائل آپائٹ