HTML DOM Element 객체
Element 객체
HTML DOM에서 Element 객체는 P, DIV, A, TABLE 또는 어떤 다른 HTML 요소와 같은 HTML 요소를 대표합니다.
속성과 메서드
다음 속성과 메서드는 모든 HTML 요소에 사용할 수 있습니다：
| 속성 / 메서드 | 설명 |
|---|---|
| accessKey | 요소의 accesskey 속성을 설정하거나 반환합니다. |
| addEventListener() | 이벤트 처리기를 요소에 추가합니다. |
| appendChild() | 요소에 새로운 자식 노드를 추가합니다. |
| attributes | 요소의 속성의 NamedNodeMap을 반환합니다. |
| blur() | 요소에서 포커스를 제거합니다. |
| childElementCount | 요소의 자식 요소의 개수를 반환합니다. |
| childNodes | 요소의 자식 노드의 NodeList을 반환합니다. |
| children | 요소의 자식 요소의 HTMLCollection을 반환합니다. |
| classList | 요소의 클래스 이름을 반환합니다. |
| className | 요소의 class 속성 값을 설정하거나 반환합니다. |
| click() | 요소에 마우스 클릭을 모의합니다. |
| clientHeight | 요소의 높이를(백그라운드 여백 포함) 반환합니다. |
| clientLeft | 요소 좌측 여백의 너비를 반환합니다. |
| clientTop | 요소 상단 여백의 너비를 반환합니다. |
| clientWidth | 요소의 너비를(백그라운드 여백 포함) 반환합니다. |
| cloneNode() | 요소를 복제합니다. |
| closest() | DOM 트리에서 CSS 선택자와 일치하는 가장 가까운 요소를 검색합니다. |
| compareDocumentPosition() | 두 요소의 문서 위치를 비교합니다. |
| contains() | 노드가 노드의 자손이면 true를 반환합니다. |
| contentEditable | 요소의 내용이 편집 가능한지 설정하거나 반환합니다. |
| dir | 요소의 dir 속성 값을 설정하거나 반환합니다. |
| firstChild | 요소의 첫 번째 자식 노드를 반환합니다. |
| firstElementChild | 요소의 첫 번째 자식 요소를 반환합니다. |
| focus() | 요소에 포커스를 가져옵니다. |
| getAttribute() | 요소의 속성 값을 반환합니다. |
| getAttributeNode() | 속성 노드를 반환합니다. |
| getBoundingClientRect() | 요소의 크기 및 뷰포트에 대한 위치를 반환합니다. |
| getElementsByClassName() | 주어진 클래스 이름을 가진 자식 요소의 집합을 반환합니다. |
| getElementsByTagName() | 주어진 태그 이름을 가진 자식 요소의 집합을 반환합니다. |
| hasAttribute() | 요소가 주어진 속성을 가지고 있으면 true를 반환합니다. |
| hasAttributes() | 요소가 속성이 있으면 true를 반환합니다. |
| hasChildNodes() | 요소가 자식 노드가 있으면 true를 반환합니다. |
| element.id | 요소의 id 속성 값을 설정하거나 반환합니다. |
| innerHTML | 요소의 내용을 설정하거나 반환합니다. |
| innerText | 노드 및 자식 노드의 텍스트 내용을 설정하거나 반환합니다. |
| insertAdjacentElement() | 요소에 대한 상대적인 위치에 새 HTML 요소를 삽입합니다. |
| insertAdjacentHTML() | 요소에 대한 상대적인 위치에 HTML 형식의 텍스트를 삽입합니다. |
| insertAdjacentText() | 요소에 대한 상대적인 위치에 텍스트를 삽입합니다. |
| insertBefore() | 기존 자식 노드 앞에 새 자식 노드를 삽입합니다. |
| isContentEditable | 요소의 내용이 편집 가능하면 true를 반환합니다. |
| isDefaultNamespace() | 주어진 namespaceURI가 기본 값이면 true를 반환합니다. |
| isEqualNode() | 두 요소가 같은지 확인합니다. |
| isSameNode() | 두 요소가 동일한 노드인지 확인합니다. |
| isSupported() | 사용 중지됨. |
| lang | 요소의 lang 속성 값을 설정하거나 반환합니다. |
| lastChild | 요소의 마지막 자식 노드를 반환합니다. |
| lastElementChild | 요소의 마지막 자식 요소를 반환합니다. |
| matches() | 요소가 주어진 CSS 선택자와 일치하면 true를 반환합니다. |
| namespaceURI | 노드의 이름 공간 URI를 반환합니다. |
| nextSibling | 동일한 노드 트리 레벨에 위치한 다음 노드를 반환합니다. |
| nextElementSibling | 동일한 노드 트리 레벨에 위치한 다음 요소를 반환합니다. |
| nodeName | 노드의 이름을 반환합니다. |
| nodeType | 노드의 노드 타입을 반환합니다. |
| nodeValue | 노드의 값을 설정하거나 반환합니다. |
| normalize() | 요소 내의 연속된 텍스트 노드를 통합하고 비어 있는 텍스트 노드를 제거합니다. |
| offsetHeight | 요소의 높이를 반환합니다. 내간격, 테두리, 스크롤 바 포함. |
| offsetWidth | 요소의 너비를 반환합니다. 내간격, 테두리, 스크롤 바 포함. |
| offsetLeft | 요소의 수평 이동 위치를 반환합니다. |
| offsetParent | 요소의 이동 캐시이를 반환합니다. |
| offsetTop | 요소의 수직 이동 위치를 반환합니다. |
| outerHTML | 요소의 내용(시작 태그와 끝 태그 포함)을 설정하거나 반환합니다. |
| outerText | 노드 및 그 자손의 외부 텍스트 내용을 설정하거나 반환합니다. |
| ownerDocument | 요소의 뿌리 요소(문서 객체)를 반환합니다. |
| parentNode | 요소의 부모 노드를 반환합니다. |
| parentElement | 요소의 부모 요소 노드를 반환합니다. |
| previousSibling | 동일한 노드 트리 레벨에 위치한 이전 노드를 반환합니다. |
| previousElementSibling | 동일한 노드 트리 레벨에 위치한 이전 요소를 반환합니다. |
| querySelector() | CSS 선택자와 일치하는 첫 번째 자식 요소를 반환합니다. |
| querySelectorAll() | CSS 선택자와 일치하는 모든 자식 요소를 반환합니다. |
| remove() | DOM에서 요소를 제거합니다. |
| removeAttribute() | 요소에서 속성을 제거합니다. |
| removeAttributeNode() | 속성 노드를 제거하고 제거된 노드를 반환합니다. |
| removeChild() | 요소에서 자식 노드를 제거합니다. |
| removeEventListener() | addEventListener() 메서드로 추가된 이벤트 처리기를 제거합니다. |
| replaceChild() | 요소 내의 자식 노드를 대체합니다. |
| scrollHeight | 요소의 전체 높이를 반환합니다. 내간격 포함. |
| scrollIntoView() | 요소를 브라우저 창의 가시 영역으로 스크롤합니다. |
| scrollLeft | 요소의 내용이 좌측으로 스크롤된 픽셀 수를 설정하거나 반환합니다. |
| scrollTop | 요소의 내용이 상단으로 스크롤된 픽셀 수를 설정하거나 반환합니다. |
| scrollWidth | 요소의 전체 너비(백그라운드 여백 포함)를 반환합니다. |
| setAttribute() | 속성 값을 설정하거나 변경합니다. |
| setAttributeNode() | 속성 노드를 설정하거나 변경합니다. |
| style | 요소의 style 속성 값을 설정하거나 반환합니다. |
| tabIndex | 요소의 tabIndex 속성 값을 설정하거나 반환합니다. |
| tagName | 요소의 태그 이름을 반환합니다. |
| textContent | 노드 및 자식 노드의 텍스트 내용을 설정하거나 반환합니다. |
| title | 요소의 title 속성 값을 설정하거나 반환합니다. |
| toString() | 요소를 문자열로 변환합니다. |
Element 인터페이스 설명
Element 인터페이스는 HTML 요소, XML 요소 또는 태그를 나타냅니다. tagName 속성은 요소의 이름을 지정합니다. Document의 documentElement 속성은 이 문서의 기본 Element 객체를 참조합니다. HTMLDocument 객체의 body 속성도 유사하게, 문서의 <body> 요소를 참조합니다. HTML 문서에서 특정 이름의 요소를 찾으려면 Document.getElementById()를 사용합니다(그리고 요소에 유일한 이름을 id 속성을 통해 주는 것). 태그 이름을 통해 요소를 위치시키려면 getElementsByTagName()를 사용합니다. 이는 Element의 메서드이자 Document의 메서드입니다. HTML 문서에서는 유사한 HTMLDocument.getElementsByName() 메서드를 사용하여 요소의 name 속성을 통해 요소를 찾을 수 있습니다. 마지막으로, Document.createElement() 메서드를 사용하여 문서에 새 Element 요소를 생성할 수 있습니다.
addEventListener() 메서드(그리고 IE에 특화된 대체 메서드 attachEvent() )는 특정 유형의 이벤트에 대한 이벤트 핸들러 함수를 요소에 등록하는 방법을 제공합니다. 기술적으로, addEventListener()、removeEventListener() 및 dispatchEvent()는 2차 DOM Events 스펙의 EventTarget 인터페이스에 정의되어 있습니다. 모든 Element 객체는 EventTarget를 구현합니다.
이 인터페이스의 다른 메서드는 요소 속성에 대한 접근을 제공합니다. HTML 문서에서(또는 많은 XML 문서에서), 모든 속성은 간단한 문자열 값이며, 필요한 속성 작업을 위해 getAttribute()와 setAttribute()를 사용할 수 있습니다.
XML 문서를 사용하는 경우, Entity 참조 페이지가 속성 값의 일부로 포함될 수 있으며, Attr 객체 및 그 노드 트리를 사용해야 합니다. Attr 객체를 가져오거나 설정하려면 getAttributeNode()와 setAttributeNode()를 사용할 수 있으며, Node 인터페이스의 attributes[] 배열을 통해 Attr 노드를 탐색할 수 있습니다. XML 이름 공간을 사용하는 XML 문서를 사용하는 경우, "NS"가 이름을 가진 다양한 메서드를 사용해야 합니다.
1차 DOM 규범에서, normalize() 메서드는 Element 인터페이스의 일부입니다. 2차 규범에서, normalize()는 Node 인터페이스의 일부입니다. 모든 Element 노드는 이 메서드를 继承하고 여전히 사용할 수 있습니다.
지식: HTML DOM 노드
HTML DOM(문서 객체 모델)에서, 각 부분은 노드입니다:
- 문서 자체는 문서 노드입니다
- 모든 HTML 요소는 요소 노드입니다
- 모든 HTML 속성은 속성 노드입니다
- HTML 요소 내의 텍스트는 텍스트 노드입니다
- 주석은 주석 노드입니다
Element 객체
HTML DOM에서, Element 객체는 HTML 요소를 나타냅니다.
Element 객체는 요소 노드, 텍스트 노드, 주석 노드로 구성된 자식 노드를 가질 수 있습니다.
NodeList 객체는 노드 목록을 나타내며, 예를 들어 HTML 요소의 자식 노드 집합입니다.
요소는 속성을 가질 수 있습니다. 속성은 속성 노드(다음 장 참조)입니다.
