diff options
Diffstat (limited to 'files/zh-cn/web/api/document/getelementsbyname')
| -rw-r--r-- | files/zh-cn/web/api/document/getelementsbyname/index.html | 95 |
1 files changed, 95 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/document/getelementsbyname/index.html b/files/zh-cn/web/api/document/getelementsbyname/index.html new file mode 100644 index 0000000000..edfbfc10cf --- /dev/null +++ b/files/zh-cn/web/api/document/getelementsbyname/index.html @@ -0,0 +1,95 @@ +--- +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"><!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> +</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> + +<div class="hidden"> +<p>此页面上的兼容性表由结构化数据生成。 如果您想为数据做出贡献，请查看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送 pull 请求。</p> +</div> + +<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> |