HTML DOM Document getElementById() method

Definition and Usage

getElementById() The method returns the element with the specified id value.

If the element does not exist,getElementById() The method will return null.

getElementById() This is one of the most commonly used methods in HTML DOM. It is almost used every time you want to read or edit an HTML element.

Hint

Any id should be unique, but:

If there are two or more elements with the same id: getElementById() Returns the first one.

See also:

getElementsByTagName() method

getElementsByClassName() method

querySelector() method

querySelectorAll() method

Instance

Example 1

Get an element with a specified id:

document.getElementById("demo");

Try it yourself

Example 2

Get an element and change its color:

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

Try it yourself

Example 3

or only change its color:

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

Try it yourself

Syntax

document.getElementById(elementId)

Parameter

Parameter Description
elementId Required. The id value of the element.

Return Value

Type Description
Object

elements with the specified id.

If not found, it will return null.

Technical Details

getElementById() is an important and commonly used method because it provides a convenient way to obtain the Element object representing the specified document element.

This method will retrieve the id attribute value of elementId nodes, and returns it. If no such element Element is found, it will return null. The value of the id attribute is unique in the document; if this method finds multiple Element nodes with the specified elementId The Element node, which will randomly return one such Element node, or return null.

Note:The name of this method starts with Id ending, not ID，do not spell it wrong!

In HTML documents, this method always retrieves the attribute with the specified id. Please use HTMLDocument.getElementByName() methods, to find HTML elements based on the value of their name attribute.

In XML documents, this method is used to find any attribute of type id, regardless of the name of the attribute. If the type of the XML attribute is unknown (such as when the XML parser ignores or cannot locate the DTD of the document), this method always returns null. In client-side JavaScript, this method is not often used with XML documents. In fact,getElementById() The method was originally defined as a member of the HTMLDocument interface, but it was later moved into the Document interface in the second level DOM.

Browser Support

document.getElementById() It is a DOM Level 2 (2001) feature.

All browsers support it:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support 9-11 Support Support Support Support

Related Pages

CSS Tutorial:CSS Syntax

CSS Reference Manual:CSS #id Selector

HTML DOM Reference Manual:HTML DOM id Attribute

HTML DOM Reference Manual:HTML DOM Style Object