diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
| commit | da78a9e329e272dedb2400b79a3bdeebff387d47 (patch) | |
| tree | e6ef8aa7c43556f55ddfe031a01cf0a8fa271bfe /files/ko/web/api/document_object_model | |
| parent | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (diff) | |
| download | translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.gz translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.bz2 translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.zip | |
initial commit
Diffstat (limited to 'files/ko/web/api/document_object_model')
6 files changed, 1191 insertions, 0 deletions
diff --git a/files/ko/web/api/document_object_model/events/index.html b/files/ko/web/api/document_object_model/events/index.html new file mode 100644 index 0000000000..2974c9d435 --- /dev/null +++ b/files/ko/web/api/document_object_model/events/index.html @@ -0,0 +1,84 @@ +--- +title: Events and the DOM +slug: Web/API/Document_Object_Model/Events +translation_of: Web/API/Document_Object_Model/Events +--- +<div>{{DefaultAPISidebar("DOM")}}</div> + +<h2 id="Introduction" name="Introduction">소개</h2> + +<p>이 장에서는 DOM 이벤트 모델을 설명한다. <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event">Event</a> 인터페이스는 DOM의 노드에서 이벤트 등록 및 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">event listeners</a>를 위한 인터페이스와 더불어 다양한 이벤트 인터페이스가 서로 어떻게 관련되는지 보여주는 몇 가지 더 긴 예와 함께 설명된다.</p> + +<p>There is an excellent diagram that clearly explains the three phases of event flow through the DOM in the <a href="http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture">DOM Level 3 Events draft</a>.</p> + +<p>Also see <a href="/en-US/docs/DOM/DOM_Reference/Examples#Example_5:_Event_Propagation">Example 5: Event Propagation</a> in the Examples chapter for a more detailed example of how events move through the DOM.</p> + +<h2 id="DOM_event_handler_List" name="DOM_event_handler_List">Event listener등록</h2> + +<p>DOM 요소에 대한 이벤트 핸들러를 등록하는 방법에는 3가지가 있다.</p> + +<h3 id="EventTarget.addEventListener" name="EventTarget.addEventListener">{{domxref("EventTarget.addEventListener")}}</h3> + +<pre class="brush: js notranslate">// Assuming myButton is a button element +myButton.addEventListener('click', greet, false) +function greet(event){ + // print and have a look at the event object + // always print arguments in case of overlooking any other arguments + console.log('greet:', arguments) + alert('hello world') +} +</pre> + +<p>이 방식은 근대의 웹페이지에서 사용해야하는 방법이다.</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> Internet Explorer 6–8 didn't support this method, offering a similar {{domxref("EventTarget.attachEvent")}} API instead. For cross-browser compatibility, use one of the many JavaScript libraries available.</p> +</div> + +<p>더 자세한 내용은{{domxref("EventTarget.addEventListener")}}를 참조하세요.</p> + +<h3 id="HTML_attribute" name="HTML_attribute"><a href="/en-US/docs/Web/Guide/HTML/Event_attributes">HTML </a>속성</h3> + +<pre class="brush: html notranslate"><button onclick="alert('Hello world!')"> +</pre> + +<p>속성에서 JavaScript 코드는 이벤트 매개변수를 통해 이벤트 객체를 통과합니다. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">반환 값은 HTML 사양에 설명된 특별한 방법으로 처리됩니다.</a></p> + +<div class="blockIndicator warning"> +<p><strong>경고:</strong> 이 방법은 피해야 합니다! 그것은 마크업을 부풀리고, 읽기 어렵게 만듭니다. 내용/구조와 행동에 대한 우려는 잘 분리되어 있지 않아 버그를 찾기가 더 어려워집니다.</p> +</div> + +<h3 id="DOM_element_properties" name="DOM_element_properties">DOM 요소 특성</h3> + +<pre class="brush: js notranslate">// Assuming myButton is a button element +myButton.onclick = function(event){alert('Hello world')} +</pre> + +<p>The function can be defined to take an <code>event</code> parameter. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">The return value is treated in a special way, described in the HTML specification</a>.</p> + +<p>The problem with this method is that only one handler can be set per element and per event.</p> + +<h2 id="Accessing_Event_interfaces">Accessing Event interfaces</h2> + +<p>Event handlers may be attached to various objects (including DOM elements, document, the {{domxref("window")}} object, etc.). When an event occurs, an event object is created and passed sequentially to the event listeners.</p> + +<p>The {{domxref("Event")}} interface is accessible from within the handler function, via the event object passed as the first argument. The following simple example shows how an event object is passed to the event handler function, and can be used from within one such function.</p> + +<pre class="brush: js notranslate">function print(evt) { + // the evt parameter is automatically assigned the event object + // take care of the differences between console.log & alert + console.log('print:', evt) + alert(evt) +} +// any function should have an appropriate name, that's what called semantic +table_el.onclick = print +</pre> + +<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> diff --git a/files/ko/web/api/document_object_model/examples/index.html b/files/ko/web/api/document_object_model/examples/index.html new file mode 100644 index 0000000000..aacebc7d07 --- /dev/null +++ b/files/ko/web/api/document_object_model/examples/index.html @@ -0,0 +1,372 @@ +--- +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"><!DOCTYPE html> +<html lang="en"> +<head> +<title>width/height example</title> +<script> +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 = "<ul>"; + + for (var i = 0; i < arrImages.length; i++) { + strHtml += "<li>image" + (i+1) + + ": height=" + arrImages[i].height + + ", width=" + arrImages[i].width + + ", style.height=" + arrImages[i].style.height + + ", style.width=" + arrImages[i].style.width + + "<\/li>"; + } + + strHtml += "<\/ul>"; + + objOutput.innerHTML = strHtml; +} +</script> +</head> +<body onload="init();"> + +<p>Image 1: no height, width, or style + <img id="image1" src="http://www.mozilla.org/images/mozilla-banner.gif"> +</p> + +<p>Image 2: height="50", width="500", but no style + <img id="image2" + src="http://www.mozilla.org/images/mozilla-banner.gif" + height="50" width="500"> +</p> + +<p>Image 3: no height, width, but style="height: 50px; width: 500px;" + <img id="image3" + src="http://www.mozilla.org/images/mozilla-banner.gif" + style="height: 50px; width: 500px;"> +</p> + +<div id="output"> </div> +</body> +</html> +</pre> + +<h2 id="Example_2_Image_Attributes" name="Example_2:_Image_Attributes">예제 2: 이미지 속성</h2> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> +<title>Modifying an image border</title> + +<script> +function setBorderWidth(width) { + document.getElementById("img1").style.borderWidth = width + "px"; +} +</script> +</head> + +<body> +<p> + <img id="img1" + src="image1.gif" + style="border: 5px solid green;" + width="100" height="100" alt="border test"> +</p> + +<form name="FormName"> + <input type="button" value="Make border 20px-wide" onclick="setBorderWidth(20);" /> + <input type="button" value="Make border 5px-wide" onclick="setBorderWidth(5);" /> +</form> + +</body> +</html> +</pre> + +<h2 id="Example_3_Manipulating_Styles" name="Example_3:_Manipulating_Styles">예제 3: 스타일 조작</h2> + +<p>아래의 간단한 예제에서 HTML 단락 element( <code><p></code>)의 일부 기본 스타일 속성들은 DOM에서 검색하고 설정할 수 있는 element의 스타일 객체와, 그 객체의 CSS 스타일 속성을 사용해 접근합니다. 이 경우 개별 스타일을 직접 조작합니다. 다음 예제(예제 4)에서는 stylesheet와 해당 규칙을 사용해 전체 문서의 스타일을 변경할 수 있습니다. </p> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> +<title>Changing color and font-size example</title> + +<script> +function changeText() { + var p = document.getElementById("pid"); + + p.style.color = "blue" + p.style.fontSize = "18pt" +} +</script> +</head> +<body> + +<p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">linker</p> + +<form> + <p><input value="rec" type="button" onclick="changeText();" /></p> +</form> + +</body> +</html> +</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 < ss.length; i++) { + for(var j = 0; j < 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"><!DOCTYPE html> +<html lang="en"> +<head> +<title>Event Propagation</title> + +<style> +#t-daddy { border: 1px solid red } +#c1 { background-color: pink; } +</style> + +<script> +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); +} +</script> +</head> + +<body onload="load();"> + +<table id="t-daddy" onclick="alert('hi');"> + <tr id="tbl1"> + <td id="c1">one</td> + </tr> + <tr> + <td id="c2">two</td> + </tr> +</table> + +</body> +</html> +</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"><!DOCTYPE html> +<html lang="en"> +<head> + +<title>getComputedStyle example</title> + +<script> +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; +} +</script> + +<style> +#d1 { + margin-left: 10px; + background-color: rgb(173, 216, 230); + height: 20px; + max-width: 20px; +} +</style> + +</head> + +<body> + +<div id="d1">&nbsp;</div> + +<form action=""> + <p> + <button type="button" onclick="cStyles();">getComputedStyle</button> + height<input id="t1" type="text" value="1" /> + max-width<input id="t2" type="text" value="2" /> + bg-color<input id="t3" type="text" value="3" /> + </p> +</form> + +</body> +</html> +</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"><!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>Show Event properties</title> + +<style> +table { border-collapse: collapse; } +thead { font-weight: bold; } +td { padding: 2px 10px 2px 10px; } + +.odd { background-color: #efdfef; } +.even { background-color: #ffffff; } +</style> + +<script> + +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<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); +} +</script> +</head> + +<body> +<h1>Properties of the DOM <span id="eventType"></span> Event Object</h1> +</body> + +</html> +</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"><table id="table0"> + <tr> + <td>Row 0 Cell 0</td> + <td>Row 0 Cell 1</td> + </tr> +</table> + +<script> +var table = document.getElementById('table0'); +var row = table.insertRow(-1); +var cell, + text; + +for (var i = 0; i < 2; i++) { + cell = row.insertCell(-1); + text = 'Row ' + row.rowIndex + ' Cell ' + i; + cell.appendChild(document.createTextNode(text)); +} +</script> +</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> diff --git a/files/ko/web/api/document_object_model/index.html b/files/ko/web/api/document_object_model/index.html new file mode 100644 index 0000000000..fa5ff39eec --- /dev/null +++ b/files/ko/web/api/document_object_model/index.html @@ -0,0 +1,350 @@ +--- +title: 문서 객체 모델(DOM) +slug: Web/API/Document_Object_Model +tags: + - API + - DOM + - Document + - Document Object Model + - Guide + - Overview + - Reference +translation_of: Web/API/Document_Object_Model +--- +<p>{{DefaultAPISidebar("DOM")}}</p> + +<p><strong>문서 객체 모델(DOM)</strong>은 메모리에 웹 페이지 문서 구조를 표현함으로써 스크립트 및 프로그래밍 언어와 페이지를 연결합니다. 이때 스크립트는 주로 JavaScript를 의미하나 HTML, SVG, XML 객체를 문서로 모델링 하는 것은 JavaScript 언어의 일부가 아닙니다.</p> + +<p>DOM은 문서를 논리 트리로 표현합니다. 트리의 각 브랜치는 노드에서 끝나며, 각 노드는 객체를 갖습니다. DOM 메서드를 사용하면 프로그래밍적으로 트리에 접근할 수 있습니다. 이를 통해 문서의 구조, 스타일, 콘텐츠를 변경할 수 있습니다.</p> + +<p>노드는 이벤트 처리기도 포함할 수 있습니다. 이벤트가 발생한 순간, 해당 이벤트와 연결한 처리기가 발동합니다.</p> + +<div class="blockIndicator note"> +<p><strong>더 알아보려면:</strong> <a href="/ko/docs/Web/API/Document_Object_Model/%EC%86%8C%EA%B0%9C">DOM 소개</a> 문서를 방문해보세요.</p> +</div> + +<h2 id="DOM_인터페이스">DOM 인터페이스</h2> + +<div class="index"> +<ul> + <li>{{DOMxRef("Attr")}}</li> + <li>{{DOMxRef("CDATASection")}}</li> + <li>{{DOMxRef("CharacterData")}}</li> + <li>{{DOMxRef("ChildNode")}} {{Experimental_Inline}}</li> + <li>{{DOMxRef("Comment")}}</li> + <li>{{DOMxRef("CustomEvent")}}</li> + <li>{{DOMxRef("Document")}}</li> + <li>{{DOMxRef("DocumentFragment")}}</li> + <li>{{DOMxRef("DocumentType")}}</li> + <li>{{DOMxRef("DOMError")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("DOMException")}}</li> + <li>{{DOMxRef("DOMImplementation")}}</li> + <li>{{DOMxRef("DOMString")}}</li> + <li>{{DOMxRef("DOMTimeStamp")}}</li> + <li>{{DOMxRef("DOMSettableTokenList")}}</li> + <li>{{DOMxRef("DOMStringList")}}</li> + <li>{{DOMxRef("DOMTokenList")}}</li> + <li>{{DOMxRef("Element")}}</li> + <li>{{DOMxRef("Event")}}</li> + <li>{{DOMxRef("EventTarget")}}</li> + <li>{{DOMxRef("HTMLCollection")}}</li> + <li>{{DOMxRef("MutationObserver")}}</li> + <li>{{DOMxRef("MutationRecord")}}</li> + <li>{{DOMxRef("NamedNodeMap")}}</li> + <li>{{DOMxRef("Node")}}</li> + <li>{{DOMxRef("NodeFilter")}}</li> + <li>{{DOMxRef("NodeIterator")}}</li> + <li>{{DOMxRef("NodeList")}}</li> + <li>{{DOMxRef("NonDocumentTypeChildNode")}}</li> + <li>{{DOMxRef("ParentNode")}}</li> + <li>{{DOMxRef("ProcessingInstruction")}}</li> + <li>{{DOMxRef("Selection")}} {{Experimental_Inline}}</li> + <li>{{DOMxRef("Range")}}</li> + <li>{{DOMxRef("Text")}}</li> + <li>{{DOMxRef("TextDecoder")}} {{Experimental_Inline}}</li> + <li>{{DOMxRef("TextEncoder")}} {{Experimental_Inline}}</li> + <li>{{DOMxRef("TimeRanges")}}</li> + <li>{{DOMxRef("TreeWalker")}}</li> + <li>{{DOMxRef("URL")}}</li> + <li>{{DOMxRef("Window")}}</li> + <li>{{DOMxRef("Worker")}}</li> + <li>{{DOMxRef("XMLDocument")}} {{Experimental_Inline}}</li> +</ul> +</div> + +<div class="hidden"> +<h3 id="더_이상_사용하지_않는_DOM_인터페이스">더 이상 사용하지 않는 DOM 인터페이스</h3> + +<p>문서객체모델 매우 단순하게 변하고 있습니다. 이를 위해 다른 DOM 레벨 3 혹은 이전 사양에 있었던 아래의 인터페이스들을 제거했습니다. 향후에 이 중 일부가 다시 도입될 지는 확실하지 않지만 당분간은 모두 폐기된 것으로 간주하고 사용을 피해야 합니다.</p> + +<div class="index"> +<ul> + <li>{{DOMxRef("DocumentTouch")}}}</li> + <li>{{DOMxRef("DOMConfiguration")}}</li> + <li>{{DOMxRef("DOMErrorHandler")}}}</li> + <li>{{DOMxRef("DOMImplementationList")}}</li> + <li>{{DOMxRef("DOMImplementationRegistry")}}</li> + <li>{{DOMxRef("DOMImplementationSource")}}</li> + <li>{{DOMxRef("DOMLocator")}}</li> + <li>{{DOMxRef("DOMObject")}}</li> + <li>{{DOMxRef("DOMSettableTokenList")}}</li> + <li>{{DOMxRef("DOMUserData")}}</li> + <li>{{DOMxRef("ElementTraversal")}}</li> + <li>{{DOMxRef("Entity")}}</li> + <li>{{DOMxRef("EntityReference")}}</li> + <li>{{DOMxRef("NameList")}}</li> + <li>{{DOMxRef("Notation")}}</li> + <li>{{DOMxRef("TypeInfo")}}</li> + <li>{{DOMxRef("UserDataHandler")}}</li> +</ul> +</div> +</div> + +<h2 id="HTML_DOM">HTML DOM</h2> + +<p>문서는 다양한 HTML 관련 기능들을 포함하는 HTML 명세에 의해 확장된 {{DOMxRef("Document")}} 을 사용해 설명된 HTML 을 포함합니다.</p> + +<p><span>HTML 객체는 또한 {{DOMxRef("Window")}} 인터페이스, 이에 관련된 {{DOMxRef("window.style", "Style")}}(보통 CSS), 컨텍스트에 관련된 브라우저의 히스토리인 {{DOMxRef("window.history", "History")}} 를 사용해 페이지가 그려지는 탭이나 창과 같은 브라우저의 다양한 기능들에 접근할 수 있게 해줍니다. 마지막에는, 문서의 {{DOMxRef("Selection")}} 이 완료됩니다.</span></p> + +<p>자세한 내용은 <a href="/ko/docs/Web/API/HTML_DOM">HTML DOM API</a> 문서를 참고하세요.</p> + +<h2 id="SVG_인터페이스">SVG 인터페이스</h2> + +<h3 id="SVG_요소_인터페이스">SVG 요소 인터페이스</h3> + +<div class="index"> +<ul> + <li>{{DOMxRef("SVGAElement")}}</li> + <li>{{DOMxRef("SVGAltGlyphElement")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGAltGlyphDefElement")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGAltGlyphItemElement")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGAnimationElement")}}</li> + <li>{{DOMxRef("SVGAnimateElement")}}</li> + <li>{{DOMxRef("SVGAnimateColorElement")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGAnimateMotionElement")}}</li> + <li>{{DOMxRef("SVGAnimateTransformElement")}}</li> + <li>{{DOMxRef("SVGCircleElement")}}</li> + <li>{{DOMxRef("SVGClipPathElement")}}</li> + <li>{{DOMxRef("SVGColorProfileElement")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGComponentTransferFunctionElement")}}</li> + <li>{{DOMxRef("SVGCursorElement")}}</li> + <li>{{DOMxRef("SVGDefsElement")}}</li> + <li>{{DOMxRef("SVGDescElement")}}</li> + <li>{{DOMxRef("SVGElement")}}</li> + <li>{{DOMxRef("SVGEllipseElement")}}</li> + <li>{{DOMxRef("SVGFEBlendElement")}}</li> + <li>{{DOMxRef("SVGFEColorMatrixElement")}}</li> + <li>{{DOMxRef("SVGFEComponentTransferElement")}}</li> + <li>{{DOMxRef("SVGFECompositeElement")}}</li> + <li>{{DOMxRef("SVGFEConvolveMatrixElement")}}</li> + <li>{{DOMxRef("SVGFEDiffuseLightingElement")}}</li> + <li>{{DOMxRef("SVGFEDisplacementMapElement")}}</li> + <li>{{DOMxRef("SVGFEDistantLightElement")}}</li> + <li>{{DOMxRef("SVGFEDropShadowElement")}}</li> + <li>{{DOMxRef("SVGFEFloodElement")}}</li> + <li>{{DOMxRef("SVGFEFuncAElement")}}</li> + <li>{{DOMxRef("SVGFEFuncBElement")}}</li> + <li>{{DOMxRef("SVGFEFuncGElement")}}</li> + <li>{{DOMxRef("SVGFEFuncRElement")}}</li> + <li>{{DOMxRef("SVGFEGaussianBlurElement")}}</li> + <li>{{DOMxRef("SVGFEImageElement")}}</li> + <li>{{DOMxRef("SVGFEMergeElement")}}</li> + <li>{{DOMxRef("SVGFEMergeNodeElement")}}</li> + <li>{{DOMxRef("SVGFEMorphologyElement")}}</li> + <li>{{DOMxRef("SVGFEOffsetElement")}}</li> + <li>{{DOMxRef("SVGFEPointLightElement")}}</li> + <li>{{DOMxRef("SVGFESpecularLightingElement")}}</li> + <li>{{DOMxRef("SVGFESpotLightElement")}}</li> + <li>{{DOMxRef("SVGFETileElement")}}</li> + <li>{{DOMxRef("SVGFETurbulenceElement")}}</li> + <li>{{DOMxRef("SVGFilterElement")}}</li> + <li>{{DOMxRef("SVGFilterPrimitiveStandardAttributes")}}</li> + <li>{{DOMxRef("SVGFontElement")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGFontFaceElement")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGFontFaceFormatElement")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGFontFaceNameElement")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGFontFaceSrcElement")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGFontFaceUriElement")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGForeignObjectElement")}}</li> + <li>{{DOMxRef("SVGGElement")}}</li> + <li>{{DOMxRef("SVGGeometryElement")}}</li> + <li>{{DOMxRef("SVGGlyphElement")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGGlyphRefElement")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGGradientElement")}}</li> + <li>{{DOMxRef("SVGGraphicsElement")}}</li> + <li>{{DOMxRef("SVGHatchElement")}} {{Experimental_Inline}}</li> + <li>{{DOMxRef("SVGHatchpathElement")}} {{Experimental_Inline}}</li> + <li>{{DOMxRef("SVGHKernElement")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGImageElement")}}</li> + <li>{{DOMxRef("SVGLinearGradientElement")}}</li> + <li>{{DOMxRef("SVGLineElement")}}</li> + <li>{{DOMxRef("SVGMarkerElement")}} {{Experimental_Inline}}</li> + <li>{{DOMxRef("SVGMaskElement")}}</li> + <li>{{DOMxRef("SVGMeshElement")}} {{Experimental_Inline}}</li> + <li>{{DOMxRef("SVGMeshGradientElement")}} {{Experimental_Inline}}</li> + <li>{{DOMxRef("SVGMeshpatchElement")}} {{Experimental_Inline}}</li> + <li>{{DOMxRef("SVGMeshrowElement")}} {{Experimental_Inline}}</li> + <li>{{DOMxRef("SVGMetadataElement")}}</li> + <li>{{DOMxRef("SVGMissingGlyphElement")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGMPathElement")}}</li> + <li>{{DOMxRef("SVGPathElement")}}</li> + <li>{{DOMxRef("SVGPatternElement")}}</li> + <li>{{DOMxRef("SVGPolylineElement")}}</li> + <li>{{DOMxRef("SVGPolygonElement")}}</li> + <li>{{DOMxRef("SVGRadialGradientElement")}}</li> + <li>{{DOMxRef("SVGRectElement")}}</li> + <li>{{DOMxRef("SVGScriptElement")}}</li> + <li>{{DOMxRef("SVGSetElement")}}</li> + <li>{{DOMxRef("SVGSolidcolorElement")}} {{Experimental_Inline}}</li> + <li>{{DOMxRef("SVGStopElement")}}</li> + <li>{{DOMxRef("SVGStyleElement")}}</li> + <li>{{DOMxRef("SVGSVGElement")}}</li> + <li>{{DOMxRef("SVGSwitchElement")}}</li> + <li>{{DOMxRef("SVGSymbolElement")}}</li> + <li>{{DOMxRef("SVGTextContentElement")}}</li> + <li>{{DOMxRef("SVGTextElement")}}</li> + <li>{{DOMxRef("SVGTextPathElement")}}</li> + <li>{{DOMxRef("SVGTextPositioningElement")}}</li> + <li>{{DOMxRef("SVGTitleElement")}}</li> + <li>{{DOMxRef("SVGTRefElement")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGTSpanElement")}}</li> + <li>{{DOMxRef("SVGUseElement")}}</li> + <li>{{DOMxRef("SVGUnknownElement")}} {{Experimental_Inline}}</li> + <li>{{DOMxRef("SVGViewElement")}}</li> + <li>{{DOMxRef("SVGVKernElement")}} {{Deprecated_Inline}}</li> +</ul> +</div> + +<h3 id="SVG_데이터_타입_인터페이스">SVG 데이터 타입 인터페이스</h3> + +<p>다음은 SVG 프로퍼티와 어트리뷰트 정의에 쓰이는 데이터 타입을 위한 DOM API입니다.</p> + +<h4 id="정적_타입">정적 타입</h4> + +<div class="index"> +<ul> + <li>{{DOMxRef("SVGAngle")}}</li> + <li>{{DOMxRef("SVGColor")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGICCColor")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGElementInstance")}}</li> + <li>{{DOMxRef("SVGElementInstanceList")}}</li> + <li>{{DOMxRef("SVGLength")}}</li> + <li>{{DOMxRef("SVGLengthList")}}</li> + <li>{{DOMxRef("SVGMatrix")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGNameList")}}</li> + <li>{{DOMxRef("SVGNumber")}}</li> + <li>{{DOMxRef("SVGNumberList")}}</li> + <li>{{DOMxRef("SVGPaint")}}</li> + <li>{{DOMxRef("SVGPathSeg")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPathSegClosePath")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPathSegMovetoAbs")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPathSegMovetoRel")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPathSegLinetoAbs")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPathSegLinetoRel")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPathSegCurvetoCubicAbs")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPathSegCurvetoCubicRel")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPathSegCurvetoQuadraticAbs")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPathSegCurvetoQuadraticRel")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPathSegArcAbs")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPathSegArcRel")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPathSegLinetoHorizontalAbs")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPathSegLinetoHorizontalRel")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPathSegLinetoVerticalAbs")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPathSegLinetoVerticalRel")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPathSegCurvetoCubicSmoothAbs")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPathSegCurvetoCubicSmoothRel")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPathSegCurvetoQuadraticSmoothAbs")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPathSegCurvetoQuadraticSmoothRel")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPathSegList")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPoint")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPointList")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPreserveAspectRatio")}}</li> + <li>{{DOMxRef("SVGRect")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGStringList")}}</li> + <li>{{DOMxRef("SVGTransform")}}</li> + <li>{{DOMxRef("SVGTransformList")}}</li> +</ul> +</div> + +<h4 id="움직이는animated_형">움직이는(animated) 형</h4> + +<div class="index"> +<ul> + <li>{{DOMxRef("SVGAnimatedAngle")}}</li> + <li>{{DOMxRef("SVGAnimatedBoolean")}}</li> + <li>{{DOMxRef("SVGAnimatedEnumeration")}}</li> + <li>{{DOMxRef("SVGAnimatedInteger")}}</li> + <li>{{DOMxRef("SVGAnimatedLength")}}</li> + <li>{{DOMxRef("SVGAnimatedLengthList")}}</li> + <li>{{DOMxRef("SVGAnimatedNumber")}}</li> + <li>{{DOMxRef("SVGAnimatedNumberList")}}</li> + <li>{{DOMxRef("SVGAnimatedPathData")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGAnimatedPoints")}}</li> + <li>{{DOMxRef("SVGAnimatedPreserveAspectRatio")}}</li> + <li>{{DOMxRef("SVGAnimatedRect")}}</li> + <li>{{DOMxRef("SVGAnimatedString")}}</li> + <li>{{DOMxRef("SVGAnimatedTransformList")}}</li> +</ul> +</div> + +<h3 id="SMIL_관련_인터페이스">SMIL 관련 인터페이스</h3> + +<div class="index"> +<ul> + <li>{{DOMxRef("ElementTimeControl")}}</li> + <li>{{DOMxRef("TimeEvent")}}</li> +</ul> +</div> + +<h3 id="기타_SVG_인터페이스">기타 SVG 인터페이스</h3> + +<div class="index"> +<ul> + <li>{{DOMxRef("GetSVGDocument")}}</li> + <li>{{DOMxRef("ShadowAnimation")}}</li> + <li>{{DOMxRef("SVGColorProfileRule")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGCSSRule")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGDocument")}}</li> + <li>{{DOMxRef("SVGException")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGExternalResourcesRequired")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGFitToViewBox")}}</li> + <li>{{DOMxRef("SVGLangSpace")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGLocatable")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGRenderingIntent")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGStylable")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGTests")}}</li> + <li>{{DOMxRef("SVGTransformable")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGUnitTypes")}}</li> + <li>{{DOMxRef("SVGUseElementShadowRoot")}}</li> + <li>{{DOMxRef("SVGURIReference")}}</li> + <li>{{DOMxRef("SVGViewSpec")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGZoomAndPan")}}</li> + <li>{{DOMxRef("SVGZoomEvent")}} {{Deprecated_Inline}}</li> +</ul> +</div> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM WHATWG")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/API/Document_Object_Model/Examples">DOM 예제 </a></li> + <li><a href="/ko/docs/Web/API/CSS_Object_Model">CSS 객체 모델 (CSSOM)</a></li> +</ul> diff --git a/files/ko/web/api/document_object_model/locating_dom_elements_using_selectors/index.html b/files/ko/web/api/document_object_model/locating_dom_elements_using_selectors/index.html new file mode 100644 index 0000000000..07d0d169e4 --- /dev/null +++ b/files/ko/web/api/document_object_model/locating_dom_elements_using_selectors/index.html @@ -0,0 +1,51 @@ +--- +title: 선택자로 DOM 요소 선택하기 +slug: Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors +tags: + - Beginner + - DOM +translation_of: Web/API/Document_object_model/Locating_DOM_elements_using_selectors +--- +<div>{{ gecko_minversion_header("1.9.1") }}</div> + +<p>선택자 API는 DOM에서 {{domxref("Element")}} 노드를 선택자를 통해 빠르고 쉽게 가져올 수 있는 메서드를 제공합니다. 이 방법은 JavaScript 코드에서 반복문을 통해 특성 요소를 탐색하던 이전 방법보다 훨씬 빠릅니다.</p> + +<h2 id="NodeSelector_인터페이스">NodeSelector 인터페이스</h2> + +<p>본 명세는 {{domxref("Document")}}, {{domxref("DocumentFragment")}}, {{domxref("Element")}} 인터페이스를 구현하는 모든 객체에 메서드 두 개를 추가합니다.</p> + +<dl> + <dt><code>querySelector</code></dt> + <dd>노드의 하위 트리에서 첫 번째로 일치하는 {{domxref("Element")}} 노드를 반환합니다. 결과가 없으면 <code>null</code>을 반환합니다.</dd> + <dt><code>querySelectorAll</code></dt> + <dd>노드의 하위 트리 안에서 일치하는 모든 <code>Element</code>를 포함한 {{domxref("NodeList")}}를 반환합니다. 결과가 없으면 빈 <code>NodeList</code>를 반환합니다.</dd> +</dl> + +<div class="note"><strong>참고:</strong> The <code><a class="internal" href="/en-US/docs/DOM/NodeList" title="en-US/docs/DOM/NodeList">NodeList</a></code> returned by <code><a class="internal" href="/en-US/docs/DOM/Element.querySelectorAll" title="en-US/docs/DOM/Element.querySelectorAll">querySelectorAll()</a></code> is not live, which means that changes in the DOM are not reflected in the collection. This is different from other DOM querying methods that return live node lists.</div> + +<p>You may find examples and details by reading the documentation for the <a class="internal" href="/en-US/docs/DOM/Element.querySelector" title="en-US/docs/DOM/Element.querySelector"><code>querySelector()</code></a> and <a class="internal" href="/en-US/docs/DOM/Element.querySelectorAll" title="en-US/docs/DOM/Element.querySelectorAll"><code>querySelectorAll()</code></a> methods, as well as in the article <a class="internal" href="/en-US/docs/Code_snippets/QuerySelector" title="en-US/docs/Code snippets/QuerySelector">Code snippets for querySelector</a>.</p> + +<h2 id="선택자">선택자</h2> + +<p>The selector methods accept one or more comma-separated selectors to determine what element or elements should be returned. For example, to select all paragraph (<code>p</code>) elements in a document whose CSS class is either <code>warning</code> or <code>note</code>, you can do the following:</p> + +<pre><code>var special = document.querySelectorAll( "p.warning, p.note" );</code></pre> + +<p>You can also query by ID. For example:</p> + +<pre><code>var el = document.querySelector( "#main, #basic, #exclamation" );</code></pre> + +<p>After executing the above code, <code>el</code> contains the first element in the document whose ID is one of <code>main</code>, <code>basic</code>, or <code>exclamation</code>.</p> + +<p>You may use any CSS selectors with the <code>querySelector()</code> and <code>querySelectorAll()</code> methods.</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/selectors-api/" title="http://www.w3.org/TR/selectors-api/">Selectors API</a></li> + <li><a href="/en-US/docs/DOM/Element.querySelector" title="en-US/docs/DOM/Element.querySelector"><code>element.querySelector</code></a></li> + <li><a href="/en-US/docs/DOM/Element.querySelectorAll" title="en-US/docs/DOM/element.querySelectorAll"><code>element.querySelectorAll</code></a></li> + <li><a href="/en-US/docs/DOM/Document.querySelector" title="en-US/docs/DOM/document.querySelector"><code>document.querySelector</code></a></li> + <li><a href="/en-US/docs/DOM/Document.querySelectorAll" title="en-US/docs/DOM/document.querySelectorAll"><code>document.querySelectorAll</code></a></li> + <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="en-US/docs/Code_snippets/QuerySelector">Code snippets for querySelector</a></li> +</ul> diff --git a/files/ko/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html b/files/ko/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html new file mode 100644 index 0000000000..6bb71e8b44 --- /dev/null +++ b/files/ko/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html @@ -0,0 +1,95 @@ +--- +title: W3C DOM Level 1 Core 사용하기 +slug: Web/API/Document_Object_Model/Using_the_W3C_DOM_Level_1_Core +tags: + - DOM + - NeedsUpdate +translation_of: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core +--- +<div>{{DefaultAPISidebar("DOM")}}</div> + +<div></div> + +<p>The W3C's DOM Level 1 Core 는 documents의 콘텐츠 트리를 변경하기 위한 강력한 객체형 모델입니다. 웹 스크립팅을 위한 초석이기도 한 이 모델은 Mozilla Firefox and Microsoft Internet Explorer를 포함한 주요 브라우저에서 지원합니다.</p> + +<h2 id="What_is_a_content_tree.3F" name="What_is_a_content_tree.3F">What is a content tree?</h2> + +<p>많은 HTML 웹 페이지 저자(이하 개발자)는 HTML를 - 태그와 글자로 버무려진 - 평평한 무언가라고 생각할 수 있습니다. 하지만 HTML은, 그 이상의 의미를 가지고 있습니다. 모든 HTML 문서 (SGML document or XML document 또한) 트리 구조를 가지고 있습니다. 예를 들면 아래의 문서와 도면의 구조는 굉장히 유사합니다. (완전히 같지는 않습니다! <a href="/en-US/docs/Web/API/Document_Object_Model/Whitespace_in_the_DOM">whitespace in the DOM</a> 문서를 참조하세요.)</p> + +<pre class="brush: html"><html> +<head> + <title>My Document</title> +</head> +<body> + <h1>Header</h1> + <p>Paragraph</p> +</body> +</html> +</pre> + +<p><img alt="image:Using_the_W3C_DOM_Level_1_Core-doctree.jpg" class="internal" src="/@api/deki/files/415/=Using_the_W3C_DOM_Level_1_Core-doctree.jpg"></p> + +<p>모질라에서 어떤 HTML 문서를 파싱할 때, 컨텐츠 트리를 만들고 이를 HTML 보여줄 때 사용합니다.</p> + +<p>DOM Level 1 Core에 대해서 설명하기 위한 용어에 대한 설명입니다. 위 도면에서 나온 모든 박스는 트리의 노드입니다. 한 노드 위의 선은 노드 간의 부모 - 자식 관계를 설명합니다. 상위 노드가 부모 노드이고, 하위 노드는 자식 노드입니다. 두 자식 노드를 같은 부모 노드를 가지고 있기 때문에 형제자매 노드라고 부를 수 있습니다. 비슷하게, ancestors와 descendants라는 용어를 사용할 수도 있습니다.</p> + +<h2 id="What_does_the_DOM_Level_1_Core_let_me_do.3F" name="What_does_the_DOM_Level_1_Core_let_me_do.3F">What does the DOM Level 1 Core let me do?</h2> + +<p>The W3C DOM Level 1은 컨텐츠 트리를 웹 페이지 <em>개발자가 원하는 어떤 방식으로든</em> 바꿀 수 있게 합니다. 백지 상태에서 HTML 문서를 제작할 수 있을 만큼 강력합니다. 또한 스크립트 언어를 통해 언제 어디서든 HTML 문서를 개발자가 조작할 수 있도록 합니다. 자바스크립트를 통해서 개발자는 동적으로 DOM을 가장 쉽게 변경할 수 있습니다. 자바스크립트는 전역 객체의 <code>document</code> 객체를 통해 오래된 브라우저가 접근했던 그 방식대로, HTML 문서에 접근 가능합니다, 이 <code>document</code> 객체는 the W3C's DOM Level 1 spec의 <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#i-Document">Document interface</a> 가 적용되어 있습니다.</p> + +<h2 id="A_simple_example" name="A_simple_example">A simple example</h2> + +<p>개발자가 상단의 HTML 문서에서 header의 내용을 바꾸고, 한 문단(Paragraph) 대신 두 문단으로 적용하고 싶다면, 아래와 같은 스크립트를 작성할 수 있습니다. </p> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html"><body> +<input type="button" value="Change this document." onclick="change()"> +<h2>Header</h2> +<p>Paragraph</p> +</body><span> +</span></pre> + +<h3 id="JavaScript_Content">JavaScript Content</h3> + +<pre class="brush: js"><span> function change() { + // document.getElementsByTagName("H2") 는 <h2> 엘리먼트의 + // NodeList를 반환(return)합니다. 0부터 시작합니다. + + var header = document.getElementsByTagName("H2").item(0); + // 헤더의 첫번째 자식 노드는 Text 노드입니다. + header.firstChild.data = "A dynamic document"; + // 이제 헤더는 "A dynamic document"가 되었습니다. + + var para = document.getElementsByTagName("P").item(0); + para.firstChild.data = "This is the first paragraph."; + + // 두번째 문단을 만들기 위한 새로운 Text 노드를 만들었습니다. + var newText = document.createTextNode("This is the second paragraph."); + // 두번째 문단을 만들기 위한 새로운 p 엘리먼트를 만들었습니다. + var newElement = document.createElement("P"); + // 새로운 p 엘리먼트에 텍스트를 넣어 문단을 만듭니다. + newElement.appendChild(newText); + // 생성한 문단을 HTML 문서 마지막에 넣기 위해 + // (para의 부모인) HTML BODY에 append합니다. + para.parentNode.appendChild(newElement); + }</span></pre> + +<p>{{ EmbedLiveSample('A_simple_example', 800, 300) }}</p> + +<p><a href="/@api/deki/files/2866/=example.html">여기</a>에서 완성된 예시를 확인하실 수 있습니다.</p> + +<h2 id="How_can_I_learn_more.3F" name="How_can_I_learn_more.3F">How can I learn more?</h2> + +<p>이제 DOM의 기본적인 개념에 대한 설명이 끝났습니다. <a href="/en-US/docs/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces">DOM Level 1 fundamental methods</a> 에 대해서 궁금하시다면, 더 자세히 공부하실 수 있습니다.</p> + +<p>더욱 정확하고 엄밀한 설명은 W3C <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html">DOM Level 1 Core specification</a> 에서 확인하실 수 있습니다. 개발자에게 정보는 DOM 객체에 대한 설명과, 객체의 특성과 메소드에 대한 설명이 특히 유용합니다. <a href="/en-US/docs/DOM">MDN의 다른 DOM 관련 문서</a>도 참고 부탁 드립니다.</p> + +<div class="originaldocinfo"> +<p><strong>Original Document Information</strong></p> + +<ul> + <li>Author(s): L. David Baron <dbaron at dbaron dot org> </li> + <li>Copyright Information: © 1998-2005 by individual mozilla.org contributors; content available under a <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Creative Commons license</a></li> +</ul> +</div> diff --git a/files/ko/web/api/document_object_model/소개/index.html b/files/ko/web/api/document_object_model/소개/index.html new file mode 100644 index 0000000000..b31dbc43d9 --- /dev/null +++ b/files/ko/web/api/document_object_model/소개/index.html @@ -0,0 +1,239 @@ +--- +title: DOM 소개 +slug: Web/API/Document_Object_Model/소개 +tags: + - DOM + - 가이드 + - 문서 +translation_of: Web/API/Document_Object_Model/Introduction +--- +<p>이 문서는 {{glossary("DOM")}}에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 {{glossary("HTML")}}, {{glossary("XML")}} 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 대한 참조 정보와 예제들을 제공한다. </p> + +<h2 id="What_is_the_DOM" name="What_is_the_DOM">DOM 이란?</h2> + +<p>문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 구조화된 nodes와 property 와 method 를 갖고 있는 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.</p> + +<p>웹 페이지는 일종의 문서(document)다. 이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도 한다. 동일한 문서를 사용하여 이처럼 다른 형태로 나타날 수 있다는 점에 주목할 필요가 있다. DOM 은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있다.</p> + +<p><a class="external" href="http://www.w3.org/DOM/">W3C DOM</a>, <a class="external" href="https://dom.spec.whatwg.org">WHATWG DOM</a> 표준은 대부분의 브라우저에서 DOM 을 구현하는 기준이다. 많은 브라우저들이 표준 규약에서 제공하는 기능 외에도 추가적인 기능들을 제공하기 때문에 사용자가 작성한 문서들이 각기 다른 DOM 이 적용된 다양한 브라우저 환경에서 동작할 수 있다는 사실을 항상 인지하고 있어야 한다.</p> + +<p>예를 들어, 표준 DOM 에서는 문서 안에서 모든 <code><P></code> elements 에 대한 list 를 리턴하는 <code>getElementsByTagName</code> method 를 정의하고 있다:</p> + +<pre class="brush: js">var paragraphs = document.getElementsByTagName("P"); +// paragraphs[0] is the first <p> element +// paragraphs[1] is the second <p> element, etc. +alert(paragraphs[0].nodeName); +</pre> + +<p>웹 페이지를 수정하거나 생성하는데 사용되는 모든 property, method, event 들은 objects 로 구성된다. 예를 들어 document object 는 document 자체를 의미하며, table object 는 HTML table 에 접근하기 위한 <code>HTMLTableElement</code> DOM 인터페이스를 구현한 것이다. 이 문서는 Gecko 기반의 브라우저에서 구현된 DOM 에 대한 object-by-object reference 를 제공한다.</p> + +<h2 id="DOM_and_JavaScript" name="DOM_and_JavaScript">DOM 과 자바스크립트</h2> + +<p>이 문서의 대부분의 예제와 같이, 위에서 사용된 예제는 {{glossary("JavaScript")}}이다. 위의 예제는 자바스크립트로 작성되었지만 문서(document) 와 문서의 요소(element) 에 접근하기 위해 DOM 이 사용되었다. DOM 은 프로그래밍 언어는 아니지만 DOM 이 없다면 자바스크립트 언어는 웹 페이지 또는 XML 페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못하게 된다. 문서의 모든 element - 전체 문서, 헤드, 문서 안의 table, table header, table cell 안의 text - 는 문서를 위한 document object model 의 한 부분이다. 때문에, 이러한 요소들을 DOM 과 자바스크립트와 같은 스크립팅 언어를 통해 접근하고 조작할 수 있는 것이다. </p> + +<p>초창기에는 자바스크립트와 DOM 가 밀접하게 연결되어 있었지만, 나중에는 각각 분리되어 발전해왔다. 페이지 콘텐츠(the page content)는 DOM 에 저장되고 자바스크립트를 통해 접근하거나 조작할 수 있다. 이것을 방정식으로 표현하면 아래와 같다:</p> + +<p>API (web or XML page) = DOM + JS (scripting language)</p> + +<p>DOM 은 프로그래밍 언어와 독립적으로 디자인되었다. 때문에 문서의 구조적인 표현은 단일 API 를 통해 이용가능하다. 이 문서에서는 자바스크립트를 주로 사용하였지만, DOM 의 구현은 어떠한 언어에서도 가능하다. 아래는 파이썬을 사용한 예제이다:</p> + +<pre class="brush: python"># Python DOM example +import xml.dom.minidom as m +doc = m.parse("C:\\Projects\\Py\\chap1.xml"); +doc.nodeName # DOM property of document object; +p_list = doc.getElementsByTagName("para"); +</pre> + +<p>웹에서 자바스크립트 사용하기와 관련된 기술에 대한 추가정보는 <a href="/ko/docs/Web/JavaScript/JavaScript_technologies_overview">자바스크립트 기술 개요</a> 문서를 참조하라.</p> + +<h2 id="How_Do_I_Access_the_DOM.3F" name="How_Do_I_Access_the_DOM.3F">DOM 에 어떻게 접근할 수 있는가?</h2> + +<p>DOM 을 사용하기 위해 특별히 해야할 일은 없다. 각각의 브라우저는 자신만의 방법으로 DOM 구현하였으며, 이로 인해 실제 DOM 기준을 따르는지 확인해야 하는 번거로움이 발생하였다. (이 문제는 이 문서에서 피하고 싶어하는 주제이기도 하다.) 모든 웹 브라우저는 스크립트가 접근할 수 있는 웹 페이지를 만들기 위해 어느 정도의 DOM 을 항상 사용한다. </p> + +<p>스크립트를 작성할 때(인라인 <script> 요소를 사용하거나 웹 페이지 안에 있는 스크립트 로딩 명령을 사용하여), 문서 자체를 조작하거나 문서의 children 을 얻기 위해 {{domxref("document")}} 또는 <code><a href="/ko/docs/DOM/window" title="DOM/window">window</a></code> elements 를 위한 API 를 즉시 사용할 수 있다. DOM 프로그래밍은 아래처럼 <code><a href="/ko/docs/DOM/window" title="DOM/window">window</a></code> object 로 부터 <code><a href="/ko/docs/DOM/window.alert" title="DOM/window.alert">alert()</a></code> 함수를 사용하여 alert message 를 표시하는 매우 간단한 것일 수도 있고 다음번 예제처럼 새로운 content 를 작성하는 복잡한 DOM 이 될 수도 있다.</p> + +<pre class="brush: html"><body onload="window.alert('welcome to my home page!');"> +</pre> + +<p>아래의 자바스크립트는 문서가 로드될 때(모든 DOM을 사용할 수 있게 되는 때임) 실행되는 함수를 정의하였다. 이 함수는 새로운 H1 element 를 생성하고, element 에 text 를 추가하며, H1 을 이 문서의 트리에 추가한다.</p> + +<pre class="brush: html"><html> + <head> + <script> + // run this function when the document is loaded + window.onload = function() { + + // create a couple of elements in an otherwise empty HTML page + var heading = document.createElement("h1"); + var heading_text = document.createTextNode("Big Head!"); + heading.appendChild(heading_text); + document.body.appendChild(heading); + } + </script> + </head> + <body> + </body> +</html> +</pre> + +<h2 id="Important_Data_Types" name="Important_Data_Types">중요한 데이터 타입들</h2> + +<p>이 문서는 objects 와 types 을 최대한 간단하게 설명하려 한다. API 에는 우리가 반드시 알고 있어야 할 수많은 data types 이 있다는 사실을 염두해 두기 바란다. 이 문서에서는 nodes 는 <code>element</code>s 로, 노드의 arrays 는 <code>nodeList</code>s(또는 <code>element</code>s), attribute 노드들은 <code>attribute</code>s 로 표현하였다.</p> + +<p>아래의 표는 이러한 data types 에 대한 간략한 설명이다.</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><code>document</code></td> + <td> + <p>member 가 document type 의 object 를 리턴할 때(예를 들어 element의 <strong><code>ownerDocument</code></strong> property 는 그것이 속해 있는 document 를 return 한다. ), 이 object 는 root document object 자체이다. 는 <code>document</code> object 에 대한 설명은 <a href="/ko/docs/DOM/document" title="DOM/document">DOM <code>document</code> Reference</a> 챕터를 참조하라.</p> + </td> + </tr> + <tr> + <td><code>element</code></td> + <td> + <p><code>element</code> 는 DOM API 의 member 에 의해 return 된 element 또는 <code>element</code> type 의 node 를 의미한다. <a href="/ko/docs/Web/API/Document/createElement">document.createElement()</a> method 가 <code>node</code> 를 참조하는 object 를 리턴한다고 말하는 대신, 이 method 가 DOM 안에서 생생되는 <code>element</code> 를 리턴한다고 좀 더 단순하게 말할 수 있다. <code>element</code> 객체들은 DOM <code>Element</code> interface 와 함께 좀 더 기본적인 <code>Node</code> interface 를 구현한 것이기 때문에 이 reference 에는 두 가지가 모두 포함되었다고 생각하면 된다.</p> + </td> + </tr> + <tr> + <td><code>nodeList</code></td> + <td> + <p><code>nodeList</code> 는 elements 의 배열이다. (<a href="/ko/docs/Web/API/Document/getElementsByTagName">document.getElementsByTagName()</a> method 에 의해 리턴된 것과 같은) nodeList의 Items 은 index 를 통해 접근 가능하며, 다음과 같이 두 가지 방식이 있다:</p> + + <ul> + <li>list.item(1)</li> + <li>list[1]</li> + </ul> + 위의 방식들은 동일한 것이다. <strong><code>item()</code></strong>method는 <code>nodeList</code> object 의 단일 method 이다. 두번째 방식은 list 에서 두번째 item 을 fetch 하는 전형적인 array syntax 이다. </td> + </tr> + <tr> + <td><code>attribute</code></td> + <td> + <p>attribute 가 member 에 의해 리턴되는 것은(예를 들어 <strong><code>createAttribute()</code></strong> method 호출에 의한 리턴), attribute 에 대한 특별한 인터페이스를 노출하는 object reference 이다. attributes 는 DOM 에서 elements 와 같은 nodes 이다. elements 만큼 많이 사용되지는 않는다.</p> + </td> + </tr> + <tr> + <td><code>namedNodeMap</code></td> + <td> + <p><code>namedNodeMap</code> 는 array 와 유사하지만 items 은 name 또는 index 에 의해 접근 가능하다. 리스트는 특별한 정렬이 적용되지 않았기 enumeration 할 때 index 를 주로 사용한다. <code>namedNodeMap</code> 는 이를 위해 item() method 가 있으며, <code>namedNodeMap</code> 에 item 을 추가하거나 삭제할 수 있다.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="DOM_interfaces" name="DOM_interfaces">DOM interfaces</h2> + +<p>이 문서는 objects 와 DOM 에서 조작가능한 것들에 대해 설명하고 있다. 사람들은 HTML FORM element 가 <code>HTMLFormElement</code> interface 로부터 <strong><code>name</code></strong> property 를 얻고, <strong><code>className</code></strong> property 는 <code>HTMLElement</code> interface 로부터 얻는 것에 대해 별로 관심을 보이지 않는 것 같다. 두가지 경우 모두, property 는 form object 안에 있는 것이다. </p> + +<p>하지만 DOM 안에 구현된 objects 와 interfaces 사이의 관계는 혼동될 수 있다. 이 섹션에서는 DOM specification 안의 실제 interfaces 와 그들을 어떻게 활용할 수 있는지에 대해 살펴보도록 하겠다.</p> + +<h3 id="Interfaces_and_Objects" name="Interfaces_and_Objects">Interfaces 와 Objects</h3> + +<p>많은 objects 가 여러 개의 다른 interfaces 와 연관되어 있다. 예를 들어, table object 는 <code>createCaption</code>, <code>insertRow</code> method 들이 포함된 {{domxref("HTMLTableElement")}} 을 구현한 것이다. table object 는 HTML element 이기도 하기 때문에, <code>table</code> 은 <code>Element</code> interface(DOM {{domxref("Element")}} Reference 챕터 참조)도 구현한다. 마지막으로, HTML element 는 DOM 이 연관되어 있는 한 nodes 트리(tree)에서 하나의 node 이다. nodes 트리는 웹 페이지 또는 XML 페이지를 위한 object model 을 구성한다. 때문에 table element 는 보다 기본적인 <code>Element</code> 에서 파생된 <code>Node</code> interface 를 구현하고 있다.</p> + +<p>아래의 예제처럼, <code>table</code> object 를 참조하게 되면, 기본적으로 이들 3 가지 interfaces 를 사용할 수 있게 된다.</p> + +<pre class="brush: js">var table = document.getElementById("table"); +var tableAttrs = table.attributes; // Node/Element interface +for (var i = 0; i < tableAttrs.length; i++) { + // HTMLTableElement interface: border attribute + if(tableAttrs[i].nodeName.toLowerCase() == "border") + table.border = "1"; +} +// HTMLTableElement interface: summary attribute +table.summary = "note: increased border"; +</pre> + +<h3 id="Core_Interfaces_in_the_DOM" name="Core_Interfaces_in_the_DOM">DOM 의 핵심 Interfaces</h3> + +<p>이 섹션은 DOM 에서 가장 많이 사용되는 interfaces 를 정리해보았다. 여기에서는 이들 API 가 실제로 어떤 일을 하는지 설명하는 대신 DOM 을 사용하면서 자주 만나게 되는 methods 와 properties 를 보여줄 것이다. 이들 API 는 이 책의 마지막에 소개된 <a href="/ko/docs/Gecko_DOM_Reference/Examples" title="Gecko_DOM_Reference/Examples">DOM 예제</a>에서도 사용되었다.</p> + +<p><code>Document</code> 와 <code>window</code> objects 는 DOM 프로그래밍에서 가장 자주 사용하는 objects 이다. 간단하게 설명하자면, <code>window</code> object 는 브라우저와 같다고 할 수 있으며, <code>document</code> object 는 root document 자체라고 할 수 있다. generic <code>Node</code> interface 로부터 상속받은 <code>Element</code> 와 <code>Node</code>, <code>Element</code> interfaces 가 협력하여 각각의 elements 에서 사용할 수 있는 수많은 methods 와 properties 를 제공한다. 이러한 elements 는 이전 섹션에서 설명한 <code>table</code> object 예제에서도 살펴봤듯이, elements 가 보유한 데이터를 처리할 수 있는 특정한 interfaces 도 가지고 있다.</p> + +<p>아래는 웹 페이지, XML 페이지 스크립팅에서 DOM 을 사용하는 공통적인 API 들의 간략한 목록이다. </p> + +<ul> + <li><code><a href="/ko/docs/DOM/document.getElementById" title="DOM/document.getElementById">document.getElementById</a>(id)</code></li> + <li><code>document.<a href="/ko/docs/Web/API/Element.getElementsByTagName" title="DOM/element.getElementsByTagName">getElementsByTagName</a>(name)</code></li> + <li><code><a href="/ko/docs/DOM/document.createElement" title="DOM/document.createElement">document.createElement</a>(name)</code></li> + <li><code>parentNode.<a href="/ko/docs/DOM/Node.appendChild" title="DOM/Node.appendChild">appendChild</a>(node)</code></li> + <li><code>element.<a href="/ko/docs/DOM/element.innerHTML" title="DOM/element.innerHTML">innerHTML</a></code></li> + <li><code>element.<a href="/ko/docs/DOM/element.style" title="DOM/element.style">style</a>.left</code></li> + <li><code>element.<a href="/ko/docs/DOM/element.setAttribute" title="DOM/element.setAttribute">setAttribute</a></code></li> + <li><code>element.<a href="/kodocs/DOM/element.getAttribute" title="DOM/element.getAttribute">getAttribute</a></code></li> + <li><code>element.<a href="/ko/docs/DOM/element.addEventListener" title="DOM/element.addEventListener">addEventListener</a></code></li> + <li><code><a href="/ko/docs/DOM/window.content" title="DOM/window.content">window.content</a></code></li> + <li><code><a href="/ko/docs/DOM/window.onload" title="DOM/window.onload">window.onload</a></code></li> + <li><code><a href="/ko/docs/DOM/window.dump" title="DOM/window.dump">window.dump</a></code></li> + <li><code><a href="/ko/docs/DOM/window.scrollTo" title="DOM/window.scrollTo">window.scrollTo</a></code></li> +</ul> + +<h2 id="Testing_the_DOM_API" name="Testing_the_DOM_API">DOM API 테스팅</h2> + +<p>이 문서는 사용자가 웹 개발에 사용할 수 있는 모든 interface 에 대한 예제를 제공한다. 예제는 <code><script></code> element 안에서 DOM 에 접근하는 완벽한 HTML 페이지 형태인 것도 있고, form 에서 script 를 실행하기 위해 버튼과 같은 interface 가 필요한 경우도 있으며, DOM 이 목록화되어 수행되는 HTML elements 도 있을 것이다. 사용자들은 이러한 예제를 새로운 HTML 문서에 복사하여 브라우저에서 실행할 수 있다. </p> + +<p>어떤 예제는 매우 간단할 수도 있다. HTML elements 에 대한 interface의 기본적인 관계만 보여주는 이러한 예제를 실행할 때는, 스크립트에서 쉽게 접근할 수 있는 test page 를 설정할 수도 있다. 아래의 예제는 interface를 테스트 할 수 있는 함수가 위치할 수 있는 header 안에 <code><script></code> element 제공한다. 이 함수는 retrieve, set, 조작할 수 있는 attributes 가 포함된 HTML elements 가 사용되었으며, 브라우저에서 이들 함수를 호출하기 위해 웹 UI 를 제공한다.</p> + +<p>사용자는 자신이 관심있어 하는 DOM interfaces 를 테스트 하기 위해, 이 test page 를 사용하거나 이와 비슷한 것을 만들어 브라우저에서 어떻게 동작하는지 확인할 수 있다. 사용자는 <code>test()</code> 함수 내용을 필요에 따라 업데이트할 수 있다. (버튼 추가, elements 추가 등)</p> + +<pre class="brush: html"><html> + <head> + <title>DOM Tests</title> + <script type="application/javascript"> + function setBodyAttr(attr,value){ + if (document.body) eval('document.body.'+attr+'="'+value+'"'); + else notSupported(); + } + </script> + </head> + <body> + <div style="margin: .5in; height: 400;"> + <p><b><tt>text</tt>color</b></p> + <form> + <select onChange="setBodyAttr('text', + this.options[this.selectedIndex].value);"> + <option value="black">black + <option value="darkblue">darkblue + </select> + <p><b><tt>bgColor</tt></b></p> + <select onChange="setBodyAttr('bgColor', + this.options[this.selectedIndex].value);"> + <option value="white">white + <option value="lightgrey">gray + </select> + <p><b><tt>link</tt></b></p> + <select onChange="setBodyAttr('link', + this.options[this.selectedIndex].value);"> + <option value="blue">blue + <option value="green">green + </select> <small> + <a href="http://www.brownhen.com/dom_api_top.html" id="sample"> + (sample link)</a></small><br> + </form> + <form> + <input type="button" value="version" onclick="ver()" /> + </form> + </div> + </body> +</html> +</pre> + +<p>단일 페이지(예를 들어, 웹 페이지의 색상에 영향을 주는 property 설정하는) 안의 수많은 interfaces 를 테스트하기 위해 설정 버튼, textfield, 또는 다른 HTML elements를 사용하여 유사한 테스트 페이지를 만들 수 있다. 아래의 스크린샷은 테스트를 위해 어떻게 interfaces를 그룹화하는지에 대한 아이디어를 제공하고 있다. </p> + +<figure> +<figcaption>Figure 0.1 Sample DOM Test Page</figcaption> +<img alt="Image:DOM_Ref_Introduction_to_the_DOM.gif" class="internal" src="/@api/deki/files/173/=DOM_Ref_Introduction_to_the_DOM.gif"></figure> + +<p>이 예제에서 드롭다운 메뉴는 웹 페이지에서 DOM 접근가능한 배경색상(<code>bgColor</code>), 하이퍼링크 색상(<code>aLink</code>), 텍스트 색상(<code>text</code>)을 동적으로 업데이트한다. 어떻게 자신의 test pages 를 디자인하더라도, interface 테스트는 DOM 을 효과적으로 사용하는 법을 배우는 데 매우 중요한 수단임을 명심하라.</p> + +<h2 id="Subnav">Subnav</h2> + +<ul> + <li><a href="/ko/docs/Web/API/Document_Object_Model">DOM Reference</a></li> + <li><a href="/ko/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a></li> + <li><a href="/ko/docs/Web/API/Document_Object_Model/Events">Events and the DOM</a></li> + <li><a href="/ko/docs/Web/API/Document_Object_Model/Examples">Examples</a></li> +</ul> + +<div>{{DefaultAPISidebar("DOM")}}</div> |