HTMLElement

HTMLElement 인터페이스는 모든 HTML 엘리먼트를 나타냅니다. 일부 엘리먼트는 이 인터페이스를 직접 구현하며, 다른 일부는 이를 상속한 인터페이스를 통해 구현합니다.

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/ko/docs/Web/API/EventTarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25  121,20  121,30  111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ko/docs/Web/API/Node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="188.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Node</text></a><polyline points="226,25  236,20  236,30  226,25" stroke="#D4DDE4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ko/docs/Web/API/Element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="303.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Element</text></a><polyline points="341,25  351,20  351,30  341,25" stroke="#D4DDE4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ko/docs/Web/API/HTMLElement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="436" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLElement</text></a></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

속성

그 부모인 Element 로부터 속성을 상속받으며 GlobalEventHandlers 와 TouchEventHandlers 에서 구현합니다.

HTMLElement.accessKey

엘리먼트에 할당된 접근 키를 나타내는 DOMString 입니다.

HTMLElement.accessKeyLabel Read only

엘리먼트의 할당된 접근 키를 포함하는 DOMString 을 반환합니다.

HTMLElement.contentEditable

엘리먼트가 수정가능하면 "true", 그렇지 않으면 "false" 값을 갖는 DOMString 입니다.

HTMLElement.isContentEditable Read only

엘리먼트의 컨텐츠가 수정가능한지 여부를 나타내는 Boolean 을 반환합니다.

HTMLElement.contextMenu

엘리먼트에 관계된 컨텍스트 메뉴를 나타내는 HTMLMenuElement 입니다. null 일 수 있습니다.

HTMLElement.dataset Read only

엘리먼트의 커스텀 데이터 속성 (data-*) 을 읽고 쓸 수 있는 스크립트를 포함하는 DOMStringMap 을 반환합니다.

HTMLElement.dir

엘리먼트의 방향성을 표현하는 전역 속성 dir 을 나타내는 DOMString 을 반환합니다. 가능한 값은 "ltr", "rtl", "auto" 입니다.

HTMLElement.draggable

엘리먼트가 드래그 가능한지 여부를 나타내는 Boolean 을 반환합니다.

HTMLElement.dropzone Read only

dropzone 전역 속성을 나타내고 drop 작업에 대한 동작을 설명하는 DOMSettableTokenList 를 반환합니다.

HTMLElement.hidden

엘리먼트가 숨김상태인지 여부를 나타내는 Boolean 을 반환합니다.

HTMLElement.inert

유저 에이전트가 사용자 인터렉션 이벤트, 페이지 내 텍스트 검색("페이지에서 찾기"), 텍스트 선택의 목적으로 주어진 노드가 없는 것처럼 동작해야하는지 여부를 나타내는 Boolean 을 반환합니다.

HTMLElement.innerText

노드와 그 자손의 "렌더링된" 텍스트 컨텐츠를 나타냅니다. getter 로써, 이는 사용자가 커서로 엘리먼트의 컨텐츠를 하이라이팅한 후 클립보드로 복사하면 얻을 수 있는 텍스트와 유사합니다.

HTMLElement.itemScope

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

HTMLElement.itemType Read only

DOMSettableTokenList… 를 반환합니다.

HTMLElement.itemId

항목 ID 를 나타내는 DOMString 입니다.

HTMLElement.itemRef Read only

DOMSettableTokenList… 를 반환합니다.

HTMLElement.itemProp Read only

DOMSettableTokenList… 를 반환합니다.

HTMLElement.itemValue

항목 값을 나타내는 Object 를 반환합니다.

HTMLElement.lang

엘리먼트의 속성, 텍스트, 컨텐츠의 언어를 나타내는 DOMString 입니다.

HTMLElement.noModule

임포트한 스크립트가 모듈 스크립트를 지원하는 유저 에이전트에서 실행될 수 있는지를 나타내는 Boolean 입니다.

HTMLElement.nonce

주어진 페치(fetch)의 진행을 허용할지를 결정하기 위한 컨텐츠 보안 정책(Content Security Policy)에서 한 번 사용된 암호회된 숫자를 반환합니다.

HTMLElement.offsetHeight Read only

레이아웃에 상대적인 엘리먼트의 높이를 갖는 double 을 반환합니다.

HTMLElement.offsetLeftRead only

엘리먼트의 left border 부터 offsetParent 의 left border 까지의 거리를 double 로 반환합니다.

HTMLElement.offsetParentRead only

모든 오프셋 계산이 현재 연산된 엘리먼트인 Element 를 반환합니다.

HTMLElement.offsetTopRead only

엘리먼트의 top border 부터 offsetParent 의 top border 까지의 거리를 double 로 반환합니다.

HTMLElement.offsetWidthRead only

레이아웃에 상대적인 엘리먼트의 너비를 갖는 double 을 반환합니다.

HTMLElement.properties Read only

HTMLPropertiesCollection… 을 반환합니다.

HTMLElement.spellcheck

철자 검사를 제어하는 Boolean 입니다. 모든 HTML 엘리먼트에 존재하지만, 모두에 대해 적용되지는 않습니다.

HTMLElement.style

엘리먼트의 스타일 속성의 정의를 나타내는 CSSStyleDeclaration 객체입니다.

HTMLElement.tabIndex

탭 순서에서 엘리먼트의 위치를 나타내는 long 입니다.

HTMLElement.title

엘리먼트에 마우스를 오버할 때 팝업 상자에 표시되는 텍스트를 갖는 DOMString 입니다.

HTMLElement.translate

번역을 나타내는 Boolean 입니다.

이벤트 핸들러

onXYZ 형태의 대부분의 이벤트 핸들러 속성은 GlobalEventHandlers 또는 TouchEventHandlers 에 정의되어 있으며 HTMLElement 에 의해 구현되었습니다. 다음 HTMLElement 에 해당하는 핸들러입니다.

HTMLElement.oncopy

copy 이벤트를 위한 이벤트 핸들링 코드를 반환합니다(bug 280959).

HTMLElement.oncut

cut 이벤트를 위한 이벤트 핸들링 코드를 반환합니다(bug 280959).

HTMLElement.onpaste

paste 이벤트를 위한 이벤트 핸들링 코드를 반환합니다(bug 280959).

TouchEventHandlers.ontouchstart

touchstart 이벤트를 위한 이벤트 핸들링 코드를 반환합니다.

TouchEventHandlers.ontouchend

touchend 이벤트를 위한 이벤트 핸들링 코드를 반환합니다.

TouchEventHandlers.ontouchmove

touchmove 이벤트를 위한 이벤트 핸들링 코드를 반환합니다.

TouchEventHandlers.ontouchenter

touchenter 이벤트를 위한 이벤트 핸들링 코드를 반환합니다.

TouchEventHandlers.ontouchleave

touchleave 이벤트를 위한 이벤트 핸들링 코드를 반환합니다.

TouchEventHandlers.ontouchcancel

touchcancel 이벤트를 위한 이벤트 핸들링 코드를 반환합니다.

메소드

부모인 Element 로부터 메소드를 상속합니다.

HTMLElement.blur()

현재 포커스된 엘리먼트로부터 키보드 포커스를 제거합니다.

HTMLElement.click()

엘리먼트로 마우스 클릭 이벤트를 전달합니다.

HTMLElement.focus()

엘리먼트에 현재 키보드 포커스를 생성합니다.

HTMLElement.forceSpellCheck()

엘리먼트에 철자 확인자를 생성합니다.

명세

브라우저 호환성

함께 보기

• Element