DOM

settings_applicationsEventTarget  >   settings_applicationsNode

DOM

Writing
  • account_tree
  • bug_report

InterfaceElement

문서 내의 거의 모든 객체가 상속받는 가장 범용적인 인터페이스이며 많은 프로퍼티와 메소드를 가지고 있다.

설명

Element 인터페이스는  생성자를 가지고 있지 않은 상속을 위한 인터페이스로 존재한다.

하위 트리 탐색

  • [[Prototype]]

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

      • onfullscreenchange

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

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

      • after()

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

        요소에게 인수에 정의된 값에 따라 애니메이션을 구현하며 애니메이션을 제어할 수 있는 Animation 객체를 반환한다.
      • 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()

        인수로 지정된 네임스페이스 및 이름을 가진 속성의 문자열 값을 반환한다.
      • getBoundingClientRect()

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

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

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

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

        인수로 지정된 네임스페이스에 속하는 태그 이름을 가진 요소들을 NodeList 타입으로 반환한다.
      • hasAttribute()

        인수로 지정된 속성의 존재 여부를 boolean 반환한다.
      • hasAttributeNS()

        네임스페이스를 갖는 요소에 지정된 속성이 있는지를 boolean 값으로 반환한다.
      • hasAttributes()

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

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

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

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

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

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

        요소의 첫 번째 자식 노드 직전에 Node 객체 또는 DOMString 객체를 삽입한다.
      • querySelector()

        인수로 지정된 CSS선택자 패턴을 갖는 요소를 찾아 첫번째로 일치하는 요소을 반환한다.
      • querySelectorAll()

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

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

        노드(자신)를 제거한다.
      • removeAttribute()

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

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

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

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

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

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

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

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

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

        인수로 지정된 x, y 절대 좌표로 스크롤한다.
      • setAttribute()

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

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

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

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

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

        요소의 Boolean 속성을 토글한다.
    • Properties

      • attributes

        요소의 속성 객체(Attr)를 가진 NamedNodeMap 타입의 Collection을 조회한다.
      • childElementCount

        자식 요소의 개수를 unsigned long 타입으로 조회하는 읽기 전용 속성이다.
      • children

        자식 요소들을 HTMLCollection 객체로 참조한다.
      • classList

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

        요소의 class 속성 값을 조회하거나 설정할 수 있다.
      • clientHeight

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

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

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

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

        첫번째 자식 요소를 참조하며 존재하지 않는 경우 null을 가진다.
      • id

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

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

        마지막 자식 요소를 참조하며 존재하지 않는 경우에는 null을 갖는다.
      • localName

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

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

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

        다음 형제 요소를 참조하며 존재하지 않는 경우에는 null을 갖는다.
      • outerHTML

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

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

        요소의 네임스페이스 접두어를 조회하거나 지정되지 않은 경우 null을 갖는다. XML MIME 유형에서만 동작하며 HTML 문서에서는 작동하지 않는다.
      • previousElementSibling

        이전 형제 요소를 참조하며 존재하지 않는 경우에는 null을 갖는다.
      • scrollHeight

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

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

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

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

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

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

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

상속 계층 탐색

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

지원 웹브라우저