DOM

settings_applicationsEventTarget  >   settings_applicationsNode  >   settings_applicationsDocument

DOM

Editing
  • bug_report

Constructor

웹브라우저의 창이 열릴 때 마다 웹 문서에 대한 진입점 역할을 하는 인스턴스가 자동으로 만들어지며 window 전역 객체의 document 프로퍼티로 참조된다.

설명

생성자로 Document() 함수가 존재하지만 작성 시점 기준으로 제대로 동작하지 않고 관련 API와도 맞지 않다. 그리고 HTML 문서와 XML 문서에서 생성하는 방식이 다르다. HTML 문서의 경우는 document.implementation.createHTMLDocument()메소드를 사용하여 구현하도록 한다.

구문

형식
new Document()
document.implementation.createHTMLDocument() API를 사용하여 새로운 Document 객체 생성

Prototype 체인

Document

  • Properties

    • activeElement

      현재 문서에서 포커스를 가진 DOM 내의 요소를 참조한다.

    • adoptedStyleSheets

      현재 문서에서 사용될 구성된 스타일시트 배열을 설정하거나 조회한한다.

    • body

      현재 문서의 <body> 요소를 나타내는 HTMLBodyElement 객체를 참조한다.

    • characterSet

      현재 문서의 문자 인코딩을 조회한다.

    • childElementCount

      현재 문서의 하위 요소의 개수를 조회한다.

    • children

      현재 문서의 모든 자식 요소를 포함한는 라이브 상태의 HTMLCollection을 조회한다.

    • compatMode

      현재 문서가 쿼크(quirks) 모드 또는 표준 모드에서 렌더링되는지의 여부를 나타낸다.

    • contentType

      현재 문서의 MIME 유형을 조회한다.

    • cookie

      현재 문서와 관련된 쿠키(cookie)를 조회하거나 설정한다.

    • currentScript

      현재 문서에 처리중이며 자바스크립트 모듈이 아닌 <script> 요소를 나타내는 HTMLScriptElement 객체로 참조한다.

    • defaultView

      현재 문서에 연결된 window 객체를 참조한다.

    • designMode

      전체 문서를 편집할 수 있는 여부를 'on' 또는 'off'로 제어한다.

    • dir

      문서의 텍스트 방향을 조회하거나 설정한다.

    • doctype

      현재 문서와 연관된 DTD(Document Type Precent)를 조회한다.

    • documentElement

      문서의 루트 요소인 HTMLElement 객체를 참조한다.

    • documentURI

      현재 문서의 위치를 문자열로 조회한다.

    • embeds

      현재 문서 내의 <embed> 요소를 나타내는 모든 HTMLEmbedElement 객체를 포함한 HTMLCollection 객체를 참조한다.

    • firstElementChild

      현재 문서의 첫 번째 자식 요소를 참조한다

    • fonts

      현재 문서의 FontFaceSet 객체를 참조한다.

    • forms

      현재 문서 내의 <form> 요소를 나타내는 모든 HTMLFormElement 객체를 포함하는 HTMLCollection을 참조한다.

    • fullscreenElement

      현재 문서에서 전체 화면 모드로 표시되는 요소를 조회한다. 전체 화면 모드가 아닌 경우 null을 갖는다.

    • fullscreenEnabled

      현재 문서에서 전체 화면 모드를 사용할 수 있는지 여부를 불리언(boolean)으로 조회한다.

    • head

      현재 문서의 <head> 요소를 나타내는 HTMLHeadElement 객체를 참조한다.

    • hidden

      현재 문서가 숨겨져 있는지 여부를 불리언(boolean)으로 조회한다.

    • images

      현재 문서 내의 <img >요소를 나타내는 모든 HTMLImageElement 객체를 포함한 HTMLCollection 객체를 참조한다.

    • implementation

      현재 문서와 연결된 DOMImplementation 객체를 참조한다.

    • lastElementChild

      현재 문서의 마지막 자식 요소를 참조한다

    • lastModified

      현재 문서가 마지막으로 수정된 날짜와 시간을 포함하는 문자열을 조회한다.

    • links

      현재 문서 내의 href 애트리뷰트를 가진 <a>, <area> 요소를 나타내는 각각의 모든 HTMLAnchorElement, HTMLAreaElement 객체를 포함하는 HTMLCollection을 참조한다.

    • location

      현재 문서에 대한 URL을 다루는 Location 객체를 참조한다.

    • pictureInPictureElement

      현재 문서에서 PIP 모드로 표시되는 요소를 조회한다. 해당되지 않는 경우 null을 갖는다.

    • PictureInPictureEnabled

      현재 문서에서 PIP 모드를 사용할 수 있는지 여부를 불리언(boolean)으로 조회한다.

    • plugins

      현재 문서 내의 <embed> 요소를 나타내는 모든 HTMLEmbedElement 객체를 포함한 HTMLCollection 객체를 참조한다.

    • pointLockElement

      현재 문서에서 포인터가 잠겨있는 동안 마우스 이벤트의 대상으로 설정된 요소를 참조한다.

    • readyState

      문서의 로드 상태를 나타낸다.

    • referrer

      현재 페이지에 연결된 이전 페이지의 URL을 조회한다.

    • scripts

      현재 문서 내의 <script> 요소를 나타내는 모든 HTMLScriptElement 객체를 포함한 HTMLCollection 객체를 참조한다.

    • scrollingElement

      현재 문서를 스크롤하는 요소를 참조한다.

    • styleSheets

      현재 문서에 명시적으로 연결되었거나 문서에 포함된 스타일시트를 나타내는 CSSStyleSheet 객체의 목록을 다루는 StyleSheetList 객체를 참조한다.

    • timeline

      현재 문서의 기본 타임라인을 나타내는 DocumentTimeline 객체의 인스턴스를 참조한다.

    • title

      현재 문서의 제목(<title>)을 조회하거나 설정한다.

    • URL

      현재 문서의 위치를 조회한다.

    • visibilityState

      현재 문서의 가시성 상태를 조회한다.

  • Methods

    • adoptNode()

      현재 문서로 다른 문서에 있는 지정된 노드를 전송한다.

    • append()

      현재 문서 하위의 맨 끝에 지정된 노드를 추가한다.

    • close()

      Document.prototype.open() 메소드로 열린 현재 문서의 쓰기를 완료한다.

    • createAttribute()

      새로운 Attr 객체를 생성한다.

    • createAttributeNS()

      네임스페이스 URI를 지정하여 새로운 Attr 객체를 생성한다.

    • createCDATASection()

      새로운 CDATA 섹션 노드를 생성한다.

    • createComment()

      새로운 주석 노드를 생성한다.

    • createDocumentFragment()

      현재 DOM 트리에 영향을 주지 않는 문서 조각으로 사용될 새로운 DOM 트리를 생성한다. 

    • createElement()

      지정된 태그 명으로 새로운 Element 객체를 생성한다.

    • createElementNS()

      지정된 네임스페이스 URI와 정규화된 이름으로 요소를 생성한다.

    • createEvent()

      지정된 유형의 이벤트를 생성한다.

    • createNodeIterator()

      현재 문서에서 지정된 루트 노드의 하위 노드를 대상으로 지정된 기준에 따라 구성된 새로운 NodeIterator 객체를 반환한다.

    • createProcessingInstruction()

      새로운 ProcessingInstruction 노드를 생성한다.

    • createRange()

      새로운 Range 객체를 생성한다.

    • createTextNode()

      새로운 Text 노드 객체를 생성한다.

    • createTreeWalker()

      현재 문서에서 지정된 루트 노드의 하위 노드를 대상으로 지정된 기준에 따라 구성된 트리 내의 노드를 다루는 TreeWalker 객체를 반환한다.

    • elementFromPoint()

      뷰포트(viewport)를 기준으로 지정된 좌표에서 최상위 요소를 반환한다.

    • elementsFromPoint()

      뷰포트(viewport)를 기준으로 지정된 좌표에 있는 모든 요소를 배열로 반환한다.

    • exitFullscreen()

      현재 문서의 요소가 전체 화면 모드로 표시될 때 원래 화면 모드로 복원한다.

    • exitPictureInPicture()

      현재 문서에서 PIP 모드로 보여지는 미디어 요소를 원래 모드로 복원한다.

    • exitPointerLock()

      현재 문서에 포인터 잠금이 지정된 경우 비동기적으로 해제한다.

    • getAnimations()

      현재 문서의 하위 요소에 연결된 유효한 모든 Animation 객체의 배열을 반환한다.

    • getElementById()

      현재 문서 내의 하위 요소들에 대하여 지정된 id 애트리뷰트를 갖는 요소를 찾아 반환한다.

    • getElementsByClassName()

      현재 문서 내의 하위 요소들에 대하여 지정된 class 애트리뷰트를 갖는 요소들을 모두 찾아 HTMLCollection으로 반환한다.

    • getElementsByName()

      현재 문서 내의 하위 요소들에 대하여 지정된 name 애트리뷰트를 갖는 요소들을 모두 찾아 NodeList으로 반환한다.

    • getElementsByTagName()

      현재 문서 내의 하위 요소들에 대하여 지정된 태그 이름을 갖는 요소들을 모두 찾아 HTMLCollection으로 반환한다.

    • getSelection()

      현재 문서에서 사용자가 선택한 텍스트의 범위를 가진 Selection 객체를 반환한다.

    • hasFocus()

      현재 문서 또는 문서 내부의 요소에 포커스(focus)가 있는지를 나타내는 불리언(boolean)을 반환한다.

    • hasStorageAccess()

      현재 문서가 분할되지 않은 쿠키(cookie)에 엑세스할 수 있는지 여부를 불리언(boolean)으로 확인하는 Promise 객체를 반환한다.

    • importNode()

      현재 문서에 삽입할 수 있는 다른 문서의 Node 객체 또는 DocumentFragment 객체의 복사본을 생성한다.

    • open()

      현재 문서에 Document.prototype.write() 메소드를 사용하여 새로 쓰기 위해 문서를 연다.

    • prepend()

      현재 문서의 첫 번째 자식 앞에 Node 객체 또는 문자열 세트 집합을 추가한다.

    • querySelector()

      현재 문서내의 Element 객체를 대상으로 지정된 CSS 선택기 세트와 첫 번째로 일치하는 요소를 반환한다.

    • querySelectorAll()

      현재 문서내의 Element 객체를 대상으로 지정된 CSS 선택기 세트와 일치하는 모든 요소를 NodeList로 반환한다.

    • replaceChildren()

      현재 문서의 기존 하위 노드를 지정된 새 노드로 대체한다.

    • requestStorageAccess()

      로드된 현재 문서가 분할되지 않은 쿠키에 대한 접근을 요청한다.

    • write()

      document.open() 메소드로 열린 현재 문서 스트림(stream)에 지정된 텍스트 문자열을 작성한다.

    • writeln()

      document.open() 메소드로 열린 현재 문서 스트림(stream)에 끝에 개행이 포함된 지정된 텍스트 문자열 작성한다.

