files/zh-cn/web/api/document/getelementsbyname/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

---
title: Document.getElementsByName()
slug: Web/API/Document/getElementsByName
tags:
  - API
  - DOM
  - Document
  - HTML
  - Method
translation_of: Web/API/Document/getElementsByName
---
<div>{{APIRef("DOM")}}</div>

<p>根据给定的{{domxref("element.name","name")}} 返回一个在 (X)HTML document的节点列表集合。</p>

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

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

<ul>
 <li><code>elements</code> 是一个实时更新的 {{domxref("NodeList")}} 集合。当文档中有同一个name属性的元素被添加或移除时，这个集合会自动更新。</li>
 <li><code>name</code> 是元素的 <code>name</code> 属性的值。</li>
</ul>

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

<pre class="brush:html notranslate">&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">注释</h2>

<p>{{domxref("element.name","name")}} 属性只有在(X)HTML文档中可用。</p>

<p>该方法返回一个live的 {{domxref("NodeList")}}   集合，这个集合包含 {{domxref("element.name","name")}} 属性为指定值的所有元素，例如{{htmlelement("meta")}} 、{{htmlelement("object")}}，甚至那些不支持 {{domxref("element.name","name")}} 属性但是添加了 {{domxref("element.name","name")}} 自定义属性的元素也包含其中。</p>

<div class="warning">
<p>getElementsByName  在不同的浏览器其中工作方式不同。在IE和Opera中， getElementsByName()  方法还会返回那些 {{domxref("element.id","id")}} 为指定值的元素。所以你要小心使用该方法，最好不要为元素的 {{domxref("element.name","name")}} 和 {{domxref("element.id","id")}} 赋予相同的值。 </p>
</div>

<div class="warning">
<p>IE 和 Edge 都返回一个 {{domxref("HTMLCollection")}}, 而不是{{domxref("NodeList")}} 。</p>
</div>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', '#dom-document-getelementsbyname', "Document.getElementsByName()")}}</td>
   <td>{{ Spec2('HTML WHATWG') }}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName("DOM2 HTML", "html.html#ID-71555259", "Document.getElementsByName()")}}</td>
   <td>{{Spec2("DOM2 HTML")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{Compat("api.Document.getElementsByName")}}</p>

<h2 id="See_also" name="See_also">参阅</h2>

<ul>
 <li>{{domxref("document.getElementById()")}} 通过 <code>id</code> 返回对元素的引用</li>
 <li>{{domxref("document.querySelector()")}} 通过 CSS 选择器返回对元素的引用，例如 <code>'div.myclass'</code></li>
</ul>