From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/api/htmlelement/index.html | 271 ++++++++++++++++++++++++++++++++ 1 file changed, 271 insertions(+) create mode 100644 files/ko/web/api/htmlelement/index.html (limited to 'files/ko/web/api/htmlelement/index.html') diff --git a/files/ko/web/api/htmlelement/index.html b/files/ko/web/api/htmlelement/index.html new file mode 100644 index 0000000000..b73e398f7a --- /dev/null +++ b/files/ko/web/api/htmlelement/index.html @@ -0,0 +1,271 @@ +--- +title: HTMLElement +slug: Web/API/HTMLElement +tags: + - API + - HTML DOM + - Interface + - Reference +translation_of: Web/API/HTMLElement +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +

HTMLElement 인터페이스는 모든 종류의 HTML 요소를 나타냅니다. 일부 요소는 이 인터페이스를 직접 구현하지만 나머지 요소는 HTMLElement를 상속한 자식 인터페이스를 구현합니다.

+ +

{{InheritanceDiagram}}

+ +

속성

+ +

부모인 {{domxref("Element")}}의 속성을 상속합니다. {{domxref("GlobalEventHandlers")}}, {{domxref("TouchEventHandlers")}}의 속성을 구현합니다.

+ +
+
{{domxref("HTMLElement.accessKey")}}
+
요소에 할당된 접근 키를 나타내는 {{domxref("DOMString")}}입니다.
+
{{domxref("HTMLElement.accessKeyLabel")}} {{readonlyInline}}
+
요소에 할당된 접근 키를 포함하는 {{domxref("DOMString")}}을 반환합니다.
+
{{domxref("HTMLElement.contentEditable")}}
+
요소가 수정 가능하면 "true", 그렇지 않으면 "false" 값을 갖는 {{domxref("DOMString")}}입니다.
+
{{domxref("HTMLElement.isContentEditable")}} {{readonlyInline}}
+
요소의 콘텐츠가 수정 가능한지 여부를 나타내는 {{domxref("Boolean")}}을 반환합니다.
+
{{domxref("HTMLElement.contextMenu")}} {{deprecated_inline}}
+
요소와 관련된 콘텍스트 메뉴를 나타내는 {{domxref("HTMLMenuElement")}}입니다. {{jsxref("null")}}일 수 있습니다.
+
{{domxref("HTMLElement.dataset")}} {{readonlyInline}}
+
요소의 사용자 지정 데이터 속성(data-*)을 스크립트에서 읽고 쓸 수 있는 {{domxref("DOMStringMap")}}을 반환합니다.
+
{{domxref("HTMLElement.dir")}}
+
요소의 방향성을 표현하는 전역 속성 dir 을 나타내는 {{domxref("DOMString")}} 을 반환합니다. 가능한 값은 "ltr", "rtl", "auto" 입니다.
+
{{domxref("HTMLElement.draggable")}}
+
요소가 드래그 가능한지 여부를 나타내는 {{jsxref("Boolean")}} 을 반환합니다.
+
{{domxref("HTMLElement.dropzone")}} {{readonlyInline}}
+
dropzone 전역 속성을 나타내고 drop 작업에 대한 동작을 설명하는 {{domxref("DOMSettableTokenList")}} 를 반환합니다.
+
{{domxref("HTMLElement.hidden")}}
+
요소가 숨김상태인지 여부를 나타내는 {{jsxref("Boolean")}} 을 반환합니다.
+
{{domxref("HTMLElement.inert")}}
+
유저 에이전트가 사용자 인터렉션 이벤트, 페이지 내 텍스트 검색("페이지에서 찾기"), 텍스트 선택의 목적으로 주어진 노드가 없는 것처럼 동작해야하는지 여부를 나타내는 {{jsxref("Boolean")}} 을 반환합니다.
+
{{domxref("HTMLElement.innerText")}}
+
노드와 그 자손의 "렌더링된" 텍스트 컨텐츠를 나타냅니다. getter 로써, 이는 사용자가 커서로 요소의 컨텐츠를 하이라이팅한 후 클립보드로 복사하면 얻을 수 있는 텍스트와 유사합니다.
+
{{domxref("HTMLElement.itemScope")}} {{experimental_inline}}
+
항목 스코프를 나타내는 {{jsxref("Boolean")}} 입니다.
+
{{domxref("HTMLElement.itemType")}} {{readonlyInline}}{{experimental_inline}}
+
{{domxref("DOMSettableTokenList")}}… 를 반환합니다.
+
{{domxref("HTMLElement.itemId")}} {{experimental_inline}}
+
항목 ID 를 나타내는 {{domxref("DOMString")}} 입니다.
+
{{domxref("HTMLElement.itemRef")}} {{readonlyInline}}{{experimental_inline}}
+
{{domxref("DOMSettableTokenList")}}… 를 반환합니다.
+
{{domxref("HTMLElement.itemProp")}} {{readonlyInline}}{{experimental_inline}}
+
{{domxref("DOMSettableTokenList")}}… 를 반환합니다.
+
{{domxref("HTMLElement.itemValue")}} {{experimental_inline}}
+
항목 값을 나타내는 {{jsxref("Object")}} 를 반환합니다.
+
{{domxref("HTMLElement.lang")}}
+
요소의 속성, 텍스트, 컨텐츠의 언어를 나타내는 {{domxref("DOMString")}} 입니다.
+
{{domxref("HTMLElement.noModule")}}
+
임포트한 스크립트가 모듈 스크립트를 지원하는 유저 에이전트에서 실행될 수 있는지를 나타내는 {{jsxref("Boolean")}} 입니다.
+
{{domxref("HTMLElement.nonce")}}
+
주어진 페치(fetch)의 진행을 허용할지를 결정하기 위한 컨텐츠 보안 정책(Content Security Policy)에서 한 번 사용된 암호회된 숫자를 반환합니다.
+
{{domxref("HTMLElement.offsetHeight")}} {{readonlyInline}}{{experimental_inline}}
+
레이아웃에 상대적인 요소의 높이를 갖는 double 을 반환합니다.
+
{{domxref("HTMLElement.offsetLeft")}}{{readonlyInline}}{{experimental_inline}}
+
요소의 left border 부터 offsetParent 의 left border 까지의 거리를 double 로 반환합니다.
+
{{domxref("HTMLElement.offsetParent")}}{{readonlyInline}}{{experimental_inline}}
+
모든 오프셋 계산이 현재 연산된 요소인 {{domxref("Element")}} 를 반환합니다.
+
{{domxref("HTMLElement.offsetTop")}}{{readonlyInline}}{{experimental_inline}}
+
요소의 top border 부터 offsetParent 의 top border 까지의 거리를 double 로 반환합니다.
+
{{domxref("HTMLElement.offsetWidth")}}{{readonlyInline}}{{experimental_inline}}
+
레이아웃에 상대적인 요소의 너비를 갖는 double 을 반환합니다.
+
{{domxref("HTMLElement.properties")}} {{readonlyInline}}{{experimental_inline}}
+
{{domxref("HTMLPropertiesCollection")}}… 을 반환합니다.
+
{{domxref("HTMLElement.spellcheck")}}{{ gecko_minversion_inline("1.9")}}
+
철자 검사를 제어하는 {{jsxref("Boolean")}} 입니다. 모든 HTML 요소에 존재하지만, 모두에 대해 적용되지는 않습니다.
+
{{domxref("HTMLElement.style")}}
+
요소의 스타일 속성의 정의를 나타내는 {{domxref("CSSStyleDeclaration")}} 객체입니다.
+
{{domxref("HTMLElement.tabIndex")}}
+
탭 순서에서 요소의 위치를 나타내는 long 입니다.
+
{{domxref("HTMLElement.title")}}
+
요소에 마우스를 오버할 때 팝업 상자에 표시되는 텍스트를 갖는 {{domxref("DOMString")}} 입니다.
+
{{domxref("HTMLElement.translate")}} {{experimental_inline}}
+
번역을 나타내는 {{jsxref("Boolean")}} 입니다.
+
+ +

