웹 기본 인터페이스 - EventTarget, Node, Element, HTMLElement

상속 관계

프로토타입 상속 관계(출처: https://developer.mozilla.org/ko/docs/Web/API/HTMLElement)

EventTarget - 이벤트를 받을 수 있는 객체

주요 속성과 메서드:

• addEventListener(type, listener): 지정한 이벤트 유형이 발생할 때 호출할 함수를 추가.
• removeEventListener(type, listener): 이벤트 리스너를 제거
• dispatchEvent(event): 이벤트를 발송하여 이벤트 리스너를 실행

이 프로토타입을 가지는 요소:

• Node, Window

Node - DOM의 기본 단위

주요 속성과 메서드:

• nodeType: 노드의 유형을 나타내는 정수값
• nodeName: 노드의 이름
• childNodes: 자식 노드들의 컬렉션
• parentNode: 부모 노드를 참조
• appendChild(node): 자식 노드를 추가
• removeChild(node): 자식 노드를 제거
• cloneNode(deep): 노드를 복제

이 프로토타입을 가지는 요소:

• Element, Document(DOM 진입점), Text(기본 문자열, "\n "), Comment(주석), DocumentFragment(메모리 상에만 존재하는 DOM) 등

Element - HTML 문서 내의 모든 요소

주요 속성과 메서드:

• tagName: 요소의 태그 이름
• id: 요소의 ID
• className: 요소의 클래스
• getAttribute(name): 지정한 속성의 값을 반환
• setAttribute(name, value): 지정한 속성의 값을 설정
• removeAttribute(name): 지정한 속성을 제거
• querySelector(selectors): 주어진 CSS 선택자와 일치하는 첫 번째 요소를 반환
• querySelectorAll(selectors): 주어진 CSS 선택자와 일치하는 모든 요소를 반환

이 프로토타입을 가지는 요소:

• HTMLElement, SVGElement등

HTMLElement - HTML 문서 내의 모든 요소

주요 속성과 메서드:

• innerHTML: 요소의 HTML 콘텐츠.
• outerHTML: 요소를 포함한 HTML 콘텐츠.
• style: 요소의 인라인 스타일.
• tabIndex: 요소의 탭 순서.
• focus(): 요소에 포커스를 설정.
• blur(): 요소에서 포커스를 제거.
• click(): 요소를 클릭하는 동작을 시뮬레이션.

이 프로토타입을 가지는 요소:

• 대부분의 HTML 요소들: div, span, a, p, input, button 등