ryoakg
2/16/2017 - 6:56 AM

html-name-attribute-in-js.html

html-name-attribute-in-js.html
content_copyfile_download
<html>
  <head>
    <meta name="meta">
  </head>
  <body>
    <blockquote cite="https://developer.mozilla.org/en-US/docs/Web/API/Element/name">
      name gets or sets the name property of a DOM object; it only applies to the following elements: &lt;a&gt;, &lt;applet&gt;, &lt;button&gt;, &lt;form&gt;, &lt;frame&gt;, &lt;iframe&gt;, &lt;img&gt;, &lt;input&gt;, &lt;map&gt;, &lt;meta&gt;, &lt;object&gt;, &lt;param&gt;, &lt;select&gt;, and &lt;textarea&gt;.
    </blockquote>
    <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/name">Element.name | MDN</a>

    <p>
      With Google Chrome, only &lt;form&gt;, &lt;iframe&gt;, &lt;img&gt;, and &lt;object&gt; gives a value, and iframe as Window object.<br />
      With Firefox, only &lt;applet&gt;, &lt;form&gt;, &lt;img&gt;, and &lt;object&gt; gives a value.
    </p>
    <hr />

    <a name="a" href="https://developer.mozilla.org/en-US/docs/Web/API/Element/name">a</a>
    <applet name="applet"></applet>

    <form name="form">
      <button name="button"></button>
      <textarea name="textarea"></textarea>
      <input name="input">
      <select name="select"></select>
    </form>

    <frameset>
      <frame name="frame">
    </frameset>

    <iframe name="iframe"></iframe>
    <img name="img">
    <map name="map"></map>
    <object name="object">
      <param name="param">
    </object>

    <script>
     ['a',
      'applet',
      'button',
      'form',
      'frame',
      'iframe',
      'img',
      'input',
      'map',
      'meta',
      'object',
      'param',
      'select',
      'textarea',
     ].forEach(function(x){
       console.log('document.'+x+': '+document[x]);
     });

     ['button','input','select','textarea'].forEach(function(x){
       console.log('document.form.elements.'+x+': '+document.form.elements[x]);
     })
    </script>
  </body>
</html>