initial commit

1 files changed, 127 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/element/attributes/index.html b/files/zh-cn/web/api/element/attributes/index.html
new file mode 100644
index 0000000000..f720ddae44
--- /dev/null
+++ b/files/zh-cn/web/api/element/attributes/index.html
@@ -0,0 +1,127 @@
+---
+title: Element.attributes
+slug: Web/API/Element/attributes
+tags:
+  - API
+  - DOM
+  - Element
+  - Property
+  - Reference
+  - 元素
+  - 参考
+  - 属性
+translation_of: Web/API/Element/attributes
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><strong><code>Element.attributes</code></strong> 属性返回该元素所有属性节点的一个实时集合。该集合是一个 {{domxref("NamedNodeMap")}} 对象，不是一个数组，所以它没有 {{jsxref("Array", "数组")}} 的方法，其包含的 {{domxref("Attr", "属性")}} 节点的索引顺序随浏览器不同而不同。更确切地说，<code style="font-style: normal;">attributes</code> 是字符串形式的名/值对，每一对名/值对对应一个属性节点。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">var <em>attr</em> =<em> element</em>.attributes;</pre>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="基本示例">基本示例</h3>
+
+<pre class="brush: js">// 获取文档中的第一个 &lt;p&gt; 元素
+var para = document.getElementsByTagName("p")[0];
+var atts = para.attributes;
+</pre>
+
+<h3 id="遍历元素的属性">遍历元素的属性</h3>
+
+<p>索引有利于遍历一个元素的所有属性。</p>
+
+<p>在以下例子中会遍历文档中 id 为 "paragraph" 的元素的属性节点，并打印出来。</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+
+&lt;html&gt;
+
+ &lt;head&gt;
+  &lt;title&gt;Attributes example&lt;/title&gt;
+  &lt;script type="text/javascript"&gt;
+   function listAttributes() {
+     var paragraph= document.getElementById("paragraph");
+     var result= document.getElementById("result");
+
+     // First, let's verify that the paragraph has some attributes
+     if (paragraph.hasAttributes()) {
+       var attrs = paragraph.attributes;
+       var output= "";
+       for(var i=attrs.length-1; i&gt;=0; i--) {
+         output+= attrs[i].name + "-&gt;" + attrs[i].value;
+       }
+       result.value = output;
+     } else {
+       result.value = "没有属性可显示"
+     }
+   }
+  &lt;/script&gt;
+ &lt;/head&gt;
+
+&lt;body&gt;
+ &lt;p id="paragraph" style="color: green;"&gt;Sample Paragraph&lt;/p&gt;
+ &lt;form action=""&gt;
+  &lt;p&gt;
+    &lt;input type="button" value="显示属性及其值"
+      onclick="listAttributes();"&gt;
+    &lt;input id="result" type="text" value=""&gt;
+  &lt;/p&gt;
+ &lt;/form&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>{{ EmbedLiveSample('遍历元素的属性') }}</p>
+
+<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('DOM WHATWG', '#dom-element-attributes', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>From {{SpecName('DOM3 Core')}}, moved from {{domxref("Node")}} to {{domxref("Element")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>No change from {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>No change from {{SpecName('DOM1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Element.attributes")}}</p>
+
+<p>在 Firefox 22 版本之前，这个属性是被用在 {{domxref("Node")}} 上（继承至 {{domxref("Element")}}）。它需要被使用在其他符合这个接口规范的浏览器上使用。</p>
+
+<p>IE5.5 返回的是一个 map 形式的键值对而不是一个 attribute 的属性对象。</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li>{{domxref("NamedNodeMap")}}，返回对象的接口</li>
+ <li>跨浏览器兼容性问题可参考： <a class="external external-icon" href="http://www.quirksmode.org/dom/w3c_core.html#attributes">quirksmode</a></li>
+</ul>