getElementsByTagName() is a method (or function) that get an array filled with all the elements in the document that have the specified tag name sent as a parameter.
For example:

- refers to all DIV tags.
This function stores the items into an array-object (a sequential array), where the keys are integers starting from 0.
If we wanna refer to the first <div>, we use: - For the second <div>, we use index [1], and so on.

• Yyou can use a wildcard symbol ( * ) to get a collection of all the tag elements in a portion of the document. For example, to get a list of all the tagged elements in the table object, you can write:
• To get the number of elements, you can use the length property:
<script type="text/javascript"><!--
var divs = document.getElementsByTagName('div');
var nr_divs = divs.length;

1. Applying a property to elements with the same tag

To apply a property to the HTML elements that have the same tag, you have to traverse the Array obtained by the getElementsByTagName() method. As a general sintax, it can be used the following code:
 var elms = document.getElementsByTagName('tagName');
 for (var i=0; i<elms.length; i++) {
- "elms[i].property" apply the "property" to all "elms" (tag elements).

Here's an example:
<script type="text/javascript"><!--
function ad_style(tag) {
  // Gets an array-object with all the tags specified in 'tag' parameter
  var get_tags = document.getElementsByTagName(tag);

  // traverse the get_tags array
  for (var i=0; i<get_tags.length; i++) {
    // assigns style properties
    get_tags[i].style.textDecoration = 'underline';
    get_tags[i].style.color = 'blue';
<h4 style="cursor:pointer;" onclick="ad_style('span')"><u>Click</u></h4>
Content with three SPAN tags:<br /> : <span>free</span> web <span>Courses</span> and <span>tutorials</span>.
- When you click on a specifically defined word (Click), the text inside each <span> tag will be underlined and blue


Content with three SPAN tags: : free web Courses and tutorials.

2. getElementById() and getElementsByTagName()

When you use "document.getElementsByTagName('tagName')" it gets a reference to all 'tagName' in the HTML document. There are cases when you want to get only the tags within another tag. In this case, add an ID to that HTML element. In the JS script you can use getElementById() to get an object of that element, than, you can apply "getElementsByTagName()" to that object.
var variable = document.getElementById("id").getElementsByTagName("tagName");
<script type="text/javascript"><!--
function ad_style2(id, tag) {
  // gets the element with the ID passed to 'id' parameter
  var el_id = document.getElementById(id);

  // gets al 'tags' inside the "el_id"
  var get_tags = el_id.getElementsByTagName(tag);

  // travers the get_tags array
  for (var i=0; i<get_tags.length; i++) {
    // applyes css style
    get_tags[i].style.color = 'blue';
    get_tags[i].style.fontWeight = 'bold';
<h4 style="cursor:pointer;" onclick="ad_style2('ul2', 'li')"><u>Click</u></h4>
<ul id="ul1">
  <li>Text within ul1 ...</li>
  <li>Text within ul1 ...</li>
  <li>Text within ul1 ...</li>
</ul><hr />
<ul id="ul2">
  <li>Text within ul2 ...</li>
  <li>Text within ul2 ...</li>
  <li>Text within ul2 ...</li>
- The "ad_style2(id, tag)" function uses the first parameter (id) for the ID of the main element, that contains the 'tag' elements, whose name is passed in the second parameter.
- This function will set CSS style properties only to <li> tags inside the <ul> with id="ul2"
- You can use the same function for other (id and tag) groups.
- This example output the fallowing content. Click on the "Click" word to see the result.


3. getAttribute() and getElementsByTagName()

There are cases when you want to apply JavaScript effects or properties only to some elements with the same attribute, from a group of same tags.
If you want to add a JS effect or property to HTML elements that have the same class attribute (and the same tag), use the getAttribute('class') method inside the "for()" instruction used to traverse the Array obtained by "getElementsByTagName()".
var elms = document.getElementsByTagName(tagName);
for(var i=0; i<elms.length; i++) {
  if (elms[i].getAttribute('class')=='className') {
    // JS code ...

To understand better, study the following example. It has three <span> tags in a paragraph, and clicking on the word "Click", will call a JS function that adds a background color only to the SPAN tags with class = "cls".
<script type="text/javascript"><!--
function ad_style3(tag, clasa) {
  // gets the 'tag' elements
  var get_tags = document.getElementsByTagName(tag);

  // traverse the 'get_tags' array
  for (var i=0; i<get_tags.length; i++) {
    // if the element has the class fom 'clasa' parameter
    if (get_tags[i].getAttribute('class')==clasa) {
      // apply 'backgroundColor'
      get_tags[i].style.backgroundColor = '#adfead';
<h4 style="cursor:pointer;" onclick="ad_style3('span', 'cls')"><u>Click</u></h4>
<p>Content with three SPAN tags:<br /> Web <span class="cls">Courses</span>, and <span class="cls">tutorials</span>, all <span>free</span>.</p>
- Click on the Click word to see the result.


Content with three SPAN tags: Web Courses, and tutorials, all free.

4. Getting the tags when the page is loaded

Adding JavaScript events (like onclick(), onmouseover(), ...) in a HTML tag, can make a function to be called when that event is triggered. But when you want to apply a JS event to multiple HTML elements, you have to add that event-attribute to each of them. This thing can aglomerate the HTM code, and it's better when you can separate the HTML and JavaScript code.
There is another way too. JavaScript is able to get the HTML elements and store events in memory, when the page is loaded, without adding event-attribute in HTML tag.
To do that, basically you have to create a function as a value of a variable ( var varName = function() { ... } ) and to call it with the window.onload property ( window.onload = varName; ), it makes that function to be executed when the page is loaded.

Study the code of the following example. It takes the contents and the "class" attribute value of each <li> tag when the page is loaded. These values can be displayed in an alert window when you click on <li> tags.
<title>Preloading tags</title>
<style type="text/css">
  .cli { cursor:pointer; }
<script type="text/javascript">
// creates a function as variable
var get_li = function () {
  // gets the LI tags
  var tags_li = document.getElementsByTagName('li');
  var nr_li = tags_li.length;		// gets the number of LI tags

  // traverse the "tags_li" array
  for (i=0; i<nr_li; i++) {
    // apply the 'onclick' event to each, assigning a function that must be called by this event
    tags_li[i].onclick = function () {
      var clasa = this.getAttribute('class');		// gets the value of class attribute
      var continut = this.textContent || this.innerText;	// gets te content
      alert('class = '+ clasa+ "\n"+ continut);		// sets the Alert
      return false;

// calls the 'get_li' variable when the page is loaded
window.onload = get_li;
  <li class="cli"></li>
  <li class="cli"></li>
  <li class="cli"></li>
- Notice that has not been added any "onclick" attribute, however, this event is stored in memory and when you click on each <li> it displays an Alert with its data.
- You can test this example below:

Daily Test with Code Example

Which tag adds a new line into a paragraph?
<b> <br> <p>
First line ...<br>
Other line...
Which CSS property can be used to add space between letters?
text-size word-spacing letter-spacing
#id {
  letter-spacing: 2px;
What JavaScript function can be used to get access to HTML element with a specified ID?
getElementById() getElementsByTagName() createElement()
var elm = document.getElementById("theID");
var content = elm.innerHTML;
Click on the "echo" correct instruction.
echo "" echo ""; echo """;
echo "Address URL:";
Working with getElementsByTagName

Last accessed pages

  1. Bubbles3 (8621)
  2. Get search data from URL address in JavaScript (1501)
  3. Update and Delete MySQL data with data from Form (172)
  4. AJAX with POST and PHP (7442)
  5. Artist Room (74)

Top accessed pages

  1. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (47733)
  2. Read Excel file data in PHP - PhpExcelReader (35866)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (35489)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (31998)
  5. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (29264)