이벤트 핸들러

+ +

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

+ +
+
{{ domxref("HTMLElement.oncopy") }} {{ non-standard_inline() }}
+
copy 이벤트를 위한 이벤트 핸들링 코드를 반환합니다({{bug("280959")}}).
+
{{ domxref("HTMLElement.oncut") }} {{ non-standard_inline() }}
+
cut 이벤트를 위한 이벤트 핸들링 코드를 반환합니다({{bug("280959")}}).
+
{{ domxref("HTMLElement.onpaste") }} {{ non-standard_inline() }}
+
paste 이벤트를 위한 이벤트 핸들링 코드를 반환합니다({{bug("280959")}}).
+
{{domxref("TouchEventHandlers.ontouchstart")}} {{non-standard_inline}}
+
{{event("touchstart")}} 이벤트를 위한 이벤트 핸들링 코드를 반환합니다.
+
{{domxref("TouchEventHandlers.ontouchend")}} {{non-standard_inline}}
+
{{event("touchend")}} 이벤트를 위한 이벤트 핸들링 코드를 반환합니다.
+
{{domxref("TouchEventHandlers.ontouchmove")}} {{non-standard_inline}}
+
{{event("touchmove")}} 이벤트를 위한 이벤트 핸들링 코드를 반환합니다.
+
{{domxref("TouchEventHandlers.ontouchenter")}} {{non-standard_inline}}
+
{{event("touchenter")}} 이벤트를 위한 이벤트 핸들링 코드를 반환합니다.
+
{{domxref("TouchEventHandlers.ontouchleave")}} {{non-standard_inline}}
+
{{event("touchleave")}} 이벤트를 위한 이벤트 핸들링 코드를 반환합니다.
+
{{domxref("TouchEventHandlers.ontouchcancel")}} {{non-standard_inline}}
+
{{event("touchcancel")}} 이벤트를 위한 이벤트 핸들링 코드를 반환합니다.
+
+ +

메서드

+ +

부모인 {{domxref("Element")}}의 메서드를 상속합니다.

