1. DOM 노드 클래스
DOM 노드는 종류에 따라 각각 다른 프로퍼티를 지원한다.
태그 <a>에 대응하는 요소 노드엔 링크 관련된 프로퍼티를, <input>에 대응하는 요소 노드엔 입력 관련프로퍼티를 제공한다.
그런데 모든 DOM 노드는 공통 조상으로부터 만들어지기 때문에 노드 종류는 다르지만, 모든 DOM 노드는 공통된 프로퍼티와 메서드를 지원한다.
DOM 노드는 종류에 따라 대응하는 내장 클래스가 다르다.
계층 구조 꼭대기엔 EventTarget이 있는데, Node는 EventTarget을, 다른 DOM 노드들은 Node 클래스를 상속받는다.
이런 관계를 그림으로 나타내면 다음과 같다.
- EventTarget – 루트에 있는 ‘추상(abstract)’ 클래스로, 이 클래스에 대응하는 객체는 실제로 만들어지지 않는다. EventTarget가 모든 DOM 노드의 베이스에 있기때문에 DOM 노드에서 '이벤트’를 사용할 수 있다.
- Node – 역시 ‘추상’ 클래스로, DOM 노드의 베이스 역할을 한다. getter 역할을 하는 parentNode, nextSibling, childNodes 등의 주요 트리 탐색 기능을 제공한다. Node 클래스의 객체는 절대 생성되지 않는다. 하지만 이 클래스를 상속받는 클래스는 여럿 있다. 텍스트 노드를 위한 Text 클래스와 요소 노드를 위한 Element 클래스, 주석 노드를 위한 Comment클래스는 Node클래스를 상속받는다.
- Element – DOM 요소를 위한 베이스 클래스. nextElementSibling, children 이나 getElementsByTagName, querySelector 같이 요소 전용 탐색을 도와주는 프로퍼티나 메서드가 이를 기반으로 한다.
- HTMLElement – HTML 요소 노드의 베이스 역할을 하는 클래스. 아래 나열한 클래스들은 실제 HTML 요소에 대응하고 HTMLElement를 상속받는다.
- HTMLInputElement – <input> 요소에 대응하는 클래스
- HTMLBodyElement – <body> 요소에 대응하는 클래스
- HTMLAnchorElement – <a> 요소에 대응하는 클래스
- 이외에도 다른 클래스가 많은데, 각 태그에 해당하는 클래스는 고유한 프로퍼티와 메서드를 지원한다.
2. nodeName과 tagName으로 태그 이름 확인하기
nodeName이나 tagName 프로퍼티를 사용하면 DOM 노드의 태그 이름을 알아낼 수 있다.
alert( document.body.nodeName ); // BODY
alert( document.body.tagName ); // BODY3. innerHTML로 내용 조작하기
innerHTML 프로퍼티를 사용하면 요소 안의 HTML을 문자열 형태로 받아올 수 있다. 요소 안 HTML을 수정하는 것도 가능하다.
<body>
<p>p 태그</p>
<div>div 태그</div>
<script>
alert( document.body.innerHTML ); // 내용 읽기
document.body.innerHTML = '새로운 BODY!'; // 교체
</script>
</body>4. outerHTML로 요소의 전체 HTML 보기
outerHTML 프로퍼티엔 요소 전체 HTML이 담겨있다. (outerHTML은 innerHTML에 요소 자체를 더한 것)
<div id="elem">Hello <b>World</b></div>
<script>
alert(elem.outerHTML); // <div id="elem">Hello <b>World</b></div>
</script>5. nodeValue.data로 텍스트 노드 내용 조작하기
innerHTML 프로퍼티는 요소 노드에만 사용할 수 있다.
텍스트 노드 같은 다른 타입의 노드에는 innerHTML과 유사한 역할을 해주는 프로퍼티인 nodeValue와 data를 사용해야한다.
이 두 프로퍼티는 아주 유사하다!!
<body>
안녕하세요.
<!-- 주석 -->
<script>
let text = document.body.firstChild;
alert(text.data); // 안녕하세요.
let comment = text.nextSibling;
alert(comment.data); // 주석
</script>
</body>6. textContent로 순수한 텍스트만
textContent를 사용하면 요소 내의 텍스트에 접근할 수 있습니다. <태그>는 제외하고 오로지 텍스트만 추출할 수 있는 것.
<div id="news">
<h1>주요 뉴스!</h1>
<p>화성인이 지구를 침공하였습니다!</p>
</div>
<script>
// 주요 뉴스! 화성인이 지구를 침공하였습니다!
alert(news.textContent);
</script>7. hidden 프로퍼티
hidden 속성과 hidden 프로퍼티는 요소를 보여줄지 말지 지정할 때 사용할 수 있다.
hidden은 HTML 안에서 쓸 수도 있고 자바스크립트에서도 쓸 수 있다.
<div>아래 두 div를 숨기기.</div>
<div hidden>HTML의 hidden 속성 사용하기</div>
<div id="elem">자바스크립트의 hidden 프로퍼티 사용하기</div>
<script>
elem.hidden = true;
</script>8. 기타 프로퍼티
- value – <input>과 <select>, <textarea>의 값이 저장된다. 대응하는 클래스는 HTMLInputElement, HTMLSelectElement 등
- href – <a href="...">의 href 속성 값이 저장된다. 대응하는 클래스는 HTMLAnchorElement
- id – id 속성 값이 저장된다. 모든 요소 노드에서 사용할 수 있으며, 대응하는 클래스는 HTMLElement
'Front-end > JavaScript' 카테고리의 다른 글
| [JavaScript] 스타일과 클래스 (0) | 2022.06.19 |
|---|---|
| [JavaScript] 속성과 프로퍼티 (0) | 2022.06.19 |
| [JavaScript] getElement, querySelector (0) | 2022.06.19 |
| [JavaScript] DOM트리 (0) | 2022.06.18 |
| [JavaScript] 브라우저 환경과 다양한 명세서 (DOM과 BOM) (0) | 2022.06.18 |