Node

  • Properties

    • baseURI

      기본 URL을 조회한다.

    • childNodes

      현재 노드의 자식 노드 집합체 NodeList를 라이브(live)로 참조한다.

    • firstChild

      첫 번째 자식 노드를 참조한다. 존재하지 않는 경우 null을 갖는다.

    • isConnected

      노드가 컨텍스트(Document) 객체에 직접 또는 간접적으로 연결되어 있는지에 대한 불리언(boolean) 값을 가지고 있다.

    • lastChild

      마지막 자식 노드를 참조한다. 존재하지 않는 경우 null을 갖는다.

    • nextSibling

      순서에 따라 현재 노드의 다음 형제 노드를 참조한다. 더 이상의 노드가 조회되지 않는 경우에는 null을 갖는다.

    • nodeName

      노드의 이름을 조회할 수 있다.

    • nodeType

      노드 유형을 조회할 수 있다.

    • nodeValue

      노드의 값을 조회하거나 설정할 수 있다.

    • ownerDocument

      현재 노드의 최상위 document 객체를 참조한다.

    • parentElement

      현재 노드의 부모 요소(element)를 참조한다. 부모 요소가 없거나 부모가 DOM 요소가 아닌 경우에는 null을 갖는다.

    • parentNode

      현재 노드의 부모 노드를 참조한다.

    • previousSibling

      순서에 따라 현재 노드의 이전 형제 노드를 참조한다. 더 이상의 노드가 조회되지 않는 경우에는 null을 갖는다.

    • textContent

      현재 노드와 하위의 텍스트 콘텐츠를 조회하거나 설정한다.

  • Methods

    • appendChild()

      지정된 노드(node) 객체를 자식 노드로 끝에 추가한다.

    • cloneNode()

      노드를 새로운 노드로 복사한다.

    • compareDocumentPosition()

      현재 노드를 기준으로 지정된 노드의 위치를 문서 내 다른 노드와 비교하여 기본적으로 정의된 값을 반환한다.

    • contains()

      현재 노드가 지정된 노드를 포함하고 있는지를 확인하여 그 결과를 불리언(boolean)으로 반환한다.

    • getRootNode()

      현재 노드의 루트를 반환하며 사용 가능한 경우 섀도우 루트(shadow root)를 선택적으로 반환한다.

    • hasChildNodes()

      현재 노드에 대한 자식 노드의 존재 여부를 불리언(boolean)으로 반환한다.

    • insertBefore()

      지정된 새 자식 노드를 지정된 기존 자식 노드 앞에 추가한다. 새로운 자식 노드가 기존 노드인 경우에는 위치가 이동된다.

    • isDefaultNamespace()

      네임스페이스 URI를 인수로 받아 지정된 네임스페이스가 현재 노드의 기본 네임스페이스인 경우 true, 그렇지 않은 경우 false를 반환한다.

    • isEqualNode()

      지정된 노드와 동일한지를 테스트하고 그 결과를 불리언(boolean)으로 반환한다.

    • isSameNode()

      현재 노드가 지정된 노드와 같은지(=== 연산자와 동일)에 대한 여부, 즉 동일한 객체를 참조하는지를 테스트하여 그 결과를 불리언(boolean)으로 반환한다.

    • lookupNamespaceURI()

      현재 노드에서 지정된 프리픽스(prefix)와 일치하는 네임스페이스를 반환한다.

    • lookupPrefix()

      지정된 네임스페이스 URI가 있는 경우 해당 접두사가 포함된 문자열을 반환하고 그렇지 않은 경우 null을 반환한다.

    • normalize()

      현재 노드와 모든 하위 트리를 정규화된 형식으로 변환한다.

    • removeChild()

      자식 노드를 제거하고 제거된 노드를 반환한다.

    • replaceChild()

      현재 노드에서 지정된 기존 자식 노드를 새로운 노드로 대체한다.

