DOM

settings_applicationsEventTarget  >   settings_applicationsNode

DOM

Editing
  • account_tree
  • bug_report

InterfaceDocument

웹브라우저의 창이 열릴 때 해석되어지는 문서를 다루는 인터페이스이다. 웹 페이지 콘텐츠의 진입점 역할을 수행한다.

설명

DOM 트리는 <head>, <body> 등 다양한 요소들을 포함한다. 그리고 문서에 관여하는 다양한 전역적인 기능들을 제공한다.

하위 트리 탐색

  • Constructor

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

    • Document()

      웹브라우저에 로드되고 웹 페이지 콘텐츠의 진입점으로써 제공되는 새로운 Document 객체를 생성한다.

  • [[Prototype]]

    • 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)에 끝에 개행이 포함된 지정된 텍스트 문자열 작성한다.

  • Events

    • copy

      사용자가 유저 에이전트의 사용자 인터페이스를 통해 복사 작업을 수행할 때 발생한다

    • cut

      선택이 잘라내기 되어진 후 클립보드로 복사되었을 때 발생한다.

    • DOMContentLoaded

      HTML 문서가 완전히 로드되어 구문 분석이 되고 모든 지연된 스크립트(<script defer>, <script type="module">)가 다운로드 및 실행되면 발생한다.

    • fullscreenchange

      지정 요소가 전체 화면 모드로 전환되거나 해제될 때 발생한다.

    • fullscreenerror

      전체 화면 모드로 전환하거나 외부에서 전환하려고 시도하는 동안 오류가 발생하면 요소로 전송되는 이벤트이다.

    • paste

      클립보드의 항목이 불여넣기 되어질 때 발생한다.

    • pointerlockchange

      입력 장치의 포인터가 잠기거나 잠금이 해제되면 발생한다.

    • pointerlockerror

      입력 장치의 포인터 잠금이 실패하면 발생한다. 기술적인 이유이거나 권한 부족으로 거부될 경우에 발생할 수 있다.

    • readystatechange

      documentreadyState 속성이 변경되면 발생한다.

    • scroll

      요소가 스크롤 될 때 발생한다.

    • scrollend

      스크롤이 완료되면 VisualViewport, Document 또는 Element에서 발생한다.

    • selectionchange

      현재 문서에서 텍스트의 선택이 변경되면 발생한다.

    • visibilitychange

      웹브라우저 탭(tab)의 콘텐츠가 visible 또는 hidden 상태로 변경될 때 발생한다.

상속 계층 탐색

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에서 사용되지 않는 비표준이지만 최신 웹브라우저에서는 비공식적으로 지원하고 있다. 따라서 곧 표준 속성으로 지원될 확률이 높다.

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

버전 명세

지원 웹브라우저