DOM

settings_applicationsEventTarget  >   settings_applicationsNode  >   settings_applicationsElement  >   settings_applicationsHTMLElement  >   settings_applicationsHTMLHeadElement

DOM

  • bug_report

Constructor

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

설명

생성자 함수 존재 여부와 관계없이 document.createElement() 메소드에 의해서 생성할 수 있다.

기본적으로 웹 문서에 작성되어 있는 마크업 코드에 따라 웹브라우저는 HTMLElement 객체를 생성한다. 이것을 DOM에서 기본적으로 제공하는 메소드들로 찾을 수 있다.

다음 메소드들은 요소를 찾는다.

Prototype 체인

HTMLHeadElement

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

HTMLElement

  • Events

    • animationend

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

    • animationiteration

      CSS 애니메이션의 반복이 지정되어 있는 경우 매 반복이 끝날 때 발생한다.

    • animationstart

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

    • auxclick

      기본이 아닌 포인팅 장치 버튼(일반적으로 가장 왼쪽에 있는 기본 버튼 이외의 모든 마우스 버튼)을 눌렀다가 뗐을 때 발생한다.

    • blur

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

    • click

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

    • contextmenu

      사용자가 컨텍스트 메뉴를 열려고 할 때 발생한다.

    • copy

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

    • cut

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

    • dblclick

      마우스 왼쪽 버튼을 빠르게 두번 클릭할 때 발생한다.

    • drag

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

    • dragend

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

    • dragenter

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

    • dragleave

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

    • dragover

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

    • dragstart

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

    • drop

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

    • error

      요소에 사용될 리소스에 대한 로드가 실패했거나 사용할 수 없는 경우 발생한다.

    • focus

      창(window) 또는 요소(element)가 포커스(focus)를 받을 때 발생한다.

    • gotopointercapture

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

    • keydown

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

    • keypress

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

    • keyup

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

    • load

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

    • lostpointercapture

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

    • mousedown

      마우스 버튼을 누를 때 발생한다.

    • mouseenter

      입력장치의 포인터가 요소위로 이동했을 때 발생한다.

    • mouseleave

      입력 장치의 포인터가 요소에서 벗어 날때 발생한다.

    • mousemove

      마우스 움직임이 있을 때 이벤트가 발생한다.

    • mouseout

      입력 장치의 포인터가 요소를 벗어 날때 발생한다. mouseleave와 다른 점은 하위 요소 발생을 포함한다.

    • mouseover

      마우스 포인터가 대상과 겹칠 때 이벤트가 발생한다.

    • mouseup

    • paste

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

    • pointercancel

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

    • pointerdown

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

    • pointerenter

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

    • pointerleave

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

    • pointermove

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

    • pointerout

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

    • pointerover

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

    • pointerup

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

    • resize

      창 크기가 변경될 때 발생한다.

    • scroll

      프레임(window, <iframe>) 또는 크기가 고정된 요소내의 콘텐츠가 스크롤될 때 발생한다.

    • securitypolicyviolation

      정책과 버블(bubble)을 위반하는 요소에서 발생한다.

    • selectstart

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

    • transitioncancel

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

    • transitionend

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

    • transitionrun

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

    • transitionstart

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

    • wheel

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

  • Event Handlers

    • onanimationend

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

    • onanimationiteration

      CSS 애니메이션의 반복이 지정되어 있는 경우 매 반복이 끝날 때 발생한다.

    • onanimationstart

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

    • onauxclick

      기본이 아닌 포인팅 장치 버튼(일반적으로 가장 왼쪽에 있는 기본 버튼 이외의 모든 마우스 버튼)을 눌렀다가 뗐을 때 발생한다.

    • onblur

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

    • onclick

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

    • oncontextmenu

      사용자가 컨텍스트 메뉴를 열려고 할 때 발생한다.

    • oncopy

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

    • oncut

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

    • ondblclick

      마우스 왼쪽 버튼을 빠르게 두번 클릭할 때 발생한다.

    • ondrag

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

    • ondragend

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

    • ondragenter

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

    • ondragleave

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

    • ondragover

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

    • ondragstart

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

    • ondrop

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

    • onerror

      요소에 사용될 리소스에 대한 로드가 실패했거나 사용할 수 없는 경우 발생한다.

    • onfocus

      창(window) 또는 요소(element)가 포커스(focus)를 받을 때 발생한다.

    • ongotopointercapture

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

    • onkeydown

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

    • onkeypress

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

    • onkeyup

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

    • onload

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

    • onmousedown

      마우스 버튼을 누를 때 발생한다.

    • onmouseenter

      입력장치의 포인터가 요소위로 이동했을 때 발생한다.

    • onmouseleave

      입력 장치의 포인터가 요소에서 벗어 날때 발생한다.

    • onmousemove

      마우스 움직임이 있을 때 이벤트가 발생한다.

    • onmouseout

      입력 장치의 포인터가 요소를 벗어 날때 발생한다. mouseleave와 다른 점은 하위 요소 발생을 포함한다.

    • onmouseover

      마우스 포인터가 대상과 겹칠 때 이벤트가 발생한다.

    • onmouseup

    • onpaste

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

    • onpointercancel

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

    • onpointerdown

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

    • onpointerenter

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

    • onpointerleave

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

    • onpointermove

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

    • onpointerout

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

    • onpointerover

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

    • onpointerup

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

    • onresize

      창 크기가 변경될 때 발생한다.

    • onscroll

      프레임(window, <iframe>) 또는 크기가 고정된 요소내의 콘텐츠가 스크롤될 때 발생한다.

    • onsecuritypolicyviolation

      정책과 버블(bubble)을 위반하는 요소에서 발생한다.

    • onselectstart

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

    • ontransitioncancel

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

    • ontransitionend

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

    • ontransitionrun

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

    • ontransitionstart

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

    • onwheel

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

  • Methods

    • blur()

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

    • click()

      요소에 대한 마우스 클릭을 동작한다.

    • focus()

      요소를 활성시킨다.

  • Properties

    • accessKey

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

    • accessKeyLabel

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

    • contentEditable

      요소의 콘텐츠가 수정 가능한지 여부를 나타내는 Boolean 값을 조회한다.

    • contextMenu

      요소와 관련된 콘텍스트 메뉴를 조회하는 HTMLMenuElement 객체를 참조한다.

    • dataset

      data-* 으로 시작하는 사용자 정의 attribute 값을 조회할 수 있다.

    • dir

      요소의 방향성을 표현하는 전역 속성 dir 값을 갖는 DOMString 객체를 참조 한다.

    • draggable

      요소가 드래그 가능한지의 여부를 Boolen 값으로 조회한다.

    • dropzone

      dropzone 전역 속성 값을 가지며 drop 작업에 대한 동작을 설명하는 DOMSettableTokenList 객체를 참조한다.

    • hidden

      요소가 숨김 상태인지를 boolean 값으로 조회한다.

    • inert

      요소에 대한 사용자 입력 이벤트를 무시하고 페이지 검색 및 텍스트 선택을 무시할 수도 있는지 여부를 Boolen으로 갖는다.

    • innerText

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

    • isContentEditable

      수정 가능한 콘텐츠인지 여부를 Boolean 값으로 가지는 속성이다.

    • itemId

      항목 ID를 DOMString으로 참조한다.

    • itemScope

      항목 스코프를 나타내는 Boolean 이다.

    • itemType

      DOMSettableTokenList를 참조한다.

    • offsetHeight

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

    • offsetLeft

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

    • offsetParent

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

    • offsetTop

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

    • offsetWidth

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

    • style

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