EventTarget

  • Methods

    • addEventListener()

      EventTarget 인터페이스를 상속받는 하위 요소들의 이벤트 리스너(Listener)를 등록한다. Window 객체도 포함된다.

    • dispatchEvent()

      사용자가 생성한 이벤트를 전달한다. 코드에 의한 이벤트 트리거(trigger)에 사용된다.

    • removeEventListener()

      등록된 이벤트를 제거한다. 이벤트 타입, 등록된 함수, 등록시 제공했던 다양한 옵션과 일치된 경우에 이벤트를 제거한다.

Object

  • Methods

    • hasOwnProperty()

      객체가 특정 프로퍼티를 가지고 있는지를 블린(boolean) 값으로 반환한다.

    • isPrototypeOf()

      해당 객체가 다른 객체의 프로토타입 체인에 속한 객체인지를 체크한다.

    • propertyIsEnumerable()

      매개 변수의 속성이 열거가능(enumerable)한지 여부를 체크한다.

    • toLocaleString()

      객체를 나타내는 문자열을  작동하는 지역(locale)의 방식으로 출력이 된다.

    • toString()

      객체를 나타내는 문자열을 반환한다.

    • valueOf()

      객체의 원시(primitive) 값을 반환한다.

  • Properties

    • constructor

      객체의 생성자 함수를 참조한다.

    • __proto__

      상속된 [[Prototype]] 참조하거나 설정가능하며 일반적으로 실제 코드상에서는 잘 사용되지 않는다. ECMAScript에서 사용되지 않는 비표준이지만 최신 웹브라우저에서는 비공식적으로 지원하고 있다. 따라서 곧 표준 속성으로 지원될 확률이 높다.

      현재는 표준 사양에 명시되었다.

지원 웹브라우저