path: root/files/ko/web/api/document_object_model/examples/index.html

---
title: Examples
slug: Web/API/Document_Object_Model/Examples
---
<p>이 장에서는 DOM을 사용한 웹, XML 개발의 긴 예제를 제공합니다. 예제는 문서의 object를 조작하기 위해 가능한 JavaScript의 일반적인 API, 트릭, 패턴을 사용합니다. </p>

<h2 id="Example_1_height_and_width" name="Example_1:_height_and_width">예제 1: 높이와 너비</h2>

<p>아래의 예제는 다양한 면적의 이미지를 통해 <code>height</code> 와 <code>width</code>  속성을 사용하는 방법을 보여줍니다:</p>

<pre class="brush:html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;width/height example&lt;/title&gt;
&lt;script&gt;
function init() {
  var arrImages = new Array(3);

  arrImages[0] = document.getElementById("image1");
  arrImages[1] = document.getElementById("image2");
  arrImages[2] = document.getElementById("image3");

  var objOutput = document.getElementById("output");
  var strHtml = "&lt;ul&gt;";

  for (var i = 0; i &lt; arrImages.length; i++) {
    strHtml += "&lt;li&gt;image" + (i+1) +
            ": height=" + arrImages[i].height +
            ", width=" + arrImages[i].width +
            ", style.height=" + arrImages[i].style.height +
            ", style.width=" + arrImages[i].style.width +
            "&lt;\/li&gt;";
  }

  strHtml += "&lt;\/ul&gt;";

  objOutput.innerHTML = strHtml;
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body onload="init();"&gt;

&lt;p&gt;Image 1: no height, width, or style
  &lt;img id="image1" src="http://www.mozilla.org/images/mozilla-banner.gif"&gt;
&lt;/p&gt;

&lt;p&gt;Image 2: height="50", width="500", but no style
  &lt;img id="image2"
       src="http://www.mozilla.org/images/mozilla-banner.gif"
       height="50" width="500"&gt;
&lt;/p&gt;

&lt;p&gt;Image 3: no height, width, but style="height: 50px; width: 500px;"
  &lt;img id="image3"
       src="http://www.mozilla.org/images/mozilla-banner.gif"
       style="height: 50px; width: 500px;"&gt;
&lt;/p&gt;

&lt;div id="output"&gt; &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>

<h2 id="Example_2_Image_Attributes" name="Example_2:_Image_Attributes">예제 2: 이미지 속성</h2>

<pre class="brush:html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;Modifying an image border&lt;/title&gt;

&lt;script&gt;
function setBorderWidth(width) {
  document.getElementById("img1").style.borderWidth = width + "px";
}
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;p&gt;
  &lt;img id="img1"
       src="image1.gif"
       style="border: 5px solid green;"
       width="100" height="100" alt="border test"&gt;
&lt;/p&gt;

&lt;form name="FormName"&gt;
  &lt;input type="button" value="Make border 20px-wide" onclick="setBorderWidth(20);" /&gt;
  &lt;input type="button" value="Make border 5px-wide"  onclick="setBorderWidth(5);" /&gt;
&lt;/form&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>

<h2 id="Example_3_Manipulating_Styles" name="Example_3:_Manipulating_Styles">예제 3: 스타일 조작</h2>

<p>아래의 간단한 예제에서 HTML 단락 element( <code>&lt;p&gt;</code>)의 일부 기본 스타일 속성들은 DOM에서 검색하고 설정할 수 있는 element의 스타일 객체와, 그 객체의 CSS 스타일 속성을 사용해 접근합니다. 이 경우 개별 스타일을 직접 조작합니다. 다음 예제(예제 4)에서는 stylesheet와 해당 규칙을 사용해 전체 문서의 스타일을 변경할 수 있습니다. </p>

<pre class="brush:html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;Changing color and font-size example&lt;/title&gt;

&lt;script&gt;
function changeText() {
  var p = document.getElementById("pid");

  p.style.color = "blue"
  p.style.fontSize = "18pt"
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;p id="pid" onclick="window.location.href = 'http://www.cnn.com/';"&gt;linker&lt;/p&gt;

&lt;form&gt;
  &lt;p&gt;&lt;input value="rec" type="button" onclick="changeText();" /&gt;&lt;/p&gt;
&lt;/form&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>

<h2 id="Example_4_Using_Stylesheets" name="Example_4:_Using_Stylesheets">예제 4: Stylesheet 사용</h2>

<p>document 객체의 styleSheets 속성은 그 문서에서 로드된 stylesheet 목록을 반환합니다. 이 예제에서 설명된대로 stylesheet, 스타일, CSSRule 객체를 사용해 이러한 stylesheet와 규칙에 개별적으로 접근할 수 있습니다. 이 예제는 모든 스타일 규칙 Selector를 콘솔에 출력합니다. </p>

<pre class="brush:js">var ss = document.styleSheets;

for(var i = 0; i &lt; ss.length; i++) {
  for(var j = 0; j &lt; ss[i].cssRules.length; j++) {
    dump( ss[i].cssRules[j].selectorText + "\n" );
  }
}</pre>

<p>아래와 같은 세가지 규칙이 정의된 하나의 stylesheet가 있는 문서의 경우: </p>

<pre class="brush:css">body { background-color: darkblue; }
p { font-face: Arial; font-size: 10pt; margin-left: .125in; }
#lumpy { display: none; }
</pre>

<p>위 스크립트의 결과물은 아래와 같습니다:</p>

<pre>BODY
P
#LUMPY
</pre>

<h2 id="Example_5_Event_Propagation" name="Example_5:_Event_Propagation">예제 5: Event 전파</h2>

<p>This example demonstrates how events fire and are handled in the DOM in a very simple way. When the BODY of this HTML document loads, an event listener is registered with the top row of the TABLE. The event listener handles the event by executing the function stopEvent, which changes the value in the bottom cell of the table.</p>

<p>However, stopEvent also calls an event object method, {{domxref("event.stopPropagation")}}, which keeps the event from bubbling any further up into the DOM. Note that the table itself has an {{domxref("element.onclick","onclick")}} event handler that ought to display a message when the table is clicked. But the stopEvent method has stopped propagation, and so after the data in the table is updated, the event phase is effectively ended, and an alert box is displayed to confirm this.</p>

<pre class="brush:html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;Event Propagation&lt;/title&gt;

&lt;style&gt;
#t-daddy { border: 1px solid red }
#c1 { background-color: pink; }
&lt;/style&gt;

&lt;script&gt;
function stopEvent(ev) {
  c2 = document.getElementById("c2");
  c2.innerHTML = "hello";

  // this ought to keep t-daddy from getting the click.
  ev.stopPropagation();
  alert("event propagation halted.");
}

function load() {
  elem = document.getElementById("tbl1");
  elem.addEventListener("click", stopEvent, false);
}
&lt;/script&gt;
&lt;/head&gt;

&lt;body onload="load();"&gt;

&lt;table id="t-daddy" onclick="alert('hi');"&gt;
  &lt;tr id="tbl1"&gt;
    &lt;td id="c1"&gt;one&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td id="c2"&gt;two&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>

<h2 id="Example_6_getComputedStyle" name="Example_6:_getComputedStyle">Example 6: getComputedStyle</h2>

<p>This example demonstrates how the {{domxref("window.getComputedStyle")}} method can be used to get the styles of an element that are not set using the <code>style</code> attribute or with JavaScript (e.g., <code>elt.style.backgroundColor="rgb(173, 216, 230)"</code>). These latter types of styles can be retrieved with the more direct {{domxref("element.style", "elt.style")}} property, whose properties are listed in the <a href="/en-US/docs/Web/CSS/Reference">DOM CSS Properties List</a>.</p>

<p><code>getComputedStyle()</code> returns a <code>ComputedCSSStyleDeclaration</code> object, whose individual style properties can be referenced with this object's <code>getPropertyValue()</code> method, as the following example document shows.</p>

<pre class="brush:html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;

&lt;title&gt;getComputedStyle example&lt;/title&gt;

&lt;script&gt;
function cStyles() {
  var RefDiv = document.getElementById("d1");
  var txtHeight = document.getElementById("t1");
  var h_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("height");

  txtHeight.value = h_style;

  var txtWidth = document.getElementById("t2");
  var w_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("width");

  txtWidth.value = w_style;

  var txtBackgroundColor = document.getElementById("t3");
  var b_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("background-color");

  txtBackgroundColor.value = b_style;
}
&lt;/script&gt;

&lt;style&gt;
#d1 {
  margin-left: 10px;
  background-color: rgb(173, 216, 230);
  height: 20px;
  max-width: 20px;
}
&lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;div id="d1"&gt;&amp;nbsp;&lt;/div&gt;

&lt;form action=""&gt;
  &lt;p&gt;
    &lt;button type="button" onclick="cStyles();"&gt;getComputedStyle&lt;/button&gt;
    height&lt;input id="t1" type="text" value="1" /&gt;
    max-width&lt;input id="t2" type="text" value="2" /&gt;
    bg-color&lt;input id="t3" type="text" value="3" /&gt;
  &lt;/p&gt;
&lt;/form&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>

<h2 id="Example_7_Displaying_Event_Object_Properties" name="Example_7:_Displaying_Event_Object_Properties">Example 7: Displaying Event Object Properties</h2>

<p>This example uses DOM methods to display all the properties of the {{domxref("window.onload")}} {{domxref("event")}} object and their values in a table. It also shows a useful technique of using a for..in loop to iterate over the properties of an object to get their values.</p>

<p>The properties of event objects differs greatly between browsers, the <a href="https://dom.spec.whatwg.org">WHATWG DOM Standard</a> lists the standard properties, however many browsers have extended these greatly.</p>

<p>Put the following code into a blank text file and load it into a variety of browsers, you'll be surprised at the different number and names of properties. You might also like to add some elements in the page and call this function from different event handlers.</p>

<pre class="brush:html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="utf-8"/&gt;
&lt;title&gt;Show Event properties&lt;/title&gt;

&lt;style&gt;
table { border-collapse: collapse; }
thead { font-weight: bold; }
td { padding: 2px 10px 2px 10px; }

.odd { background-color: #efdfef; }
.even { background-color: #ffffff; }
&lt;/style&gt;

&lt;script&gt;

function showEventProperties(e) {
  function addCell(row, text) {
    var cell = row.insertCell(-1);
    cell.appendChild(document.createTextNode(text));
  }

  var e = e || window.event;
  document.getElementById('eventType').innerHTML = e.type;

  var table = document.createElement('table');
  var thead = table.createTHead();
  var row = thead.insertRow(-1);
  var lableList = ['#', 'Property', 'Value'];
  var len = lableList.length;

  for (var i=0; i&lt;len; i++) {
    addCell(row, lableList[i]);
  }

  var tbody = document.createElement('tbody');
  table.appendChild(tbody);

  for (var p in e) {
    row = tbody.insertRow(-1);
    row.className = (row.rowIndex % 2)? 'odd':'even';
    addCell(row, row.rowIndex);
    addCell(row, p);
    addCell(row, e[p]);
  }

  document.body.appendChild(table);
}

window.onload = function(event){
  showEventProperties(event);
}
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;h1&gt;Properties of the DOM &lt;span id="eventType"&gt;&lt;/span&gt; Event Object&lt;/h1&gt;
&lt;/body&gt;

&lt;/html&gt;
</pre>

<h2 id="Example_8_Using_the_DOM_Table_Interface" name="Example_8:_Using_the_DOM_Table_Interface">Example 8: Using the DOM Table Interface</h2>

<p>The DOM HTMLTableElement interface provides some convenience methods for creating and manipulating tables. Two frequently used methods are {{domxref("HTMLTableElement.insertRow")}} and {{domxref("tableRow.insertCell")}}.</p>

<p>To add a row and some cells to an existing table:</p>

<pre class="brush:html">&lt;table id="table0"&gt;
 &lt;tr&gt;
  &lt;td&gt;Row 0 Cell 0&lt;/td&gt;
  &lt;td&gt;Row 0 Cell 1&lt;/td&gt;
 &lt;/tr&gt;
&lt;/table&gt;

&lt;script&gt;
var table = document.getElementById('table0');
var row = table.insertRow(-1);
var cell,
    text;

for (var i = 0; i &lt; 2; i++) {
  cell = row.insertCell(-1);
  text = 'Row ' + row.rowIndex + ' Cell ' + i;
  cell.appendChild(document.createTextNode(text));
}
&lt;/script&gt;
</pre>

<h3 id="Notes" name="Notes">Notes</h3>

<ul>
 <li>A table's {{domxref("element.innerHTML","innerHTML")}} property should never be used to modify a table, although you can use it to write an entire table or the content of a cell.</li>
 <li>If DOM Core methods {{domxref("document.createElement")}} and {{domxref("Node.appendChild")}} are used to create rows and cells, IE requires that they are appended to a tbody element, whereas other browsers will allow appending to a table element (the rows will be added to the last tbody element).</li>
 <li>There are a number of other convenience methods belonging to the <a href="/en-US/docs/Web/API/HTMLTableElement#Methods">table interface</a> that can be used for creating and modifying tables.</li>
</ul>

<h2 id="Subnav">Subnav</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a></li>
 <li><a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a></li>
 <li><a href="/en-US/docs/Web/API/Document_Object_Model/Events">Events and the DOM</a></li>
 <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">Examples</a></li>
</ul>