Revision 933549 of Document.getElementsByName()

Revision slug: Web/API/Document/getElementsByName
Revision title: Document.getElementsByName()
Revision id: 933549
Created: Oct 13, 2015, 6:27:43 AM
Creator: madarche
Is current revision? No
Comment Add See-also section pointing to useful getElementById and querySelector

Tags:

Revision Content

Returns a nodelist collection with a given {{domxref("element.name","name")}} in the (X)HTML document.

Syntax

elements = document.getElementsByName(name)

elements is an live {{domxref("NodeList")}} Collection
name is the value of the name attribute of the element.

Example

<!DOCTYPE html>
<html lang="en">
<head>
 ...
</head>

<body>
<form name="up"><input type="text"></form>
<div name="down"><input type="text"></div>

<script>
var up_forms = document.getElementsByName("up");
console.log(up_forms[0].tagName); // returns "FORM"
</script>
</body>
</html>

Notes

The name attribute is only applicable to (X)HTML documents. The method returns a live {{domxref("NodeList")}} Collection that contains all elements with a given value for the name attribute, such as {{htmlelement("meta")}} or {{htmlelement("object")}} or even if name is placed on elements which do not support a name attribute at all.

The getElementsByName method works differently in different browsers. In IE & Opera, getElementsByName() method will also return elements that have an id attribute with the specified value. so you should be careful not to use the same string as both a name and an ID.

Specifications

Revision Source

<div>{{APIRef("DOM")}}</div>

<p>Returns a nodelist collection with a given {{domxref("element.name","name")}} in the (X)HTML document.</p>

<h2 id="Syntax" name="Syntax">Syntax</h2>

<pre class="syntaxbox">
<em>elements</em> = document.getElementsByName(<em>name</em>) 
</pre>

<ul>
 <li><code>elements</code> is an live {{domxref("NodeList")}} Collection</li>
 <li><code>name</code> is the value of the <code>name</code> attribute of the element.</li>
</ul>

<h2 id="Example" name="Example">Example</h2>

<pre class="brush:html">
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
 ...
&lt;/head&gt;

&lt;body&gt;
&lt;form name="up"&gt;&lt;input type="text"&gt;&lt;/form&gt;
&lt;div name="down"&gt;&lt;input type="text"&gt;&lt;/div&gt;

&lt;script&gt;
var up_forms = document.getElementsByName("up");
console.log(up_forms[0].tagName); // returns "FORM"
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>

<h2 id="Notes" name="Notes">Notes</h2>

<p>The <a href="/en-US/docs/DOM/element.name"><code>name</code></a> attribute is only applicable to (X)HTML documents. The method returns a live {{domxref("NodeList")}} Collection that contains all elements with a given value for the name attribute, such as {{htmlelement("meta")}} or {{htmlelement("object")}} or even if <code>name</code> is placed on elements which do not support a name attribute at all.</p>

<p>The <strong>getElementsByName</strong> method works differently in different browsers. In IE &amp; Opera, getElementsByName() method will also return elements that have an id attribute with the specified value. so you should be careful not to use the same string as both a name and an ID.</p>

<h2 id="Specifications" name="Specifications">Specifications</h2>

<ul>
 <li><a href="https://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-71555259">DOM Level 2 HTML: getElementsByName</a></li>
 <li><a href="https://www.whatwg.org/html/#dom-document-getelementsbyname" title="https://www.whatwg.org/html/#dom-document-getelementsbyname">HTML5: getElementsByName</a></li>
</ul>

<p><!--languages( { "fr": "fr/DOM/document.getElementsByName", "pl": "pl/DOM/document.getElementsByName" } )--></p>

<h2 id="See_also" name="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/document.getElementById">document.getElementById()</a> to return a reference to an element by its ID</li>
 <li><a href="/en-US/docs/Web/API/document.querySelector">document.querySelector()</a> for selectors via queries like <code>'div.myclass'</code></li>
</ul>

Revert to this revision