JavaScript document.getElementsByName()

The JavaScript getElementsByName() returns all elements having 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

JavaScript getElementsByName() Syntax

The syntax of 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

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 above example, [0] is used to get the first element with 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 »