DOM 노드에 대응하는 클래스

DOM 노드에 대응하는 클래스

2025. 9. 22. 23:03ㆍFront-end/JavaScript

1. DOM 노드 클래스

DOM 노드는 종류에 따라 각각 다른 프로퍼티를 지원한다.

예를 들어 태그 <a>에 대응하는 요소 노드는 링크와 관련된 프로퍼티를,

<input>에 대응하는 요소 노드는 입력 관련 프로퍼티를 제공한다.

또한 DOM 노드는 종류에 따라 대응하는 내장 클래스가 다르다.

모든 노드들은 공통적으로 위와 같은 상속 구조를 가지므로, 클래스 역시 상속한다.

각 클래스의 특징은 아래와 같다.

EventTarget : 루트에 있는 추상 클래스로, 대응 하는 객체가 실제로 만들어지지 않음
Node : DOM 노드의 베이스 역할을 하는 추상 클래스로 주요 트리 탐색 기능을 제공
Element : DOM 요소를 위한 베이스 클래스로, getElementsByTagName 등과 같이 요소 전용 탐색을 돕는
프로퍼티/메서드가 이를 기반으로 한다.
HTMLElement : HTML 요소 노드의 베이스 역할을 하는 클래스로, 아래의 클래스들이 이 클래스를 상속받는다.
- HTMLInputElement - <input>
- HTMLBodyElement - <body>
  HTMLAnchorElement - <a>

상속 관계 에시를 들면,

document.body는 HTMLBodyElement 클래스의 인스턴스이며,

HTMLElement → Element → Node → EventTarget 순으로 상속된다.

2. DOM 노드를 조작할 때 사용하는 주요 프로퍼티

DOM 노드를 조작할 때 자주 사용되는 프로퍼티들이 있다

프로퍼티	역할	특징 / 예시
nodeType	노드 타입 확인	⋅ 정수값 반환 (요소: 1, 텍스트: 3, 문서: 9 ...) ⋅ 읽기 전용 ⋅ let a = document.body; alert(a.nodeType); // 1
nodeName / tagName	태그 이름 확인	⋅ tagName은 요소 노드만 존재 ⋅ nodeName은 모든 노드에 존재 ⋅ alert(document.body.nodeName); // BODY alert(document.body.tagName); // BODY
innerHTML	요소 내의 HTML을 문자열로 읽거나, HTML 코드로 설정하여 요소 내부 내용 수정 가능	⋅ '+='를 사용하면 요소에 HTML을 덮어 쓸 수 있음 ⋅ document.body.innerHTML = "새로운 BODY 내용"; ⋅ chatDiv.innerHTML += "<div>안녕하세용</div>
outerHTML	요소 자신의 태그 + 내부 HTML 전체를 포함한 HTML 문자열 요소 전체 교체 가능	⋅ 문서 내 요소는 바뀌나, 참조한 객체(element)는 동일하지 않음 ⋅ 할당한 HTML 조각은 새로 생성되며, 기존 객체가 여전히 남아있음 ⋅ <div id="elem">... alert(elem.outerHTML); // <div id="elem">...
nodeValue / data	요소가 아닌 노드 (텍스트, 주석 노드)의 내용을 읽고 수정할 때 사용	⋅ data가 조금더 간결 ⋅ let text = document.body.firstChild; alert(text.data); // body의 첫번째 요소
textContent	요소 내부의 '순수 텍스트'만 읽거나 씀	⋅ 사용자 입력값은 HTML 보안 측면에서 textContent가 안전함 ⋅ <div id="news"><p>ㅋㅋ<p/><span>외계인</span> alert(news.textContent); // ㅋㅋ 외계인
hidden	요소 보이기/숨기기 설정 hidden = true는 display: none과 유사	⋅ CSS 스타일 display: none과 사실상 같은 동작 ⋅ 브라우저의 렌더링 시 가시성에 영향을 줌 ⋅ setInterval(()=> elem.hidden = !elem.hidden, 1000); // 깜박깜박

참고

'Front-end > JavaScript' 카테고리의 다른 글

브라우저 창 사이즈와 스크롤 정보 얻기 (1)	2025.09.22
메서드로 DOM 조작해서 문서 수정하기 (0)	2025.09.22
E2 : 요소 검색하기 (0)	2025.09.08
E1 : JS로 DOM 객체 탐색하기 (0)	2025.09.07
B23 : iterable 객체 (1)	2025.08.29

🥔 감자의 오묘한 개발 🥔

🥔 감자의 오묘한 개발 🥔

태그

최근글

댓글

공지사항

아카이브

목차

1. DOM 노드 클래스

2. DOM 노드를 조작할 때 사용하는 주요 프로퍼티

'Front-end > JavaScript' 카테고리의 다른 글

관련글

티스토리툴바