JavaScript document.getElementsByName()

The JavaScript method getElementsByName() returns all elements having the specified name. For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p name="redTxt">This is para one</p>
   <p name="redTxt">This is para two</p>
   
   <script>
      var ec = document.getElementsByName("redTxt");
      for(i=0; i<ec.length; i++)
      {
         ec[i].style.color = "red";
      }
   </script>
   
</body>
</html>

Output

This is para one

This is para two

The HTML document in the preceding example defines two paragraphs, both with the name attribute set to "redTxt". In this example, the JavaScript code enclosed in a script tag obtains a reference to all elements with the name "redTxt" via the document.getElementsByName(). This method returns a NodeList object containing all the elements with the same name. The code then uses a for loop to loop through each element in the NodeList, setting the color CSS property to "red" for each p element. This causes the text in each paragraph to be red.

JavaScript getElementsByName() Syntax

The syntax of the getElementsByName() method in JavaScript is:

document.getElementsByName(x)

x refers to the name; to get the collections of all elements with this specified x (name).

JavaScript getElementsByName() example

Consider the following code as an example of using the getElementsByName() function in JavaScript:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <form>
      Username: <input type="text" name="user"><br>
      Password: <input type="email" name="pass"><br>
      <button name="btn">Login</button>
   </form>
   
   <script>
      function changeStyle(element)
      {
         element.style.backgroundColor = "#ccc";
         element.style.padding = "2px 8px";
      }
      var x = document.getElementsByName("user")[0];
      changeStyle(x);
      var x = document.getElementsByName("pass")[0];
      changeStyle(x);
      var x = document.getElementsByName("btn")[0];
      x.style.padding = "4px 18px";
      x.style.margin = "8px 8px";
      x.style.backgroundColor = "purple";
      x.style.color = "whitesmoke";
   </script>
   
</body>
</html>

Output

In the above example, [0] is used to get the first element with the specified name. If we do not specify the index, then by default the getElementsByName() method returns a collection of elements, not a single element.

JavaScript Online Test

« Previous Tutorial Next Tutorial »

Liked this post? Share it!