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() 메소드에 의해서 생성된다.
      • Inherited

      • 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

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

                  휠 이벤트 생성자
                • deltaX

                  가로로 스크롤되는 크기를 조회한다.
                • deltaY

                  세로로 스크롤되는 크기를 조회한다.
          • 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)란 이벤트 발생시 처리를 담당하는 자를 의미한다.
        • DOMEvents

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

            문서의 로드가 중단될 경우에 발생한다.
          • onanimationend

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

            설정 값이 변경되면 발생한다.
          • onload

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

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

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

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

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

          마우스 이벤트 분류
          • onclick

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

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

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

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

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

            마우스가 포인터가 움직일 때 실행할 함수를 등록한다.
          • onmousemove

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

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

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

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

            마우스 휠 장치를 사용할 때 실행할 함수를 등록한다.
      • WindowEventHandlers

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

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

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

        생성자 함수를 이용하여 EventTarget 객체 인스턴스를 생성한다.
        • EventTarget()

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

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

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

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

            • onchange

              미디어 쿼리 지원 상태가 변경될 때 호출된다.
          • Methods

            • addListener()

              미디어 쿼리 상태 변경에 대한 응답으로 사용자 정의 콜백 함수를 리스너에 추가한다. EventTarget 객체의 addEventListener() 별칭으로 사용하며 MediaQueryList는 최신 웹브라우저의 EventTarget에서만 상속하므로 이전 웹브라우저는 addEventListener() 대신에 addListener()을 사용해야 한다.
            • removeListener()

              등록된 리스너를 제거한다.
          • Properties

            프로퍼티
            • matches

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

              직렬화된 미디어 쿼리를 조회한다.
        • 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

            별도의 생성자 함수가 없으며 노드 인스턴스를 생성할 때는 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

                창이 열릴 때 해석되어지는 문서를 다루는 객체이다.
                • Constructor

                  창이 열릴 때 마다 웹 문서에 대한 진입점 역할을 하는 인스턴스가 자동으로 만들어지며 window 전역 객체의 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 요소를 다루는 객체
                      • HTMLBaseElement

                        문서의 기본 URI가 포함되어 있다.
                      • HTMLBodyElement

                        body 요소를 다루는 객체
                      • HTMLBRElement

                        br 요소를 다루는 객체
                      • HTMLButtonElement

                        button 요소를 다루는 객체
                        • Constructor

                          HTMLButtonElement는 웹브라우저에 의해 초기 렌더링시 생성되거나 document.createElement() 메소드를 이용하여 생성할 수 있다.
                        • Properties

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

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

                        canvas 요소를 다루는 객체
                      • HTMLDivElement

                        div 요소를 다루는 객체
                      • HTMLDListElement

                        dl 요소를 다루는 객체
                      • HTMLHeadingElement

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

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

                          HTMLImageElement는 웹브라우저에 의해 초기 렌더링시 생성되거나 document.createElement() 메소드를 이용하여 생성할 수 있고 Image() 라는 생성자 함수를 통해서 생성이 가능한다.
                          • Image()

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

                          상속 가능한 프로퍼티
                      • HTMLLinkElement

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

                          HTMLLinkElement는 웹브라우저에 의해 초기 렌더링시 생성되거나 document.createElement() 메소드를 이용하여 생성할 수 있다.
                        • Properties

                          프로퍼티스
                          • sheet

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

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

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

                          상속 가능한 프로퍼티
                      • HTMLSlotElement

                        slot 엘리먼트 객체
                      • HTMLStyleElement

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

                          HTMLStyleElement는 웹브라우저에 의해 초기 렌더링시 생성되거나 document.createElement() 메소드를 이용하여 생성할 수 있다.
                        • Properties

                          프로퍼티스
                          • sheet

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

                        template 엘린먼트 객체
                    • Methods

                      메소드
                      • click()

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

                        요소를 활성시킨다.
                    • Properties

                      프로퍼티
                      • style

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

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

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

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

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

                  메소드
                  • after()

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

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

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

                    요소에 shadow DOM 트리를 연결하고 ShadowRoot에 대한 참조를 반환한다.
                  • before()

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

                    인수로 지정된 선택자 문자열과 일치하는 노드를 찾을 때까지 요소의 상위(문서의 루트까지)를 탐색한다. 자신 또는 일치하는 조상 요소를 반환한다. 찾는게 없다면 null을 반환한다.
                  • computedStyleMap()

                    CSSStyleDeclaration의 대안인 CSS 선언 블록의 읽기 전용 표현을 제공하는 StylePropertyMapReadOnly 인터페이스를 반환한다.
                  • getAnimations()

                    요소에 영향을 주거나 향후에 예정되어 있는 모든 Animation 객체의 배열을 반환한다. 선택적으로 하위 요소에 대한 애니메이션 객체를 반환할 수 있다.
                  • getAttribute()

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

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

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

                    인수로 지정된 네임스페이스와 같은 이름을 가진 Attr 노드를 반환한다.
                  • getAttributeNS()

                    인수로 지정된 네임스페이스 및 이름을 가진 속성의 문자열 값을 반환한다. 속성이 존재하지 않으면 null 또는 빈 문자열 값을 반환한다.
                  • getBoundingClientRect()

                    뷰포트를 기준으로 요소의 크기와 위치를 반환한다.
                  • getClientRects()

                    CSS 테두리 상자에 대한 경계 사각형을 나타내는 DOMRect 객체의 컬렉션을 반환한다.
                  • getElementsByClassName()

                    인수로 지정된 class 이름을 가진 모든 하위 요소를 포함하는 라이브 상태의 HTMLCollection을 반환한다.
                  • getElementsByTagName()

                    인수로 지정된 태그 이름을 가진 자신을 제외한 모든 하위 요소를 포함하는 라이브 상태의 HTMLCollection을 반환한다.
                  • getElementsByTagNameNS()

                    인수로 지정된 네임스페이스에 속하는 태그 이름을 가진 요소의 Live 상태의 HTMLCollection을 반환한다.
                  • hasAttribute()

                    인수로 지정된 속성이 존재하는지를 Boolean 값으로 반환한다.
                  • hasAttributeNS()

                    요소에 지정된 속성이 있는지를 Boolean 값으로 반환한다.
                  • hasAttributes()

                    요소에 속성이 있는지 여부를 Boolean 값으로 반환한다.
                  • hasPointerCapture()

                    호출된 요소에 지정된 포인터 ID로 식별된 포인터에 대한 캡처(Capture)가 있는지 여부를 Boolean 값으로 반환한다.
                  • insertAdjacentElement()

                    요소에 지정된 위치에 지정된 요소 노드를 삽입한다.
                  • insertAdjacentHTML()

                    인수로 지정된 문자열을 HTML 또는 XML로 구문을 분석하고 그 결과의 노드를 지정된 위치의 DOM 트리에 삽입한다.
                  • insertAdjacentText()

                    요소에게 지정된 위치에 지정된 텍스트 노드를 삽입한다.
                  • matches()

                    인수로 지정된 선택자 문자열에 의해 요소가 선택되는지 확인한다. 즉 요소가 선택자인지를 확인한다.
                  • prepend()

                    요소 앞에 Node 또는 DOMString 객체 집합을 삽입한다.
                  • querySelector()

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

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

                    특정 포인터에 대해 이전에 설정된 포인터 캡처를 해제한다.
                  • remove()

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

                    인수로 지정된 속성을 제거한다.
                  • removeAttributeNode()

                    요소로부터 지정된 속성을 제거한다.
                  • removeAttributeNS()

                    지정된 속성을 요소로 부터 제거한다.
                  • replaceWith()

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

                    비동기 요청으로 요소를 전체 화면 모드로 표시한다.
                  • requestPointerLock()

                    요소에서 포인터가 잠길 것을 비동기적으로 요청할 수 있다.
                  • scroll()

                    요소 내부의 특정 좌표로 요소를 스크롤한다.
                  • scrollBy()

                    인수로 지정된 좌표를 상대적인 값으로 사용하여 스크롤한다.
                  • scrollIntoView()

                    요소가 사용자에게 표시되도록 요소의 상위 컨테이너를 스크롤한다.
                  • scrollTo()

                    인수로 지정된 좌표로 스크롤한다.
                  • setAttribute()

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

                    지정된 속성을 요소에게 설정한다. 속성이 이미 존재하면 업데이트 된다.
                  • setAttributeNode()

                    요소에게 새로운 Attr 노드를 추가한다.
                  • setAttributeNodeNS()

                    새로운 네임스페이스 속성 노드를 추가한다.
                  • setAttributeNS()

                    새 속성을 추가하거나 지정된 네임스페이스 및 이름으로 속성 값을 변경한다.
                  • setPointerCapture()

                    특정 포인터를 향후 포인터 이벤트의 캡처 대상으로 지정하는데 사용한다.
                  • toggleAttribute()

                    요소의 Boolean 속성을 토글한다.
                • 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

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

                    요소의 자식 요소를 포함하여 요소를 나타내는 직렬화된 HTML 일부를 조회하거나 설정한다.
                  • part

                    요소의 부분 식별자를 나타내며 DOMTokenList로 조회된다. 가상 요소를 통해 shadow DOM의 일부를 스타일링하는데 사용할 수 있다.
                  • prefix

                    요소의 네임스페이스 접두어를 조회하거나 지정되지 않은 경우 null을 갖는다.
                  • previousElementSibling

                    이전 형제 요소를 참조
                  • scrollHeight

                    overflow로 인해 화면에 표시되지 않는 내용을 포함하여 요소의 콘텐츠의 높이를 조회할 수 있다.
                  • scrollLeft

                    요소의 내용이 왼쪽 가장 자리에서 스크롤되는 픽셀 수를 조회하거나 설정한다.
                  • scrollTop

                    요소의 콘텐츠가 세로로 스크롤되는 픽셀 수를 조회하거나 설정한다.
                  • scrollWidth

                    overflow로 인해 화면에 표시되지 않는 내용을 포함하여 요소의 콘텐츠의 폭을 조회할 수 있다.
                  • shadowRoot

                    요소가 호스트하는 shadow root 조회한다. Element.prototype.attachShadow() 메소드를 사용하여 기존 요소에 shadow root를 추가할 수 있다.
                  • slot

                    요소가 삽입된 shadow DOM 슬롯의 이름을 조회한다.
                  • tagName

                    요소의 태그 명을 조회한다.
            • Methods

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

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

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

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

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

                컨텍스트 오브젝트를 루트를 반환한다.
              • 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

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

            문서가 실행되는 창을 다루는 객체이며 자바스크립트가 실행되는 웹브라우저에서의 최상위 스코프(scope)이다. 창이 열릴 때 마다 인스턴스화된 전역객체를 가지고 있는 window를 자동으로 생성하며 개발자가 명시적으로 생성할 수 없다.
            • Constructors

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

              창이 생성되어지면 전역 변수 window가 생성이 된다. 이 window는 형식적으로 Window 생성자에 의해서 생성이 되어지는 것 처럼 보이지만 실제로는 전역 객체로서 독립적인 역할을 하게 된다. window 전역 객체는 실행 컨텍스트에서의 최상위 스코프(scope)이다. 실행시 다루어지는 모든 데이터들은 window 객체의 멤버가 된다. 따라서 Window 객체의 Prototype을 갖는 이외에 다양한 메소드와 프로퍼티들이 만들어진다.
              • Event Handler

                • onload

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

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

                window 전역 객체가 만들어지면 작동에 필요한 모든 함수, 객체, 변수들이 포함되어진다. 따라서 이러한 데이터들중에서 함수는 window 전역 객체의 메소드로의 형식을 가지게 된다. window는 코드상에서 생략이 될 수 있다는 것을 염두해 두길 바란다. 그래서 의미는 없지만 전역 함수인지 window 객체의 메소드인지를 구분하기가 어렵기도 하다.
                • alert()

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

                  윈도우를 닫는다.
                • getComputedStyle()

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

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

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

                window 전역 객체가 만들어지면 작동에 필요한 모든 함수, 객체, 변수들이 포함되어진다. 따라서 이러한 데이터들은 window 전역 객체의 프로퍼티로의 형식을 가지게 된다. window는 코드상에서 생략이 될 수 있다는 것을 염두해 두길 바란다. 그래서 의미는 없지만 전역 변수인지 window 객체의 프로퍼티인지를 구분하기가 어렵기도 하다.
                • 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를 확인할 수 있다.
                • location

                  새로운 창이 열리면 자동으로 생성이 되며 window 전역 객체의 프로퍼티로 참조된다.
                  • Methods

                    메소드
                  • Properties

                    • hash

                      '#' 문자 뒤 URL의 프래그먼트 식별자를 조회할 수 있다.
                    • host

                      URL에서 호스트 부분을 값으로 하는 DOMString이며 호스트명', :', 포트 번호를 포함하여 조회할 수 있다.
                    • href

                      완전한 URL을 값으로 하는 DOMString을 조회한다. 설정을 하는 경우에는 연결된 문서가 설정된 URL로 이동이 된다.
                    • origin

                      지정한 장소에 유래된 표준 형태의 값을 조회할 수 있다.
                    • password

                      도메인 이름 이전에 명시된 비밀번호를 조회할 수 있다.
                    • pathname

                      '/' 문자 뒤 URL의 경로를 조회할 수 있다.
                    • port

                      URL의 포트 번호를 조회할 수 있다.
                    • protocol

                      URL에서 프로토콜 부분을 값으로 하는 DOMString이며 ':'도 포함하여 조회할 수 있다.
                    • username

                      도메인 이름 이전에 명시된 사용자 명을 조회한다.
                • scrollY

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

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

                  • clearInterval()

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

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

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

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

          • Methods

            프로타입 메소드
            • addEventListener()

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

              사용자가 생성한 이벤트를 전달한다. 코드에 의한 이벤트 트리거(Trigger)에 사용된다.
            • 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 객체를 삽입한다.
              • prepend()

                요소 앞에 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