Javascript getelementsbytagname all tags

HTML DOM Element getElementsByTagName()

Change the font size of the second

element in «myDIV»:

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

Description

The getElementsByTagName() method returns a collection of child elements with a given tag name.

The getElementsByTagName() method returns an HTMLCollection.

Note

The tag name «*» returns all child elements.

See Also:

NodeList

A NodeList is an array-like collection (list) of nodes.

The nodes in the list can be accessed by index. The index starts at 0.

The length Poperty returns the number of nodes in the list.

Syntax

Parameters

Return Value

Type	Description
NodeList	The element’s child elements with the given tagname. The elements are sorted as they appear in the source code.

More Examples

Change the background color of all

elements inside «myDIV»:

const div = document.getElementById(«myDIV»);
const nodes = x.getElementsByTagName(«P»);
for (let i = 0; i < nodes.length; i++) nodes[i].style.backgroundColor = "red";
>

Change the background color of the fourth element (index 3) inside «myDIV»:

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

Change the background color of all elements inside «myDIV»:

const div = document.getElementById(«myDIV»);
const nodes = div.getElementsByTagName(«*»);
for (let i = 0; i < nodes.length; i++) nodes[i].style.backgroundColor = "red";
>

Browser Support

element.getElementsByTagName() is supported in all browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Yes

Источник

Element: getElementsByTagName() method

The Element.getElementsByTagName() method returns a live HTMLCollection of elements with the given tag name.

All descendants of the specified element are searched, but not the element itself. The returned list is live, which means it updates itself with the DOM tree automatically. Therefore, there is no need to call Element.getElementsByTagName() with the same element and arguments repeatedly if the DOM changes in between calls.

When called on an HTML element in an HTML document, getElementsByTagName lower-cases the argument before searching for it. This is undesirable when trying to match camel-cased SVG elements (such as ) in an HTML document. Instead, use Element.getElementsByTagNameNS() , which preserves the capitalization of the tag name.

Element.getElementsByTagName is similar to Document.getElementsByTagName() , except that it only searches for elements that are descendants of the specified element.

Syntax

getElementsByTagName(tagName) 

Parameters

• tagName is the qualified name to look for. The special string «*» represents all elements. For compatibility with XHTML, lower-case should be used.

Return value

A live HTMLCollection of elements with a matching tag name, in the order they appear. If no elements are found, the HTMLCollection is empty.

Examples

// Check the status of each data cell in a table const table = document.getElementById("forecast-table"); const cells = table.getElementsByTagName("td"); for (const cell of cells)  const status = cell.getAttribute("data-status"); if (status === "open")  // Grab the data > > 

Specifications

Browser compatibility

BCD tables only load in the browser

Found a content problem with this page?

This page was last modified on Apr 7, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

Document: getElementsByTagName() method

The getElementsByTagName method of Document interface returns an HTMLCollection of elements with the given tag name.

The complete document is searched, including the root node. The returned HTMLCollection is live, meaning that it updates itself automatically to stay in sync with the DOM tree without having to call document.getElementsByTagName() again.

Syntax

Parameters

A string representing the name of the elements. The special string * represents all elements.

Return value

A live HTMLCollection of found elements in the order they appear in the tree.

Note: The latest W3C specification says returned value is an HTMLCollection ; however, this method returns a NodeList in WebKit browsers. See Firefox bug 14869 for details.

Examples

In the following example, getElementsByTagName() starts from a particular parent element and searches top-down recursively through the DOM from that parent element, building a collection of all descendant elements which match the tag name parameter. This demonstrates both document.getElementsByTagName() and the functionally identical Element.getElementsByTagName() , which starts the search at a specific element within the DOM tree.

Clicking the buttons uses getElementsByTagName() to count the descendant paragraph elements of a particular parent (either the document itself or one of two nested elements).

DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> title>getElementsByTagName exampletitle> script> function getAllParaElems()  const allParas = document.getElementsByTagName("p"); const num = allParas.length; alert(`There are $num> paragraph in this document`); > function div1ParaElems()  const div1 = document.getElementById("div1"); const div1Paras = div1.getElementsByTagName("p"); const num = div1Paras.length; alert(`There are $num> paragraph in #div1`); > function div2ParaElems()  const div2 = document.getElementById("div2"); const div2Paras = div2.getElementsByTagName("p"); const num = div2Paras.length; alert(`There are $num> paragraph in #div2`); > script> head> body style="border: solid green 3px"> p>Some outer textp> p>Some outer textp> div id="div1" style="border: solid blue 3px"> p>Some div1 textp> p>Some div1 textp> p>Some div1 textp> div id="div2" style="border: solid red 3px"> p>Some div2 textp> p>Some div2 textp> div> div> p>Some outer textp> p>Some outer textp> button onclick="getAllParaElems();"> Show all p elements in document button> br /> button onclick="div1ParaElems();"> Show all p elements in div1 element button> br /> button onclick="div2ParaElems();"> Show all p elements in div2 element button> body> html> 

Notes

When called on an HTML document, getElementsByTagName() lower-cases its argument before proceeding. This is undesirable when trying to match camelCase SVG elements in a subtree in an HTML document. document.getElementsByTagNameNS() is useful in that case. See also Webkit bug 499656.

document.getElementsByTagName() is similar to Element.getElementsByTagName() , except that its search encompasses the whole document.

Specifications

Browser compatibility

BCD tables only load in the browser

See also

• Element.getElementsByTagName()
• document.getElementById() to return a reference to an element by its id
• document.getElementsByName() to return a reference to an element by its name
• document.querySelector() for powerful selectors via queries like ‘div.myclass’

Found a content problem with this page?

This page was last modified on Apr 7, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

HTML DOM Document getElementsByTagName()

Change the inner HTML of the first

element in the document:

Description

The getElementsByTagName() method returns a collection of all elements with a specified tag name.

The getElementsByTagName() method returns an HTMLCollection.

The getElementsByTagName() property is read-only.

Note

getElementsByTagName(«*») returns all elements in the document.

HTMLCollection

An HTMLCollection is an array-like collection (list) of HTML elements.

The elements in a collection can be accessed by index (starts at 0).

The length Property returns the number of elements in the collection.

See Also:

Syntax

Parameters

Return Value

Type	Description
Object	An HTMLCollection object. A collection of elements with a specified tag name. The elements are sorted as they appear in the document.

More Examples

Change the background color of all

elements:

const collection = document.getElementsByTagName(«P»);
for (let i = 0; i < collection.length; i++) collection[i].style.backgroundColor = "red";
>

Related Pages

Browser Support

document.getElementsByTagName() is a DOM Level 1 (1998) feature.

It is fully supported in all browsers:

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

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник