- JavaScript Basics
- JavaScript Tutorial
- JavaScript: where to write
- JavaScript: how to display
- JavaScript: keywords
- JavaScript: comments
- JavaScript: variables
- JavaScript: operators
- JavaScript: data types
- JavaScript Conditional Statements
- JavaScript: if-else
- JavaScript: switch
- JavaScript: for loop
- JavaScript: while loop
- JavaScript: do-while loop
- JavaScript: break and continue
- JavaScript Popup Boxes
- JavaScript: alert box
- JavaScript: confirm box
- JavaScript: prompt box
- JavaScript Popular Topics
- JavaScript: functions
- JavaScript: innerHTML
- JavaScript: getElementById()
- JavaScript: getElementsByClassName()
- JavaScript: getElementsByName()
- JavaScript: getElementsByTagName()
- JavaScript: querySelector()
- JavaScript: querySelectorAll()
- JavaScript: document.write()
- JavaScript: console.log()
- JavaScript: boolean
- JavaScript: events
- JavaScript: Math object
- JavaScript: Math.random()
- JavaScript: Number()
- JavaScript: parseInt()
- JavaScript: parseFloat()
- JavaScript Arrays
- JavaScript: array
- JavaScript: find length of array
- JavaScript: add element at beginning
- JavaScript: add element at end
- JavaScript: remove first element
- JavaScript: remove last element
- JavaScript: get first index
- JavaScript: get last index
- JavaScript: reverse an array
- JavaScript: sort an array
- JavaScript: concatenate arrays
- JavaScript: join()
- JavaScript: toString()
- JavaScript: from()
- JavaScript: check if value exists
- JavaScript: check if array
- JavaScript: slice an array
- JavaScript: splice()
- JavaScript: find()
- JavaScript: findIndex()
- JavaScript: entries()
- JavaScript: every()
- JavaScript: fill()
- JavaScript: filter()
- JavaScript: forEach()
- JavaScript: map()
- JavaScript Strings
- JavaScript: string
- JavaScript: length of string
- JavaScript: convert to lowercase
- JavaScript: convert to uppercase
- JavaScript: string concatenation
- JavaScript: search()
- JavaScript: indexOf()
- JavaScript: search() vs. indexOf()
- JavaScript: match()
- JavaScript: match() vs. search()
- JavaScript: replace()
- JavaScript: toString()
- JavaScript: String()
- JavaScript: includes()
- JavaScript: substr()
- JavaScript: slice string
- JavaScript: charAt()
- JavaScript: repeat()
- JavaScript: split()
- JavaScript: charCodeAt()
- JavaScript: fromCharCode()
- JavaScript: startsWith()
- JavaScript: endsWith()
- JavaScript: trim()
- JavaScript: lastIndexOf()
- JavaScript Date and Time
- JavaScript: date and time
- JavaScript: Date()
- JavaScript: getFullYear()
- JavaScript: getMonth()
- JavaScript: getDate()
- JavaScript: getDay()
- JavaScript: getHours()
- JavaScript: getMinutes()
- JavaScript: getSeconds()
- JavaScript: getMilliseconds()
- JavaScript: getTime()
- JavaScript: getUTCFullYear()
- JavaScript: getUTCMonth()
- JavaScript: getUTCDate()
- JavaScript: getUTCDay()
- JavaScript: getUTCHours()
- JavaScript: getUTCMinutes()
- JavaScript: getUTCSeconds()
- JavaScript: getUTCMilliseconds()
- JavaScript: toDateString()
- JavaScript: toLocaleDateString()
- JavaScript: toLocaleTimeString()
- JavaScript: toLocaleString()
- JavaScript: toUTCString()
- JavaScript: getTimezoneOffset()
- JavaScript: toISOString()
- JavaScript Regular Expression
- JavaScript: regular expression
- JavaScript: RegEx . (dot)
- JavaScript: RegEx \w and \W
- JavaScript: RegEx \d and \D
- JavaScript: RegEx \s and \S
- JavaScript: RegEx \b and \B
- JavaScript: RegEx \0
- JavaScript: RegEx \n
- JavaScript: RegEx \xxx
- JavaScript: RegEx \xdd
- JavaScript: RegEx quantifiers
- JavaScript: RegEx test()
- JavaScript: RegEx lastIndex
- JavaScript: RegEx source
- JavaScript Programs
- JavaScript Programs
JavaScript document.getElementsByTagName()
The JavaScript getElementsByTagName() method returns all elements with the specified tag names. For example:
<!DOCTYPE html> <html> <body> <h2>getElementsByTagName()</h2> <p>This is para one</p> <p>This is para two</p> <h2>The getElementsByTagName() Method</h2> <p>This is para three</p> <p>This is para four</p> <script> var ec = document.getElementsByTagName("h2"); for(var i=0; i<ec.length; i++) { ec[i].style.backgroundColor = "purple"; ec[i].style.padding = "12px"; ec[i].style.color = "white"; } var ec = document.getElementsByTagName("p"); for(var i=0; i<ec.length; i++) { ec[i].style.color = "red"; } </script> </body> </html>
getElementsByTagName()
This is para one
This is para two
The getElementsByTagName() Method
This is para three
This is para four
In above example, the following statement:
var ec = document.getElementsByTagName("h2");
returns all H2 elements and initialized to the ec variable as a collection. And next, using the for loop, I've applied some styles to all H2 elements, one by one. The same process applied to all P (paragraph) elements.
JavaScript getElementsByTagName() syntax
The syntax of the getElementsByTagName() method in JavaScript is:
document.getElementsByTagName(tag)
Note: The document.getElementsByTagName("*") method returns a collection of all elements available in the current HTML document.
JavaScript getElementsByTagName() example
To get the collection of all elements with the specified tag name available inside the specified element, proceed in this way:
element.getElementsByTagName(tag)
where element refers to the element (parent element) inside which all elements with the specified tag name will be returned. For example:
<!DOCTYPE html> <html> <body> <p>This is para one</p> <div id="myDiv"> <p>This is para two</p> <p>This is para three</p> </div> <p>This is para four</p> <script> var element = document.getElementById("myDiv"); var ec = element.getElementsByTagName("p"); for(var i=0; i<ec.length; i++) ec[i].style.color = "red"; </script> </body> </html>
This is para one
This is para two
This is para three
This is para four
Several paragraphs are defined in the HTML document in preceding example, including two paragraphs within a div element with the id attribute "myDiv." Using the document.getElementById() method, the JavaScript code obtains a reference to the div element with the id "myDiv" and stores it in the "element" variable.
The code then calls the "element" variable's getElementsByTagName() method to retrieve all of the p elements contained within the div element. This method produces an HTMLCollection object that contains all of the p elements. The code then uses a for loop to loop through each element in the HTMLCollection, setting the color CSS property to "red" for each p element. This turns the text in each paragraph within the div element red.
« Previous Tutorial Next Tutorial »