DOM

settings_applicationsEventTarget  >   settings_applicationsNode

DOM

Editing
  • account_tree
  • bug_report

InterfaceDocument

창이 열릴 때 해석되어지는 문서를 다루는 객체이다. 웹 페이지 콘텐츠의 진입점 역할을 수행한다.

 

설명

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

하위 트리 탐색

  • Constructor

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

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

    • DOMContentLoaded

      HTML 문서가 완전히 로드되고 구문 분석이 될 때 발생한다.
  • [[Prototype]]

    생성자(constructor)를 가진 객체(object) 또는 인터페이스(interface)가 인스턴스(instance)를 생성할 때 상속할 수 있는 프로퍼티(property)와 메소드(method)를 가지고 있는 원형 객체를 참조하는 생성자의 은닉된 속성이다. 만약에 상속받은 객체(object) 또는 인터페이스(interface)가 존재한다면 상속한 객체(object) 또는 인터페이스(interface)의 [[Prototype]] 프로퍼티(property)와 메소드(method)를 추가적으로 사용할 수 있다.
    • Event Handlers

      • onanimationcancel

        CSS 애니메이션이 예기치 않게 중단이 되면 발생한다.
      • onanimationend

        CSS 애니메이션이 완료되면 발생한다.
      • onanimationiteration

        CSS 애니메이션의 반복이 끝나고 다른 것이 시작되면 발생한다.
      • onanimationstart

        CSS 애니메이션이 시작되면 발생한다.
      • oncopy

        선택 영역이 클립보드로 복사되었을 때 발생한다.
      • oncut

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

        사용자가 요소 또는 텍스트 선택을 드래그 할 때 100 밀리초(millisecond)마다 발생한다.
      • ondragend

        드래그가 종료될 때 발생한다.
      • ondragenter

        드래그한 요소 또는 텍스트 선택 항목이 유효한 드롭(drop) 대상에 들어가면 발생한다.
      • ondragleave

        드래그한 요소 또는 텍스트 선택이 유효한 드롭 대상을 벗어나면 발생한다.
      • ondragover

        요소 또는 텍스트 선택 항목이 유효한 드롭 대상 위로 드래그될 때 발생한다.
      • ondragstart

        사용자가 요소 또는 텍스트 선택을 위한 드래그를 시작하면 발생한다.
      • ondrop

        요소 또는 텍스트 선택이 유효한 드롭 대상에 놓일 때 발생한다.
      • onfullscreenchange

        요소가 전체 화면 모드로 전환되거나 해제될 때 시작되는 이벤트
      • onfullscreenerror

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

        요소가 setPointerCapture() 메소드를 사용하여 포인터를 캡처하면 발생한다.
      • onkeydown

        키보드의 키를 누를 때 발생한다.
      • onkeypress

        Shift, Fn, CapsLock 키를 제외한 키가 눌린 상태일 때 연속적으로 발생한다.
      • onkeyup

        키보드의 키를 누르고 있다고 뗐을 때 발생한다.
      • onlostpointercapture

        캡처된 포인터가 해제될 때 발생한다.
      • onpaste

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

        웹브라우저가 더이상 포인터 이벤트가 없을 가능성이 있다고 판단하거나 pointerdown 이벤트가 발생한 후 포인터를 사용하여 이동, 확대, 축소 또는 스크롤을 통해 뷰포트를 조작하는데 사용할 수 있다.
      • onpointerdown

        포인터가 활성화되면 발생한다. 마우스의 경우 장치가 눌린 버튼이 없는 상태에서 하나 이상의 버튼이 눌려진 상태로 전환되면 발생한다. 터치의 경우 디지타이저와 물리적 접촉이 이루어지면 발생한다. 펜의 경우 스타일러스가 디지타이저와 물리적으로 접촉하면 발생한다.
      • onpointerenter

        포인팅 장치가 hover를 지원하지 않는 장치의 pointerdown 이벤트의 결과를 포함하여 요소 또는 그 자손 중 하나의 적중 테스트 경계로 이동할 때 발생한다.
      • onpointerleave

        포인팅 장치가 요소의 적중 테스트 경계를 벗어나면 발생한다. 펜 장치의 경우 스타일러스가 디지타이저에서 감지할 수 있는 hover 범위를 벗어날 때 발생한다.
      • onpointerlockchange

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

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

        포인터가 좌표를 변경하고 웹브라우저 터치 동작으로 취소되지 않은 경우 발생한다.
      • onpointerout

        포인팅 장치가 요소의 적중 테스트 경계 밖으로 이동할 때 발생한다.
      • onpointerover

        포인팅 장치가 요소의 적중 테스트 경계로 이동하면 발생한다.
      • onpointerup

        포인터가 더 이상 활성화되지 않으면 발생한다.
      • onreadystatechange

        document의 readyState 속성이 변경되면 발생한다.
      • onscroll

        창의 콘텐츠가 스크롤될 때 발생한다.
      • onselectionchange

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

        사용자가 새 선택을 시작하면 발생한다.
      • ontouchcancel

        하나 이상의 터치 포인트가 구현 별 방식으로 중단된 경우 발생한다.
      • ontouchend

        터치를 끝낼 때 발생한다.
      • ontouchmove

        하나 이상의 터치 포인트가 터치 표면을 따라 이동할 때 발생한다.
      • ontouchstart

        하나 이상의 터치 포인트가 터치 표면에 닿을 때 발생한다.
      • ontransitioncancel

        CSS 전이 효과가 취소되었을 때 발생한다.
      • ontransitionend

        CSS의 전이 효과가 완료되었을 때 발생한다.
      • ontransitionrun

        CSS 전이 효과 실행을 시작했을 때 발생한다. 지연 시간이 설정된 경우 포함해서 시작된 경우에 발생한다.
      • ontransitionstart

        CSS 전이 효과가 실제로 시작되었을 때 발생한다.(지연이 있는 경우 지연시간 이후 실행될 때)
      • onvisibilitychange

      • onwheel

        포인팅 입력 장치에서 휠 버튼을 회전할 때 발생한다.
    • Methods

      • createAttribute()

        새로운 Attr 객체를 생성한다.
      • createElement()

        매개 변수로 지정된 태그 명으로 새로운 Element 객체를 생성한다.
      • ExtensionsForHTMLDocument

        • write()

          현재 문서에 텍스트를 추가한다.
      • getElementById()

        id 속성 값을 이용해서 엘리먼트 객체를 찾아 반환한다.
      • getElementsByClassName()

        class 속성 값을 대상으로 엘리먼트 객체를 찾아 HTMLCollection으로 반환한다.
      • getElementsByName()

        문서내 태그의 name 속성 값을 사용하여 요소를 찾아 HTMLCollection으로 반환한다.
      • getSelection()

        사용자가 선택한 텍스트의 범위를 가진 Selection 객체를 반환한다.
    • Properties

      • all

        문서내 모든 요소들을 HTMLCollection으로 참조할 수 있다.
      • body

        현재 문서의 body 노드 객체를 참조한다.
      • characterSet

        현재 문서의 인코딩 방식을 가지고 있다.
      • childElementCount

        하위 요소의 개수를 가지고 있다.
      • compatMode

        문서가 Quirks 모드 또는 표준 모드에서 렌더링되는지의 여부를 나타낸다.
      • contentType

        문서의 MIME 유형을 확인할 수 있다.
      • cookie

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

        현재 처리중이며 자바스크립트 모듈이 아닌 <script> 요소를 가지고 있다.
      • defaultView

        문서에 연결된 window 객체를 참조한다.
      • designMode

        전체 문서를 편집할 수 있는지 여부를 제어한다.
      • dir

        문서의 텍스트 방향성을 나타내는 DOMString을 가지고 있다.
      • doctype

        현재 문서와 연관된 DTD(Document Type Precent)를 가지고 있다.
      • documentElement

        문서의 루트 요소를 참조한다.
      • documentURI

        문서의 위치를 문자열로 조회할 수 있다.
      • domain

        현재 문서의 도메인을 조회한다.
      • embeds

        현재 문서에 포함된 <object>요소 목록을 HTMLCollection으로 참조한다.
      • fonts

        현재 문서의 FontFaceSet 인터페이스를 참조한다.
      • forms

        문서내의 <form> 요소를 HTMLCollection으로 참조한다.
      • head

        문서내의 <head> 요소를 참조한다.
      • images

        문서내의 <img> 요소를 HTMLCollection으로 반환한다.
      • implementation

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

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