Element

  • Event Handlers

    • onfullscreenchange

      지정 요소가 전체 화면 모드로 전환되거나 해제될 때 발생한다.

    • onfullscreenerror

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

  • Events

    • fullscreenchange

      지정 요소가 전체 화면 모드로 전환되거나 해제될 때 발생한다.

    • fullscreenerror

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

  • 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

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

    • 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

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

    • outerHTML

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

    • part

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

    • prefix

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

    • previousElementSibling

      이전 형제 요소를 참조한다.

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

지원 웹브라우저

©2023 devdic.com, Korea

출처를 밝힌 리소스 이외의 본 레퍼런스에 사용된 모든 생성물의 소유 및 저작권은 devdic.com에 있습니다. 특별히 재배포를 금지한 것 이외는 재배포가 가능하며 반드시 출처를 표기해 주시기 바랍니다.
현재는 베타 버전으로 미등록 및 불완전한 콘텐츠가 일부 있을 수 있습니다. 오류 및 기술 자료 제보(건의)는 언제든지 환영하며 감사드립니다.
기본적으로 W3C 기술 사양을 기준으로 작성하였으며 일반적이지 않은 기술 설명에 대한 내용의 일부는 Mozilla의 MDN web docs에서 도움 받았음을 밝힙니다. 그들을 존경합니다.

master@cydemy.com