files/ko/web/api/element/attributes/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

---
title: element.attributes
slug: Web/API/Element/attributes
tags:
  - DOM
  - Gecko
  - Gecko DOM Reference
translation_of: Web/API/Element/attributes
---
<p>{{ ApiRef() }}</p>
<h3 id=".EC.9A.94.EC.95.BD" name=".EC.9A.94.EC.95.BD">요약</h3>
<p>주어진 요소의 속성 모음(collection)을 반환합니다.</p>
<h3 id=".EA.B5.AC.EB.AC.B8" name=".EA.B5.AC.EB.AC.B8">구문</h3>
<pre class="eval">var<i>attrs</i> =<i>element</i>.attributes;
</pre>
<p>반환하는 개체는 <code>Attr</code> 노드를 포함하는 <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1780488922">NamedNodeMap</a> 형입니다. 요소가 지정된 속성이 없으면, 반환하는 개체는 길이가 0입니다. 이 속성은 읽기 전용입니다.</p>
<h3 id=".EC.98.88" name=".EC.98.88">예</h3>
<pre class="eval">// 문서에서 첫 &lt;p&gt; 요소 얻기
var para = document.getElementsByTagName("p")[0];
var atts = para.attributes;
</pre>
<h3 id=".EC.A3.BC.EC.9D.98" name=".EC.A3.BC.EC.9D.98">주의</h3>
<p>모음의 항목은 이름과 찾아보기(index)로 접근할 수 있습니다. <code>NodeList</code>와는 달리, <code>NamedNodeMap</code>은 항목을 어떤 특정 순서로 유지하지 않음을 주의하세요.</p>
<p>여러분은 문서에서 "p1" 요소의 모든 속성값을 찍는 다음 예에서처럼 요소의 속성을 열거(enumerate)할 때 오직 찾아보기로 접근(access by index)을 써야 합니다.</p>
<pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;

&lt;html&gt;

 &lt;head&gt;
  &lt;title&gt;Attributes example&lt;/title&gt;
  &lt;script type="text/javascript"&gt;
   function showFirstAttr()
   {
    var firstPara = document.getElementById("p1");
    var outputText = document.getElementById("result");

    // 먼저, paragraph에 어떤 속성이 있는지 검증
    if (firstPara.hasAttributes())
    {
      var attrs = firstPara.attributes;
      var text = "";
      for(var i=attrs.length-1; i&gt;=0; i--) {
        text += attrs[i].name + "-&gt;" + attrs[i].value;
      }
      outputText.value = text;
    } else {
      outputText.value = "No attributes to show"
    };
   }
  &lt;/script&gt;
 &lt;/head&gt;

&lt;body&gt;
 &lt;p id="p1" style="color: green;"&gt;Sample Paragraph&lt;/p&gt;
 &lt;form action=""&gt;
  &lt;p&gt;&lt;input type="button" value="Show first attribute name and value"
      onclick="showFirstAttr();"&gt;
  &lt;input id="result" type="text" value=""&gt;&lt;/p&gt;
 &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<p><code>NamedNodeMap</code>은 배열처럼 반복될 수 있지만, <code>join</code>, <code>split</code> 등과 같은 <code>Array</code>에 있는 어떤 특수 메소드는 없습니다.</p>
<p>이름으로 특정 속성에 접근하려면, <a href="ko/DOM/element.getAttribute">getAttribute</a> 메소드를 쓰세요.</p>
<h3 id=".EB.AA.85.EC.84.B8" name=".EB.AA.85.EC.84.B8">명세</h3>
<ul>
 <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-84CF096">W3C DOM Level 2 Core: attributes</a></li>
 <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-84CF096">W3C DOM Level 3 Core: attributes</a></li>
 <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1780488922">W3C DOM Level 3 NamedNodeMap interface</a></li>
</ul>
<p>{{ languages( { "en": "en/DOM/element.attributes", "fr": "fr/DOM/element.attributes", "pl": "pl/DOM/element.attributes" } ) }}</p>