상속 계층 탐색

Node

  • Methods

    • appendChild()

      매개 변수로 주어진 노드 객체를 자식 요소로 추가한다.
    • cloneNode()

      노드를 새로운 노드로 복사한다.
    • compareDocumentPosition()

      노드의 위치를 문서 내 다른 노드와 비교하여 기본적으로 정의된 값을 반환한다.
    • contains()

      인수로 주어진 노드를 포함하고 있는지를 확인하여 그 결과를 반환한다.
    • getRootNode()

      컨텍스트(context) 오브젝트의 루트를 반환하며 사용 가능한 경우 shadow root를 선택적으로 반환한다.
    • hasChildNodes()

      인수로 지정된 노드가 자식으로의 존재 여부를 반환한다.
    • insertBefore()

      새로운 자식 노드를 참조 노드 앞에 추가한다. 새로운 자식 노드가 기존 노드인 경우에는 위치가 이동된다.
    • isDefaultNamespace()

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

      인수로 지정된 노드와 동일한지를 테스트하고 그 결과를 반환한다.
    • isSameNode()

      인수로 지정된 노드와 같은지에 대한 여부, 즉 동일한 객체를 참조하는지를 테스트하여 그 결과를 반환한다.
    • lookupNamespaceURI()

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

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

      인수로 지정된 노드와 모든 하위 트리를 정규화된 형식으로 변환한다.
    • removeChild()

      자식 노드를 제거하고 제거된 노드를 반환한다.
    • replaceChild()

      주어진 상위 노드 내의 하위 노드를 대체한다.
  • Properties

    • baseURI

      기본 URL을 조회한다.
    • childNodes

      유사 배열인 자식 노드 집합체 NodeList를 라이브(Live)로 참조한다.
    • firstChild

      첫번째 자식 노드를 참조한다.
    • isConnected

      노드가 컨텍스트 객체에 직접 또는 간접적으로 연결되어 있는지 대한 Boolean 값을 가지고 있다. 예를 들어 일반 DOM의 경우는 Document 객체, Node의 경우는 ShadowRoot 객체에 연결 여부를 Boolean 으로 조회한다.
    • lastChild

      마지막 자식 노드를 참조한다.
    • nextSibling

      다음 형제 노드를 참조한다. 더 이상의 노드가 조회되지 않는 경우에는 null을 갖는다.
    • nodeName

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

      노드 타입을 조회할 수 있다.
    • nodeValue

      노드의 값을 조회할 수 있다.
    • ownerDocument

      노드의 최상위 문서 객체를 참조한다.
    • parentElement

      해당 노드의 부모 요소(Element Object)를 가지고 있다. 부모 요소가 없거나 부모가 DOM 요소가 아닌 경우에는 null을 갖는다.
    • parentNode

      부모 노드를 참조한다.
    • previousSibling

      이전 형제 노드객체를 참조한다.
    • textContent

      노드가 가지고 있는 콘텐츠를 텍스트로 조회하거나 설정한다.

EventTarget

  • Methods

    • addEventListener()

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

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

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

Object

  • Methods

    • hasOwnProperty()

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

      해당 객체가 다른 객체의 프로토타입 체인에 속한 객체인지를 체크한다. 이 메소드는 instanceof 연산자와 함께 특정 프로토타입으로부터 상속된 객체만 작동하게 하려는(예를 들어 특정 메소드나 속성이 객체에 있다는걸 보장하려는 때) 코드에서 특히 쓸모가 많다.
    • propertyIsEnumerable()

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

      객체를 나타내는 문자열을 사용 지역의 방식으로 출력이 된다. 이 메소드는 상속받은 모든 객체가 사용할 수 없고 아래와 같은 상속된 객체에 사용이 된다. Array.prototype.toLocaleString() Number.prototype.toLocaleString() Date.prototype.toLocaleString()
    • toString()

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

      객체의 Primitive(원시) 값을 반환한다.
  • Properties

    • constructor

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

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

지원 웹브라우저