DOM

settings_applicationsEventTarget  >   settings_applicationsNode  >   settings_applicationsElement  >   settings_applicationsHTMLElement

DOM

Editing
  • account_tree
  • bug_report

InterfaceHTMLTableCaptionElement

테이블의 <caption> 요소를 다루는 인터페이스이다.

하위 트리 탐색

  • Constructor

    생성자 함수를 가지고 있지 않아 직접 생성이 불가하며 보통은 웹 문서가 해석 되어지면서 웹브라우저에 의해 생성이 되거나 Document 객체의 createElement() 메소드에 의해서 생성이 된다. 추가적인 내용은 기본 설명을 참고한다.

  • [[Prototype]]

    이 객체 또는 인터페이스는 상속가능한 속성과 메소드를 가지고 있지 않으며 상속된 속성과 메소드를 사용한다.

상속 계층 탐색

HTMLElement

  • Properties

    • accessKey

      특정 요소로 이동할 수 있도록 사용자에게 제공하는 키 입력 세트이다.

    • accessKeyLabel

      요소에 할당된 접근 키를 포함하는 문자열을 조회한다.

    • autofocus

      요소의 autofocus 여부를 나타낸다.

    • contentEditable

      요소의 콘텐츠에 대한 수정 가능 여부를 지정한다.

    • dataset

      data-* 로 시작하는 사용자 정의 애트리뷰트의 값을 설정하거나 조회한다.

    • dir

      요소의 콘텐츠의 방향을 조회하거나 설정한다.

    • draggable

      요소가 드래그 가능한지의 여부를 조회하거나 설정한다.

    • enterKeyHint

      가상 키보드의 Enter 키에 대해 표시할 레이블 또는 아이콘을 정의하는 열거형 프로퍼티이다.

    • hidden

      요소가 숨김 상태인지를 불리언(boolean)으로 조회하거나 설정한다.

    • inert

      요소에 대한 사용자 입력 이벤트를 무시하고 페이지 검색 및 텍스트 선택을 무시할 수도 있는지 여부를 불리언(boolean)으로 조회하거나 설정한다.

    • innerText

      요소 및 하위 요소의 텍스트 콘텐츠를 조회하거나 설정한다.

    • inputmode

      값을 입력할 때 사용할 가상 키보드 구성 유형에 대한 힌트를 웹브라우저에게 제공한다.

    • isContentEditable

      수정 가능한 콘텐츠인지 여부를 불리언(boolean) 값으로 조회한다 수정이 가능하면 true, 그렇지 않다면 false를 갖는다.

    • lang

      요소의 애트리뷰트 값 및 텍스트 콘텐츠의 기본 언어를 조회하거나 설정한다.

    • nonce

      콘테츠 보안 정책에서 사용하는 한 번 사용한 암호화 번호를 반환하여 주어진 패치가 진행될 수 있는지 여부를 결정한다.

    • offsetHeight

      여백과 테두리의 두께가 포함된 요소의 레이아웃 세로 크기를 정수로 조회하는 읽기 전용 프로퍼티이다.

    • offsetLeft

      상대적으로 위치한 가장 가까운 상위 요소(offsetParent)로부터 지정 요소의 좌측 상단 모서리까지 상대적 좌측 거리를 픽셀 값으로 가지고 있는 읽기 전용 속성이다.

    • offsetParent

      가장 가까운 상대적 기준 상위 요소를 참조한다.

    • offsetTop

      위치에 대한 상대적 기준을 갖는 가장 가까운 상위 요소로부터 지정 요소의 상대적 상단 거리(픽셀)를 가지고 있는 읽기 전용 속성이다.

    • offsetWidth

      요소의 레이아웃 가로 크기를 정수로 조회하는 읽기 전용 속성이다.

    • outerText

      기본적으로 요소의 텍스트 콘텐츠를 조회하거나 설정하는 innerText와 동일하나 요소 자체까지 대체될 수 있다는 면에서 차이가 있다.

    • popover

      요소의 popover 상태를 가져오거나 설정한다.

    • spellcheck

      맞춤법 검사 힌트를 제어하는 불리언(Boolean)을 나타낸다

    • style

      CSSStyleDeclaration 객체를 참조하며 요소에게 적용된 인라인 스타일을 조회하거나 설정할 수 있다.

    • tabindex

      현재 요소의 탭(tab)키에 의한 이동 순서를 나타낸다.

      요소의 HTML tabindex 속성의 나타낸다.

    • title

      요소의 제목을 조회하거나 설정한다.

    • translate

      현재 페이지가 현지화될 때 요소의 애트리뷰트 값과 포함하는 텍스트의 번역 여부를 나타내거나 설정한다.

    • virtualKeyboardPolicy

      요소가 콘텐츠 편집이 허용된 경우 모바일 기기 또는 물리적인 키보드를 사용할 수 없는 기타 장치에서 화면 가상 키보드의 동작을 나타내는 문자열을 조회하거나 설정한다.

  • Methods

    • attachInternals()

      사용자 정의 요소를 HTML 양식에 사용될 수 있도록 지원하는 ElementInternals 객체를 반환한다.

    • blur()

      요소의 키보드 포커스를 제거한다.

    • click()

      요소에 대한 마우스 클릭(click) 이벤트를 트리거(trigger)한다.

    • focus()

      포커스가 가능한 요소를 활성시킨다. 포커스가 가능한 요소는 기본적으로 키보드 및 키보드와 유사한 이벤트를 받는 요소이다.

    • hidePopover()

      팝오버가 설정되어 있다면 팝오버 요소를 숨긴다.

    • showPopover()

      팝오버가 설정되어 있다면 팝오버 요소를 화면에 표시한다.

    • togglePopover()

      팝오버 요소를 표시하거나 숨기는 처리를 동시에 지원한다.

