Javascript getElementsByTagName() Method

Syntax of Javascript getElementsByTagName()

Below is the syntax for the document getelementsbytagname method:

Where:

• tagName is a string representing the specified name of the elements
• elements stores all the elements found with the specified tag name, in the order, they appear.

Parameters of Javascript getElementsByTagName()

• getElementsByTagName() method takes the name of the HTML elements in a string as a parameter. which we want to get. The parameter is required, it is not optional.
• (*) is a special string that is passed as a parameter to retrieve all elements in the document.

Return Value of Javascript getElementsByTagName()

• This function returns live HTMLCollection as an array containing all of the HTML elements.
• The elements are stored in the return array, in the order that they appear in the document
• To access the array elements simply go through all the elements using the length attribute to retrieve any information.

Examples

Consider the following HTML document:

Output:

Before:

After:

Code Explanation:

1. To understand document getelementsbytagname, First, Initialise the paragraph tags in HTML and hide them by setting the display property to none.
2. Select the button Click me which calls the fun() function.
3. In fun() function, use getElementsByTagName() method to store all the < p > tags in a list of all the elements.
4. Fetch the array elements by their index or loop and set the display to visible for each element.
5. Since the return collection of the getElementsByTagName() is live, it will automatically update the visibility on the web page.

How Does Javascript getElementsByTagName() Work?

• When getElementsByTagName() is invoked, it begins with a specific parent element and executes a top-down recursive search from that parent element through the DOM, assembling all descendent elements that match the tag name parameter.

• The complete document is searched, as well as the root node. After that, a live HTMLCollection of items with the corresponding tag name is returned in the order they appear in the document as an ==array==.

• The HTMLCollection that was returned is live, which means that it automatically updates to stay in sync with the DOM tree without needing a call to document again using getElementsByTagName().

Exception

GetElementsByTagName() lowercases its parameter when it is invoked on an HTML document before searching, Hence when you try to match camelCase SVG component (for eg. < radialGradient >) in an HTML document's subtree, GetElementsByTagName() does not gonna work. In that case, you need to use document.getElementsByTagNameNS() which preserves the capitalization of the tag name and gives accurate results.

The function document.getElementsByTagName() is similar to the function document.getElementsByTagName(), except it, searches throughout the entire document.

Supported Browsers

Other browsers like Edge, Internet Explorer, Samsung, and many others are supported.