diff options
Diffstat (limited to 'files/ko/web/api/element/attributes')
| -rw-r--r-- | files/ko/web/api/element/attributes/index.html | 72 |
1 files changed, 72 insertions, 0 deletions
diff --git a/files/ko/web/api/element/attributes/index.html b/files/ko/web/api/element/attributes/index.html new file mode 100644 index 0000000000..53f9f8f0cf --- /dev/null +++ b/files/ko/web/api/element/attributes/index.html @@ -0,0 +1,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">// 문서에서 첫 <p> 요소 얻기 +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><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" +"http://www.w3.org/TR/html4/strict.dtd"> + +<html> + + <head> + <title>Attributes example</title> + <script type="text/javascript"> + 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>=0; i--) { + text += attrs[i].name + "->" + attrs[i].value; + } + outputText.value = text; + } else { + outputText.value = "No attributes to show" + }; + } + </script> + </head> + +<body> + <p id="p1" style="color: green;">Sample Paragraph</p> + <form action=""> + <p><input type="button" value="Show first attribute name and value" + onclick="showFirstAttr();"> + <input id="result" type="text" value=""></p> + </form> +</body> +</html> +</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> |