Search notes:

DOM example: document.getElementsByName

document.getElementsByName('val') returns an array of nodes whose name attribute has the value val.

In the following example, there are four <div> elements that each have a name attribute. The getElementsByName('name_one') returns the two nodes where tha attribute value is name_one. These are assigned to the variable node_list and then, the found elements are iterated over with the JavaScript for statement. In the iteration body, the content of these divs is changed with the innerHTML property.

<!DOCTYPE html>
<html>
<head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <title>document.getElementsByName</title>

  <style type="text/css">
    div {
      height:  20px;
      width:  300px;
      margin: 5px;
      border: #ffbbaa 1px solid;
    }
  </style>

  <script type="text/javascript">
    
     function main() { 
       try {
         var node_list = document.getElementsByName('name_one');

         for (var i = 0; i<node_list.length; i++) {

           node_list[i].innerHTML = "This node matches the name <b>name_one</b>";

         };
     
       } catch(e) {alert (e);}
     }


  </script>
</head>

<body onload='main();'>

  <div name="name_one">ABC</div>
  <div name="name_two">DEF</div>
  <div name="name_one">GHI</div>
  <div name="name_two">JKL</div>

</body>
</html>

Github repository about-Document-Object-Model, path: /Node/Document/getElementsByName.html

After opening the HTML document in a browser, the content is rendered like so:

DOM example: document.getElementsByName

See also