Document Object Model

Document Object Model

Document Object ModelDOM Level 1, DOM Level 2, DOM Level 3, DOM Level 4

웹 문서 구조를 다루기 위한 문서 객체 모델

계층 트리

  • Data structure

    자료구조 인터페이스
    • DOMTokenList

      공백으로 구분된 문자열로 표현된 데이터를 정렬하여 토큰 집합으로 만들어 집합을 조작하기 위한 메소드를 제공하는 유사배열 인터페이스이다.
      • Constructor

        생성자
        • DOMTokenList()

          DOMTokenList 인스턴스를 생성할 수 있지만 직접 생성할 수 없다.
      • Methods

        메소드
        • add()

          토큰 목록에 항목을 추가한다.
        • remove()

          인수로 지정된 항목을 토큰에서 제거한다.
        • toggle()

          인수로 지정된 항목이 기존 토큰 목록에 존재하면 제거, 존재하지 않으면 추가한다.
    • HTMLCollection

      요소를 리스트 자료 구조로 가지고 있는 유사 배열 객체
      • Constructor

        직접 생성할 수 없고 document 객체의 getElementsByTagName(), getElementsByClassName(), getElementsByName(), querySelectorAll() 메소드에 의해서 생성된다.
      • Methods

        상속 가능한 메소드
        • item()

          인수로 주어진 인덱스에 위치한 요소를 반환한다.
      • Properties

        상속 가능한 프로퍼티
        • length

          item(항목)의 갯수를 가져올 수 있다.
    • NamedNodeMap

      요소의 속성을 리스트 자료구조로 다루는 객체
      • Constructor

        직접 생성할 수 없고 Element 객체의 attributes 속성에 의해서 값이 만들어진다.
      • Methods

        상속 가능한 메소드
        • getNamedItem()

          지정된 이름의 속성을 반환한다.
        • getNamedItemNS()

          네임스페이스 및 관련 속성 명에 의해서 식별되는 속성을 반환한다.
        • item()

          인수로 지정된 인덱스의 속성을 반환한다.
        • removeNamedItem()

          지정된 맵에 의해 식별되는 속성을 제거한다.
        • removeNamedItemNS()

          지정된 네임스페이스 및 관련 속성 명에 의해 식별되는 속성을 제거한다.
        • setNamedItem()

          맵으로 식별되는 속성을 지정된 이름으로 재정의하거나 추가한다.
        • setNamedItemNS()

          지정된 네임스페이스 및 관련 속성 명으로 맵에서 식별되는 속성을 대체하거나 추가한다.
      • Properties

        상속 가능한 프로퍼티
        • length

          맵 내의 오브젝트 갯수를 읽어온다.
    • NodeList

      노드를 리스트로 가지고 있는 자료를 다루는 객체
      • Constructor

        직접 생성할 수 없고 element.childNodes와 document.querySelectorAll()와 같은 메소드에 의해 값이 생성된다.
      • Methods

        상속 가능한 메소드
        • entries()

          NodeList에 포함된 모든 key/value 쌍을 통과하는 iterator를 반환한다. 반환되는 값을 Node 객체이다.
        • forEach()

          리스트 내에 존재하는 모든 항목에 대해 인수로 지정된 콜백 함수를 차례대로 실행한다.
        • item()

          인덱스로 NodeList 내에 존재하는 항목을 반환한다.
        • keys()

          key를 반환한다.
        • values()

          노드를 반환한다.
      • Properties

        상속 가능한 프로퍼티
        • length

          NodeList에 존재하는 항목의 갯수를 읽는다.
  • Event

    DOM에서 발생하는 모든 이벤트를 다루는 객체이다.
    • Constructor

      이벤트 생성자 함수로써 새로운 사용자 정의 이벤트 인스턴스를 생성한다.
    • Inherited

      Event 객체를 상속하는 객체 군
      • AnimationEvent

        애니메이션과 관련된 정보를 제공하는 이벤트
      • CustomEvent

        사용자 정의 이벤트를 다루는 객체
      • DeviceMotionEvent

        장치의 위치와 방향에 대한 변경 속도에 대한 정보를 제공하는 이벤트를 다룬다.
      • DeviceOrientationEvent

        웹 페이지를 실행하는 장치의 물리적 방향의 정보를 제공하는 이벤트를 다룬다.
      • ErrorEvent

        스크립트 또는 파일의 오류와 관련된 정보를 제공하는 이벤트를 다루는 객체이다.
      • UIEvent

        사용자 인터페이스에 관련된 이벤트를 다루는 객체이다.
        • Constructor

          마우스 이벤트 생성자
        • Events

          UI 이벤트의 종류
          • load

            리소스와 그것에 의존하는 리소스들의 로딩이 완료되면 발생한다.
          • resize

            웹브라우저 뷰포트의 크기가 변경될 때 발생한다.
          • scroll

            document view나 요소가 스크롤 될 때 이벤트가 발생한다.
        • Inherited

          UIEvent 객체가 상속하는 객체군
          • CompositionEvent

            사용자가 텍스트를 간접적으로 입력하기 때문에 발생하는 이벤트를 다루는 객체이다.
          • FocusEvent

            focus, blur, focusin, focusout 관련 이벤트를 다루는 객체이다.
            • Events

              FocusEvent 오브젝트의 이벤트군
              • blur

                요소가 비활성 될 때 이벤트 발생한다.
          • InputEvent

            입력과 관련된 이벤트 다루는 객체이다.
          • KeyboardEvent

            키보드 동작에 관여하는이벤트 객체이다.
          • MouseEvent

            마우스 이벤트를 다루는 객체이다.
            • Constructor

              마우스 이벤트 생성자
            • Events

              마우스 이벤트 종류
              • click

                마우스 왼쪽 버튼을 눌렀다 뗐을 경우 발생한다.
            • Inherited

              MouseEvent를 상속하는 이벤트
              • DragEvent

                드래그 앤 드롭에 대한 상호작용을 다루는 객체이다.
              • WheelEvent

                마우스의 휠 또는 이와 유사한 입력 장치를 이용하는 경우의 이벤트를 다루는 객체이다.
          • Properties

            상속 가능한 프로퍼티
      • Methods

        이벤트 발생시 상속 가능한 메소드.
        • preventDefault()

          Element 객체가 기본적으로 가지고 있는 이벤트 동작을 차단한다.
      • Properties

        상속 가능한 프로퍼티
        • bubble

          이벤트가 DOM을 통해 버블링되는지 여부를 가지고 있다.
        • cancelable

          이벤트를 취소할 수 있는지 여부를 확인할 수 있다.
        • cancelBubble

          이벤트 핸들러에서 리턴하기 전에 값을 true로 설정하면 이벤트 전파를 방지한다.
        • composed

          shadow DOM 경계를 넘어 표준 DOM으로 전파되는지 여부를 나타낸다.
        • currentTarget

          이벤트가 등록된 직접적인 Element 객체를 참조한다.
        • defaultPrevented

          preventDefault() 메소드가 이벤트에서 호출되었는지 여부를 확인할 수 있다.
        • eventPhase

          현재 처리중인 이벤트 흐름의 위상을 나타낸다.
        • isTrusted

          사용자 작업에 의해 이벤트가 생성될 때와 스크립트가 이벤트를 생성하거나 수정하는 경우에 대한 값을 가지고 있다. 사용자 작업에 의해서 생성된 이벤트일 경우에는 true, 스크립트에 의해 생성된 이벤트일 경우에는 false를 갖는다.
        • target

          실제로 이벤트가 발생한 Element 객체를 참조한다. 이벤트 버블링, 캡처 단계에서도 참조가 가능하다.
    • EventHandlers

      이벤트 핸들러
      • GlobalEventHandlers

        HTMLElement, Document, Window에서 사용 가능한 이벤트 핸들러이디. 핸들러(Handler)란 이벤트 발생시 처리를 담당하는 자를 의미한다.
        • KeyboardEvents

          키보드 입력 장치의 이벤트에 대한 이벤트 핸들러
          • onkeydown

            키를 눌렀을 때 발생하는 이벤트에 대한 실행 함수를 대입한다.
        • MouseEvents

          마우스 이벤트 분류
          • onclick

            마우스 좌측 버튼 클릭시 발생하는 이벤트에 대한 실행 함수를 대입한다.
          • ondblclick

            마우스 왼쪽 버튼을 더블 클릭할 때 발생하는 이벤트에 대한 실행 함수를 대입한다.
          • onmousedown

            마우스 왼쪽 버튼이 눌러지는 시점에 사용하는 이벤트에 대한 실행 함수를 대입한다.
          • onmouseenter

            마우스 포인터가 대상 요소에 진입했을 때 발생하는 이벤트에 대한 실행 함수를 대입한다.
          • onmouseleave

            마우스 포인터가 대상 요소에 진입했다가 빠져나갈 때 발생하는 이벤트에 대한 실행 함수를 대입한다.
          • onmousemove

            마우스 포인터가 버튼을 누르지 않은 상태에서 움직일 때 발생하는 이벤트에 대한 실행 함수를 대입한다.
          • onmouseout

            마우스 포인터가 대상 요소에 진입 했다가 빠져 나갈 때 발생하는 이벤트에 대한 실행 함수를 대입한다.
          • onmouseover

            마우스 포인터가 대상 요소에 진입했을 때 발생하는 이벤트에 대한 실행 함수를 대입한다.
          • onmouseup

            마우스 왼쪽 버튼을 눌렀다가 떼는 시점에 사용하는 이벤트에 대한 실행 함수를 대입한다.
        • UIEvents

          Widnow, Document, Element의 상태와 동작에 대한 이벤트 핸들러
          • onload

            웹 문서가 로드가 되면서 이벤트가 발생이 되면 실행할 함수를 등록한다.
          • onresize

            창 크기가 변경될 때 발생하는 이벤트이다.
          • onscroll

            대상이 스크롤이 발생할 때 실행할 함수를 등록한다.
      • WindowEventHandlers

        WindowEventHandlers mix-in은 Window 또는 HTMLBodyElement 및 HTMLFrameSetElement와 같은 많은 인터페이스에 공통적 인 이벤트 핸들러를 설명한다. 이러한 각 인터페이스는 추가 특정 이벤트 핸들러를 구현할 수 있다.
        • onunload

          웹 페이지의 열린 창이 닫히거나 새로고침, Refresh 시 이벤트가 발생한다.
    • EventTarget

      Event를 받고 Event Listener을 가질 수 있는 객체로 구현된 인터페이스이며 Object 객체를 상속한 DOM에서 가장 상위 객체라고 할 수 있다.
      • Constructor

        EventTarget 객체 인스턴스를 생성한다.
      • Inherited

        EventTarget 객체를 상속하는 객체군
        • MediaQueryList

          미디어쿼리에 의해 테스트된 데이터를 가지고 있는 객체
          • Constructor

            생성자
            • MediaQueryList()

              생성자 함수이지만 직접 생성을 할 수 없고 Window 객체의 matches() 메소드에 의해 반환된다.
          • Properties

            프로퍼티
            • matches

              문서가 현재 미디어쿼리와 일치하면 true, 그렇지 않으면 false를 가지고 있다.
        • Node

          Node 객체는 여러 DOM 타입들을 상속하는 인터페이스이다.
          • Constants

            상수
            • ATTRIBUTE_NODE

              속성을 의미하며 값은 2를 가지고 있다. DOM Level 4에서는 더 이상 사용되지 않는다.
            • CDATA_SECTION_NODE

              <!CDATA[[..]]>와 같은 CDATASection의 의미하며 값은 4를 가지고 있다.
            • COMMENT_NODE

              주석을 의미하며 값은 8을 가지고 있다.
            • DOCUMENT_FRAGMENT_NODE

              DocumentFragment 노드를 의미하며 값은 11을 가지고 있다.
            • DOCUMENT_NODE

              Document 노드를 의미하며 값은 9를 가지고 있다.
            • DOCUMENT_TYPE_NODE

              <!DOCTYPE html>를 의미하며 값은 10을 가지고 있다.
            • ELEMENT_NODE

              태그명을 갖는 노드이며 값은 1을 가지고 있다.
            • PROCESSING_INSTRUCTION_NODE

              <?xml-stylesheet ..?>와 같은 XML 문서의 ProcessingInstruction을 의미하며 값은 7을 가지고 있다.
            • TEXT_NODE

              요소 또는 속성 내에 존재하는 텍스트를 의미하며 값은 3을 가지고 있다.
          • Constructor

            생성자
            • Node()

              노드를 생성하는 생성자 함수이지만 실제로는 직접 생성할 수 없고 Document 객체의 createElement(), createAttribute() 메소드 등을 이용하여 생성할 수 있다.
          • Inherited

            Node 객체가 상속하는 객체 군
            • CharacterData

              문자가 포함된 노드 객체를 다루는 추상적인 객체이다.
              • Inherited

                CharacterData를 상속하는 인터페이스
                • Text

                  텍스트를 생성하고 다루는 인터페이스
                  • Constructor

                    생성자
                    • Text()

                      텍스트를 생성하는 생성자 함수이지만 실제로 직접 생성할 수 없다.
                • Methods

                  상속 가능한 메소드
                  • appendData()

                    인수로 주어진 DOMString을 data에 포함시킨다.
                  • deleteData()

                    인수로 지정된 오프셋에서 시작하는 지정된 양의 문자열을 제거한다.
                  • insertData()

                    인수로 지정된 오프셋에 지정된 문자열을 data에 삽입한다.
                  • replaceData()

                    지정된 오프셋에서 시작하여 지정된 양의 문자를 지정된 DOMString으로 대체한다.
                  • substringData()

                    인수로 지정된 길이의 data에 포함하는 DOMString을 반환한다.
                • Properties

                  상속 가능한 프로퍼티
                  • data

                    DOMString 텍스트 데이터를 가지고 있다.
                  • length

                    data 프로퍼티에 포함된 문자열의 크기를 가지고 있다.
                  • NonDocumentTypeChildNode

                    비문서 타입의 노드의 프로퍼티
              • Document

                Document 객체
                • Constructor

                  Document 생성자는 웹브라우저에 로드되어 페이지의 콘텐츠에 대한 진입점 역할을 하는 새로운 Document 객체를 생성한다.
                • Inherited

                  Document를 상속받는 객체
                • EventHandlers

                  이벤트 핸들러
                  • onclick

                    마우스 좌측 버튼 클릭시 발생하는 이벤트에 대한 실행 함수를 대입한다.
                • Methods

                  상속 가능한 메소드
                  • createElement()

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

                    document와 shadow roots 객체간 공유되는 메소드
                    • getSelection()

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

                    확장 메소드
                    • write()

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

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

                    class 속성 값을 대상으로 엘리먼트 객체를 찾아 HTMLCollection으로 반환한다.
                • 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 객체를 참조한다.
              • DocumentFragment

                최소한의 Document 객체
              • Element

                Element 객체
                • Constructor

                  새로운 Element 객체를 생성해주는 DOM 관련 메소드
                  • Element()

                    생성자 함수이지만 실제로는 직접 생성할 수 없고 Document 객체의 createElement() 메소드의해서 생성된다.
                • Inherited

                  Element 객체가 상속하는 객체 군
                  • HTMLElement

                    기본적으로 생성되는 document 의 생성자를 역할을 하는 인터페이스이다.
                    • Constructor

                      생성자
                      • HTMLElement()

                        생성자 함수이지만 직접 생성할 수 없다.
                    • Inherited

                      HTMLElement 객체가 상속하는 객체군
                      • HTMLAnchorElement

                        하이퍼링크 요소를 다루며 이러한 기능을 위한 특별한 속성과 메소드를 제공하는 객체이다.
                      • HTMLAreaElement

                        area 요소를 다루는 객체이다.
                      • HTMLAudioElement

                        audio 요소를 다루는 객체
                      • HTMLBodyElement

                        body 요소를 다루는 객체
                      • HTMLBRElement

                        br 요소를 다루는 객체
                      • HTMLButtonElement

                        button 요소를 다루는 객체
                        • Constructor

                          생성자
                        • Properties

                          Button 객체에 대한 프로퍼티
                          • labels

                            button 요소와 연결된 label 요소의 NodeList를 조회할 수 있다.
                      • HTMLCanvasElement

                        canvas 요소를 다루는 객체
                      • HTMLDivElement

                        div 요소를 다루는 객체
                      • HTMLDListElement

                        dl 요소를 다루는 객체
                      • HTMLHeadingElement

                        헤딩 요소를 다루는 객체
                      • HTMLImageElement

                        img 요소에 대한 동적 처리를 위한 생성자 및 상속한 가능한 멤버들을 제공하는 객체이다.
                        • Constructor

                          생성자
                          • HTMLImageElement()

                            생성자 함수이지만 직접 생성할 수 없다.
                          • Image()

                            이미지를 생성하는 생성자 함수이다.
                        • Properties

                          상속 가능한 프로퍼티
                      • HTMLLinkElement

                        외부 리소스에 대한 참조 정보와 해당 리소스와 문서간의 관계를 나타낸다. <a>가 아닌 <link> 요소에 해당하므로 주의한다.
                        • Constructor

                          생성자는 지원하지 않으며 document 객체의 createElement() 메소드에 의해서 생성이 가능하다.
                        • Properties

                          프로퍼티스
                          • sheet

                            주어진 요소과 관련된 CSSStyleSheet 객체를 참조하거나 없는 경우 null을 갖는다.
                      • HTMLMediaElement

                        미디어 요소를 다루는 객체
                        • Properties

                          상속 가능한 프로퍼티
                      • __proto__

                        HTMLMediaElement 객체를 상속하는 객체를 참조
                    • HTMLShadowElement

                      Shadow DOM에서 사용되는 shadow 엘리먼트
                    • HTMLSlotElement

                      slot 엘리먼트 객체
                    • HTMLStyleElement

                      요소를 나타내는 객체이다. <style> 요소를 나타낸다.
                      • Constructor

                        생성자는 지원하지 않으며 document 객체의 createElement() 메소드에 의해서 생성이 가능하다.
                      • Properties

                        프로퍼티스
                        • sheet

                          주어진 요소과 관련된 CSSStyleSheet 객체를 참조하거나 없는 경우 null을 갖는다.
                    • HTMLTemplateElement

                      template 엘린먼트 객체
                  • Methods

                    메소드
                    • click()

                      요소에 대한 마우스 클릭을 동작한다.
                    • focus()

                      요소를 활성시킨다.
                  • Properties

                    프로퍼티
                    • style

                      CSSStyleDeclaration 객체를 참조하며 인라인 스타일을 가지고 있거나 설정할 수 있다.
                • SVGElement

                  모든 SVG DOM 인터페이스의 상위 객체이다.
              • EventHandler

                요소와 관련된 이벤트 핸들러이며 별도의 인터페이스는 존재하지 않는다.
                • onfullscreenchange

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

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

                메소드
                • after()

                  Node 또는 DOMString 객체의 집합을 부모의 자식 목록에서 뒤쪽 형제 노드로 추가한다. DOMString 객체는 Text 노드와 동일하게 삽입된다.
                • animate()

                  요소에게 인수에 정의된 값에 따라 애니메이션 효과를 만들어준다.
                • getAttribute()

                  요소의 속성 값을 반환한다.
                • getAttributeNames()

                  요소의 모든 속성 이름을 문자열 배열로 반환한다. 속성이 없는 경우에는 빈 배열을 반환한다.
                • getAttributeNode()

                  요소의 지정된 속성을 Attr노드로 반환한다.
                • querySelector()

                  부모 노드를 기준으로 하위 요소 중 인수로 지정된 선택자를 갖는 첫 번째 요소를 반환한다.
                • querySelectorAll()

                  부모 노드를 기준으로 하위 요소 중 인수로 지정된 선택자를 갖는 모든 NodeList를 반환한다.
                • setAttribute()

                  요소의 속성(attribute)를 설정한다.
              • Properties

                상속 가능한 프로퍼티
                • accessKey

                  사용자가 눌어 주어진 요소로 이동할 수 있는 키 입력 세트이다.
                • attributes

                  요소의 속성 객체 NameNodeMap 타입의 Collection을 조회한다. 이 속성은 읽기 전용이다.
                • childElementCount

                  자식 요소의 조회하는 읽기 전용 속성이다.
                • children

                  모든 자식 요소를 HTMLCollection으로 라이브로 조회할 수 있다.
                • classList

                  요소의 class 값을 유사 배열인 DOMTokenList로 참조한다.
                • className

                  해당 요소의 class 속성 값을 가지고 있거나 설정할 수 있다.
                • clientHeight

                  요소의 내부 높이를 픽셀로 조회할 수 있는 읽기 전용 속성이다.
                • clientLeft

                  요소의 왼쪽 테두리의 너비(픽셀)를 조회할 수 있다. 텍스트 방향이 오른쪽이고 스크롤바가 있는 경우 스크롤바의 너비를 포함한다. 왼쪽 간격과 내부 여백을 포함하지 않는다.
                • clientTop

                  요소의 상단 테두리의 너비를 픽셀 단위로 조회할 수 있는 읽기 전용 속성이다.
                • clientWidth

                  inline 요소이거나 inline-block 이어도 콘텐츠가 없는 경우는 0을 가지며 그렇지 않은 경우에는 내부 너비를 픽셀 단위로 조회할 수 있다. padding은 포함하지만 borders, margins, 세로 스크롤바는 제외한다.
                • firstElementChild

                  요소의 첫번째 자식 요소를 참조한다. 자식 요소가 없는 경우 null을 갖는다.
                • id

                  id 전역 속성을 반영하여 요소의 식별자를 나타낸다.
                • innerHTML

                  요소에 포함된 HTML 또는 XML 태그를 조회하거나 설정한다.
                • lastElementChild

                  요소의 마지막 자식 요소를 참조하는 읽기 전용 속성이다. 자식 요소가 없는 경우 null을 갖는다.
                • localName

                  요소의 규정된 이름의 로컬 부분을 조회한다.
                • name

                  요소의 name 속성을 조회하거나 설정할 수 있다.
                • namespaceURI

                  요소의 네임스페이스 URI를 조회한다. 네임스페이스가 없는 경우에는 null을 갖는다.
                • nextElementSibling

                  다음 형제 요소를 참조한다.
                • previousElementSibling

                  이전 형제 요소를 참조
          • Methods

            상속 가능한 메소드 군
            • appendChild()

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

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

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

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

              컨텍스트 오브젝트를 루트를 반환한다.
            • hasChildNodes()

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

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

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

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

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

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

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

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

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

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

            상속 가능한 프로퍼티 군
            • childNodes

              자식 노드를 유사 배열인 NodeList 자료 구조로 참조한다.
            • children

              자식 요소를 라이브 상태에서 유사 배열인 HTMLCollection 타입으로 반환한다.
            • firstChild

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

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

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

              다음 형제 요소를 참조한다.
            • nodeName

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

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

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

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

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

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

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

              요소가 가지고 있는 콘텐츠를 텍스트로 조회하거나 설정한다.
        • Window

          문서가 실행되는 창을 다루는 객체
          • Constructors

            Window 객체는 생성자 함수를 가지고 있지만 직접 생성하는 방식을 지원하지 않는다. 기본적으로 웹브라우저가 실행시 생성이 되며 window.open() 메소드에 의해 생성이 되기도 한다. 또는 링크에 의해서 새로운 탭이 생성될 경우에도 생성이 된다. 생성된 모든 윈도우는 window라는 문서내 최상위(전역 스코프) 실행 context를 가지게 되며 Prototype을 상속한다.
            • Window()

              Window 객체의 생성자 함수 역할을 하지만 실제로 직접 생성하는 방식을 제공하지 않는다.
          • Methods

            상속 가능한 메소드
            • alert()

              확인 버튼과 선택에 따라 지정된 메시지를 가진 웹브라우저의 경고 대화 상자를 연다.
            • getComputedStyle()

              인수로로 지정된 대상의 활성된 스타일시트를 계산한 후 모든 CSS 속성 값을 포함하는 읽기 전용 CSSStyleDeclaration 객체를 반환한다.
            • matchMedia()

              인수로 주어진 미디어쿼리 문자열의 분석 결과를 나타내는 MediaQueryList 객체를 반환한다.
            • open()

              새로운 윈도우를 생성한다.
          • Properties

            상속 가능한 프로퍼티
            • history

              새 창이 열리면서 History 인터페이스의 인스턴스가 생성이 되며 이때 상속되는 프로퍼티와 메소드를 가지고 있는 객체 원형이다. History의 인스턴스는 직접 접근이 안되고 window 객체의 history 프로퍼티로 참조된다.
              • Methods

                상속가능한 메소드
                • back()

                  웹브라우저 세션 기록의 바로 이전 페이지로 이동하도록 한다. history.go(-1)과 같다. 이전 페이지가 없는 경우 아무 동작도 발생하지 않는다.
                • forward()

                  세션 기록의 바로 앞 페이지로 이동하는 비동기식 메소드이다.
                • go()

                  웹브라우저가 가지고 있는 세션 탐색 이력을 기준으로 현재 페이지를 전환한다.
                • pushState()

                  웹브라우저의 세션 기록 스택에 상태를 추가한다.
                • replaceState()

                  세션 기록 스택의 제일 최근 항목을 주어진 데이터, 지정한 제목 및 URL로 대체한다. 데이터는 DOM이 불투명(opaque)하게 취급하므로 직렬화가 가능한 모든 JavaScript 객체를 사용할 수 있다.
              • Properties

                상속 가능한 프로퍼티
                • length

                  현재 페이지를 포함해 세션 기록의 길이를 정수로 조회한다.
                • scrollRestoration

                  기록 탐색시 스크롤 위치 복원 여부를 명시한다. 가능한 값은 auto와 manual이다.
                • state

                  기록 스택 최상단의 state를 나타내는 값을 조회한다. popstate 이벤트를 기다지리 않고 현재 기록의 state를 확인할 수 있다.
            • scrollY

              스크롤시 수직 방향 위치값을 픽셀 단위로 조회한다.
          • WindowOrWorkerGlobalScope

            몇 가지 기능의 일반적인 설명 Window및 WorkerGlobalScope인터페이스를 제공한다.
            • Methods

              • clearInterval()

                setInterval() 메소드로 등록되어 주기적으로 호출되는 동작을 취소할 수 있다.
              • clearTimeout()

                setTimeout() 메소드로 등록된 함수 실행 예약을 취소할 수 있다.
              • setInterval()

                설정된 시간 단위로 주기적으로 함수를 실행한다.
              • setTimeout()

                함수 실행을 지정된 시간에 예약하여 한번 실행한다. 예약이 완료되면 타이머 ID를 반환한다.
            • Properties

      • Methods

        상속 가능한 메소드 분류
        • addEventListener()

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

          사용자 생성한 이벤트 타입을 적용하고자 할 때 사용한다.
        • removeEventListener()

          등록된 이벤트를 제거한다. 이벤트 타입, 등록된 함수를 조회하여 일치된 경우에 이벤트를 제거한다.
    • Single Interface

      단일 인터페이스
      • ChildNode

        부모를 가질 수 있는 Node 객체에 고유한 메소드를 포함한다. 원시 인터페이스이며 이 타입의 객체를 생성할 수 없다. 이는 Element, DocumentType 및 CharacterData 객체로 구현되었다.
        • Methods

          • after()

            Node 또는 DOMString 객체의 집합을 부모의 자식 목록에서 뒤쪽 형제 노드로 추가한다. DOMString 객체는 Text 노드와 동일하게 삽입된다.
          • before()

            Node 또는 DOMString 객체의 집합을 부모의 자식 목록에서 앞쪽 형제 노드로 추가한다. DOMString 객체는 Text 노드와 동일하게 삽입된다.
          • remove()

            부모의 자식 요소로부터 제거한다.
          • replaceWith()

            인수로 지정된 Node 또는 DOMString 객체의 집합으로 대체한다. DOMString 객체는 Text 노드와 동일하게 삽입된다.
      • DocumentOrShadowRoot

        document와 shadow roots간 공유되는 객체
        • Methods

          메소드
        • Properties

          프로퍼티
          • stylesheets

            현재 문서에 명시적으로 연결되어 있거나 포함된 스타일시트에 대한 CSSStyleSheet 객체의 StyleSheetList를 조회한다.
      • DOMImplementation

        특정 문서에 종속되지 않는 메소드를 제공하는 인터페이스이며 document.implementation 에 의해서 참조된다.
      • LinkStyle

        노드와 연관된 CSS 스타일시트에 대한 접근을 제공한다. 원시 인터페이스이며 객체를 생성할 수 없다. HTMLLinkElement 및 HTMLStyleElement 객체로 구현된다.
        • Properties

          • sheet

            주어진 요소과 관련된 CSSStyleSheet 객체를 참조하거나 없는 경우 null을 갖는다.
      • NonDocumentTypeChildNode

        DocumentType에는 적합하지 않은 노드 객체를 위한 인터페이스이며 호환성을 위해서 DocumentType으로부터 삭제되었다. 유형의 객체를 만들수 없는 원시 인터페이스이며 Element나 CharacterData 객체에 의해서 구현된다.
      • ParentNode

        자식을 가질 수 있는 모든 종류의 Node 객체가 공통으로 가지는 메서드와 프로퍼티를 갖는다. Element, Document, DocumentFragment 객체가 구현한다.
        • Methods

          • append()

            요소의 마지막 하위 노드 다음에 Node 객체 또는 DOMString 객체를 삽입한다.
          • querySelector()

            부모 노드를 기준으로 하위 요소 중 인수로 지정된 선택자를 갖는 첫 번째 요소를 반환한다.
          • querySelectorAll()

            부모 노드를 기준으로 하위 요소 중 인수로 지정된 선택자를 갖는 모든 NodeList를 반환한다.
        • Properties

          • childElementCount

            자식 요소의 조회하는 읽기 전용 속성이다.
          • children

            모든 자식 요소를 HTMLCollection으로 라이브로 조회할 수 있다.
          • firstElementChild

            요소의 첫번째 자식 요소를 참조한다. 자식 요소가 없는 경우 null을 갖는다.
          • lastElementChild

            요소의 마지막 자식 요소를 참조하는 읽기 전용 속성이다. 자식 요소가 없는 경우 null을 갖는다.
      • WindowOrWorkerGlobalScope

        몇 가지 기능의 일반적인 설명 Window및 WorkerGlobalScope인터페이스를 제공한다.
        • Methods

          • clearInterval()

            setInterval() 메소드로 등록되어 주기적으로 호출되는 동작을 취소할 수 있다.
          • clearTimeout()

            setTimeout() 메소드로 등록된 함수 실행 예약을 취소할 수 있다.
          • setInterval()

            설정된 시간 단위로 주기적으로 함수를 실행한다.
          • setTimeout()

            함수 실행을 지정된 시간에 예약하여 한번 실행한다. 예약이 완료되면 타이머 ID를 반환한다.
        • Properties