Element

  • Properties

    • attributes

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

    • childElementCount

      자식 요소의 개수를 조회하는 읽기 전용 속성이다.

    • children

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

    • classList

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

    • className

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

    • clientHeight

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

    • clientLeft

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

    • clientTop

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

    • clientWidth

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

    • firstElementChild

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

    • id

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

    • innerHTML

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

    • lastElementChild

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

    • localName

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

    • 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

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

  • Methods

    • after()

      Node 또는 DOMString 집합을 마지막 자식 노드로 추가한다. DOMString  집합은 Text 노드와 동일하게 삽입된다.

    • animate()

      인수에 정의된 값에 따라 요소에게 애니메이션을 구현하며 애니메이션을 제어할 수 있는 Animation 객체를 반환한다.

    • append()

      요소의 마지막 자식 노드 다음에 Node 객체 또는 문자열 집합을 삽입한다. 문자열은 Text 노드로 삽입된다.

    • attachShadow()

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

    • before()

      Node 또는 DOMString 집합을 앞 쪽 형제 노드로 추가한다.  DOMString은 Text 노드와 동일하게 삽입된다.

    • closest()

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

    • computedStyleMap()

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

    • getAnimations()

      요소에 영향을 주거나 향후에 예정되어 있는 모든 Animation 객체의 배열을 반환한다.

    • getAttribute()

      요소의 지정된 애트리뷰트 값을 반환한다.

    • getAttributeNames()

      요소의 모든 애트리뷰트의 이름을 문자열 배열로 반환한다.

    • getAttributeNode()

      요소의 지정된 애트리뷰트를 Attr 노드 객체로 반환한다.

    • getAttributeNodeNS()

      지정된 네임스페이스와 이름을 가진 애트리뷰트에 대한 Attr 노드를 반환한다.

    • getAttributeNS()

      인수로 지정된 네임스페이스와 이름을 가진 애트리뷰트의 문자열 값을 반환한다.

    • getBoundingClientRect()

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

    • getClientRects()

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

    • getElementsByClassName()

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

    • getElementsByTagName()

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

    • getElementsByTagNameNS()

      지정된 네임스페이스에 속하는 지정된 태그 이름을 가진 모든 요소를 NodeList 타입으로 반환한다.

    • hasAttribute()

      인수로 지정된 애트리뷰트의 존재 여부를 boolean 반환한다.

    • hasAttributeNS()

      네임스페이스를 갖는 요소에 지정된 애트리뷰트가 있는지를 boolean 값으로 반환한다.

    • hasAttributes()

      요소에 애트리뷰트가 있는지 여부를 boolean 값으로 반환한다.

    • hasPointerCapture()

      호출된 요소에 지정된 포인터 ID로 식별된 포인터에 대한 포인터 캡처(capture)가 있는지 여부를 불리언(boolean)으로 반환한다.

    • insertAdjacentElement()

      요소의 지정된 위치에 지정된 요소를 삽입한다.

    • insertAdjacentHTML()

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

    • insertAdjacentText()

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

    • matches()

      지정된 CSS 선택자에 의해 요소가 선택되는지 확인한다.

    • prepend()

      요소의 첫 번째 자식 노드 앞에 Node 객체 또는 문자열 집합을 삽입한다. 문자열은 Text 노드로 삽입된다.

    • querySelector()

      지정된 CSS 선택자를 갖는 하위 요소를 찾아 첫 번째로 일치하는 요소을 반환한다.

    • querySelectorAll()

      지정된 CSS 선택자를 갖는 하위 요소를 찾아 일치하는 모든 하위 요소를 NodeList로 반환한다.

    • releasePointerCapture()

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

    • remove()

      노드(자신)를 DOM에서 제거한다.

    • removeAttribute()

      인수로 지정된 애트리뷰트를 제거한다.

    • removeAttributeNode()

      요소에서 지정된 속성을 제거한다.

    • removeAttributeNS()

      지정된 애트리뷰트를 요소에서 제거한다.

    • replaceChildren()

      기존의 자식 항목을 지정된 자식 항목(노드 또는 문자열) 세트로 대체한다.

    • replaceWith()

      현재 요소를 지정된 요소로 대체한다.

    • requestFullscreen()

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

    • requestPointerLock()

      지정된 요소에 대한 포인터 잠금을 비동기적으로 요청할 수 있다.

    • scroll()

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

    • scrollBy()

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

    • scrollIntoView()

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

    • scrollTo()

      지정된 x, y 절대 좌표로 스크롤한다.

    • setAttribute()

      요소의 애트리뷰트(attribute)를 설정한다.

    • setAttributeNode()

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

    • setAttributeNodeNS()

      네임스페이스 기반의 새로운 애트리뷰트 노드를 추가한다.

    • setAttributeNS()

      새 속성을 추가하거나 지정된 네임스페이스 및 이름으로 애트리뷰트의 값을 변경한다.

    • setHTML()

      주어진 HTML 문자열을 구문 분석하여 유효하지 않은 HTML 문자열을 모두 제거하고 대상 요소의 하위 트리로 삽입한다.

    • setPointerCapture()

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

    • toggleAttribute()

      요소의 불리언(boolean) 속성을 토글한다.

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

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

지원 웹브라우저