+ +
+
{{domxref("HTMLElement.blur()")}}
+
현재 포커스된 요소로부터 키보드 포커스를 제거합니다.
+
{{domxref("HTMLElement.click()")}}
+
요소로 마우스 클릭 이벤트를 전달합니다.
+
{{domxref("HTMLElement.focus()")}}
+
요소에 현재 키보드 포커스를 생성합니다.
+
{{domxref("HTMLElement.forceSpellCheck()")}} {{experimental_inline}}
+
요소에 철자 확인자를 생성합니다.
+
+ +

이벤트

+ +

Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface.

+ +
+
invalid
+
Fired when an element does not satisfy its constraints during constraint validation.
+ Also available via the oninvalid property.
+
+ +

Animation events

+ +
+
animationcancel
+
Fired when an animation unexpectedly aborts.
+ Also available via the onanimationcancel property.
+
animationend
+
Fired when an animation has completed normally.
+ Also available via the onanimationend property.
+
animationiteration
+
Fired when an animation iteration has completed.
+ Also available via the onanimationiteration property.
+
animationstart
+
Fired when an animation starts.
+ Also available via the onanimationstart property.
+
+ +

Input events

+ +
+
beforeinput
+
Fired when the value of an {{HTMLElement("input")}}, {{HTMLElement("select")}}, or {{HTMLElement("textarea")}} element is about to be modified.
+
input
+
Fired when the value of an {{HTMLElement("input")}}, {{HTMLElement("select")}}, or {{HTMLElement("textarea")}} element has been changed.
+ Also available via the oninput property.
+
+ +

Pointer events

+ +
+
gotpointercapture
+
Fired when an element captures a pointer using setPointerCapture().
+ Also available via the ongotpointercapture property.
+
lostpointercapture
+
Fired when a captured pointer is released.
+ Also available via the onlostpointercapture property.
+
pointercancel
+
Fired when a pointer event is canceled.
+ Also available via the onpointercancel property.
+
pointerdown
+
Fired when a pointer becomes active.
+ Also available via the onpointerdown property.
+
pointerenter
+
Fired when a pointer is moved into the hit test boundaries of an element or one of its descendants.
+ Also available via the onpointerenter property.
+
pointerleave
+
Fired when a pointer is moved out of the hit test boundaries of an element.
+ Also available via the onpointerleave property.
+
pointermove
+
Fired when a pointer changes coordinates.
+ Also available via the onpointermove property.
+
pointerout
+
Fired when a pointer is moved out of the hit test boundaries of an element (among other reasons).
+ Also available via the onpointerout property.
+
pointerover
+
Fired when a pointer is moved into an element's hit test boundaries.
+ Also available via the onpointerover property.
+
pointerup
+
Fired when a pointer is no longer active.
+ Also available via the onpointerup property.
+
+ +

Transition events

+ +
+
transitioncancel
+
Fired when a CSS transition is canceled.
+ Also available via the ontransitioncancel property.
+
transitionend
+
Fired when a CSS transition has completed.
+ Also available via the ontransitionend property.
+
transitionrun
+
Fired when a CSS transition is first created.
+ Also available via the ontransitionrun property.
+
transitionstart
+
Fired when a CSS transition has actually started.
+ Also available via the ontransitionstart property.
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
명세상태코멘트
{{SpecName('CSSOM View', '#extensions-to-the-htmlelement-interface', 'HTMLElement')}}{{Spec2('CSSOM View')}}다음 속성들이 추가됨: offsetParent, offsetTop, offsetLeft, offsetWidth, offsetHeight.
{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}{{Spec2('HTML WHATWG')}}다음 속성들이 추가됨: translate, itemScope, itemType, itemId, itemRef, itemProp, properties, itemValue.
+ 다음 메소드가 추가됨: forceSpellcheck().
+ onXYZ 속성을 {{domxref("GlobalEventHandlers")}} 인터페이스로 이동하고 이로부터 상속을 추가함.
{{SpecName('HTML5 W3C', 'dom.html#htmlelement', 'HTMLElement')}}{{Spec2('HTML5 W3C')}}다음 속성들이 추가됨: dataset, hidden, tabindex, accessKey, accessKeyLabel, draggable, dropzone, contentEditable, isContentEditable, contextMenu, spellcheck, commandType, commandLabel, commandIcon, commandHidden, commandDisabled, commandChecked, style, 모든 onXYZ 속성들.
+ id 와 className 속성을 {{domxref("Element")}} 인터페이스로 이동함.
{{SpecName('DOM2 HTML', 'html.html#ID-011100101', 'HTMLElement')}}{{Spec2('DOM2 HTML')}}{{SpecName('DOM2 HTML')}} 으로부터 변경 사항 없음
{{SpecName('DOM1', 'level-one-html.html#ID-011100101', 'HTMLElement')}}{{Spec2('DOM1')}}초기 정의.
+ +

브라우저 호환성

+ + + +

{{Compat("api.HTMLElement")}}

+ +

같이 보기

+ + -- cgit v1.2.3-54-g00ecf