Document.getElementsByName

JavaScript

Document.getElementByNameは、指定されたnameのタグ要素(Element)オブジェクトを取得する。

ドキュメントオブジェクトモデル（DOM） - とほほのWWW入門

まず、

<html>
  <head>
    <title>Document#getElementsByName</title>
  </head>
  <body>
    <script type="text/javascript">
    <!--
    function func(){
      var text1 = document.getElementsByName("text1");
      var str1 = text1.value;
      alert(str1);
    }
    // -->
    </script>
    <input name="text1" type="text" value="abcde">
    <input id="button1" type="button" value="button1" onclick="func()">
  </body>
</html>

これまでみたいにnameを指定してvalueを取りに行くと、

undefined
undefined

undefined。
そもそも、getElement"s"ByNameでわかるとおり配列というかリストで来る。
なので、

<html>
  <head>
    <title>Document#getElementsByName</title>
  </head>
  <body>
    <script type="text/javascript">
    <!--
    function func(){
      var text1 = document.getElementsByName("text1");
      var str1 = text1[0].value;
      alert(str1);
    }
    // -->
    </script>
    <input name="text1" type="text" value="abcde">
    <input id="button1" type="button" value="button1" onclick="func()">
  </body>
</html>

添字を指定すると、

ちゃんと取得できる
ちゃんと取得できる

ちゃんと取得できる。
そもそも何で来てるのか。

<html>
  <head>
    <title>Document#getElementsByName</title>
  </head>
  <body>
    <script type="text/javascript">
    <!--
    function func(){
      var text1 = document.getElementsByName("text1");
      alert(text1);
    }
    // -->
    </script>
    <input name="text1" type="text" value="abcde">
    <input name="text1" type="text" value="vwxyz">
    <input id="button1" type="button" value="button1" onclick="func()">
  </body>
</html>

nameが同じもの2つにして、text1自体をalertしてみる。

なるほどNodeList。リストだね。
なるほどNodeList。リストだね。

なるほどNodeList。リストだね。

それぞれ添字指定しておけば、

abcde
abcde

それぞれの値を、

vwxyz
vwxyz

取得できる。

Sample/js/Document/getElementsByName/src/Document at master · bg1bgst333/Sample · GitHub