DOM 노드 클래스
: DOM 노드는 종류에 따라 각각 다른 프로퍼티를 지원함
: 모든 DOM 노드는 공통된 프로퍼티와 메서드를 지원함
- EventTarget
: 루트에 있는 추상 클래스로, 이 클래스에 대응하는 객체는 실제로 만들어지지 않음
: EventTarget이 모든 DOM 노드의 베이스에 있기 때문에 DOM 노드에서 이벤트를 사용할 수 있음
- Node
: 추상 클래스로써, DOM 노드의 베이스 역할
: getter 역할을 하는 parentNode, nextSibling, childNodes 등 주요 트리 탐색 기능 제공
: 객체는 실제 생성되지 않지만 이 클래스를 상속 받는 클래스는 여러 개임
: Text 클래스 / Element 클래스 / Comment 클래스가 이를 상속 받음
- Element
: DOM 요소를 위한 베이스 클래스
: nextElementSibling, children, getElementsByTagName, querySelector와 같이 요소 탐색을 도와주는 프로퍼티나
메서드가 이를 기반으로 함
: XML, SVG 지원을 위한 SVGElement, XMLElement, HTMLElement 클래스의 베이스 역할
- HTMLElement
: HTML 요소 노드의 베이스 역할
: 아래 클래스 들은 실제 HTML 요소에 대응하고 HTMLElemt를 상속 받음
: HTMLInputElement (<input> 요소에 대응하는 클래스)
: HTMLBodyElement (<body> 요소에 대응하는 클래스)
: HTMLAnchorElement (<a> 요소에 대응하는 클래스) 등등...
- 예시
: <input> 요소에 대응하는 DOM 객체의 예시
: 이 객체는 HTMLInputElement 클래스를 기반으로 만들어짐
: 해당 객체 아래의 프로퍼티와 메서드
> HTMLInputElement
= 입력 관련 프로퍼티를 제공하는 클래스
> HTMLElement
= HTML 요소 메서드와 getter, setter를 제공하는 클래스
> Element
= 요소 노드 메서드를 제공하는 클래스
> Node
= 공통 DOM 노드 프로퍼티를 제공하는 클래스
> EventTarget
= 이벤트 관련 기능을 제공하는 클래스
> Object
= hasOwnProperty같이 ‘일반 객체’ 메서드를 제공하는 클래스
alert( document.body.constructor.name ); // HTMLBodyElement
alert( document.body ); // [object HTMLBodyElement]
alert( document.body instanceof HTMLBodyElement ); // true
alert( document.body instanceof HTMLElement ); // true
alert( document.body instanceof Element ); // true
alert( document.body instanceof Node ); // true
alert( document.body instanceof EventTarget ); // true
console.dir(요소)와 console.log(요소)의 차이
- console.log
: 요소의 DOM 트리를 출력
- console.dir
: 요소를 DOM 객체처럼 취급하여 출력
: 프로퍼티를 확인하기 쉽다는 장점을 가짐
IDL (Interface Description Language)
: 명세서에서는 DOM 클래스를 자바스크립트가 아닌 IDL을 사용해 설명
: IDL에서는 모든 프로퍼티 앞에 타입을 붙임
// HTMLInputElement 정의 시작
// 콜론(:)은 HTMLInputElement가 HTMLElement로 부터 상속되었다는 것을 의미합니다.
interface HTMLInputElement: HTMLElement {
// <input> 요소와 관련된 프로퍼티와 메서드가 나열되기 시작합니다.
// 'DOMString'은 프로퍼티 값이 문자열이라는 것을 의미합니다.
attribute DOMString accept;
attribute DOMString alt;
attribute DOMString autocomplete;
attribute DOMString value;
// 불린 값(true/false)을 가지는 프로퍼티
attribute boolean autofocus;
...
// 'void'는 메서드의 리턴값이 없음을 의미합니다.
void select();
...
}
nodeType 프로퍼티
: DOM 노드의 타입을 알아내고자 할 때 사용하는 구식 프로퍼티
: 각 노드 타입은 상숫값을 가짐
elem.nodeType == 1 – 요소 노드
elem.nodeType == 3 – 텍스트 노드
elem.nodeType == 9 – 문서 객체
등등..<body>
<script>
let elem = document.body;
// 타입을 알아봅시다.
alert(elem.nodeType); // 1 => 요소 노드
// 첫 번째 자식 노드
alert(elem.firstChild.nodeType); // 3 => 텍스트 노드
// 문서 객체의 타입 확인
alert( document.nodeType ); // 9 => 문서 객체
</script>
</body>: 모던 자바스크립트에서는 노드의 타입을 instanceOf나 클래스 기반의 테스트를 이용해 확인
: nodeType은 간단하게 확인할 수 있지만 바꾸는 것은 불가
nodeName / tagName
: DOM 노드의 태그이름을 알아낼 수 있는 프로퍼티
alert( document.body.nodeName ); // BODY
alert( document.body.tagName ); // BODY<body><!-- 주석 -->
<script>
// 주석 노드를 대상으로 두 프로퍼티 비교
alert( document.body.firstChild.tagName ); // undefined (요소가 아님)
alert( document.body.firstChild.nodeName ); // #comment
// 문서 노드를 대상으로 두 프로퍼티 비교
alert( document.tagName ); // undefined (요소가 아님)
alert( document.nodeName ); // #document
</script>
</body>: tagName 프로퍼티는 요소 노드에만 존재
: nodeName 프로퍼티는 모든 Node에 존재
※ 태그의 이름은 XML 모드를 제외하고 항상 대문자임
: HTML 모드에서는 모든 태그가 대문자로 변형 됨
: XML 모드에서는 케이스가 그대로 유지됨
innerHTML
: 요소안의 HTML을 문자열 형태로 받아오고 수정할 수 있는 프로퍼티
<body>
<p>p 태그</p>
<div>div 태그</div>
<script>
alert( document.body.innerHTML ); // 내용 읽기
document.body.innerHTML = '새로운 BODY!'; // 교체
</script>
</body><body>
<script>
document.body.innerHTML = '<b>test'; // 닫는 태그를 잊음
alert( document.body.innerHTML ); // <b>test</b> (자동으로 수정됨)
</script>
</body>: <script> 태그는 실행되지 않음
- 주의사항
: 내용 추가가 아닌 덮어쓰기이기 때문에 사용 시 주의해야함
: 기존 내용이 완전히 삭제되고 밑바닥 부터 다시 내용이 쓰여지기 때문에 이미지 등의 리소스 전부가 다시 로딩 됨
chatDiv.innerHTML += "<div>안녕하세요<img src='smile.gif'/> !</div>";
chatDiv.innerHTML += "잘 지내죠?";
ourterHTML
: 요소 전체 HTML이 담겨있는 프로퍼티
: innerHTML에 요소 자체를 더한 것
: innerHTML과 달리 요소 자체가 바뀌지는 않고, DOM 안의 요소를 교체함
<div id="elem">Hello <b>World</b></div>
<script>
alert(elem.outerHTML); // <div id="elem">Hello <b>World</b></div>
</script><div>Hello, world!</div>
<script>
let div = document.querySelector('div');
// div.outerHTML를 사용해 <p>...</p>로 교체
div.outerHTML = '<p>새로운 요소</p>'; // (*)
// 어! div가 그대로네요!
alert(div.outerHTML); // <div>Hello, world!</div> (**)
</script>
nodeValue / data
: 요소 노드에서만 사용가능한 innerHTML과 달리 텍스트 노드나 다른 노드의 내용을 조작할 수 있는 프로퍼티
<body>
안녕하세요.
<!-- 주석 -->
<script>
let text = document.body.firstChild;
alert(text.data); // 안녕하세요.
let comment = text.nextSibling;
alert(comment.data); // 주석
</script>
</body>
textContent
: 요소 내의 텍스트에 접근하여 순수한 텍스트만 추출하기 위한 프로퍼티
<div id="news">
<h1>주요 뉴스!</h1>
<p>화성인이 지구를 침공하였습니다!</p>
</div>
<script>
// 주요 뉴스! 화성인이 지구를 침공하였습니다!
alert(news.textContent);
</script><div id="elem1"></div>
<div id="elem2"></div>
<script>
let name = prompt("이름을 알려주세요.", "<b>이보라</b>");
elem1.innerHTML = name;
elem2.textContent = name;
</script>
hidden
: 요소를 보여줄지 말지 지정할 때 사용하는 속성, 프로퍼티
: HTML과 자바스크립트 안에서 사용 가능
<div>아래 두 div를 숨겨봅시다.</div>
<div hidden>HTML의 hidden 속성 사용하기</div>
<div id="elem">자바스크립트의 hidden 프로퍼티 사용하기</div>
<script>
elem.hidden = true;
</script>
- 요소 깜빡이게 만들기
<div id="elem">깜빡이는 요소</div>
<script>
setInterval(() => elem.hidden = !elem.hidden, 1000);
</script>
기타 프로퍼티
- value
: <input>과 <select>, <textarea>의 값이 저장됨
: HTMLInputElement, HTMLSelectElement 클래스에 대응됨
- href
: <a href = '..'>의 href 속성 값이 저장됨
: HTMLAnchorElement 클래스에 대응됨
- id
: id 속성 값이 저장됨
: 모든 요소 노드에서 사용할 수 있고 HTMLElement 클래스에 대응됨
<input type="text" id="elem" value="value">
<script>
alert(elem.type); // "text"
alert(elem.id); // "elem"
alert(elem.value); // value
</script>
Refference
주요 노드 프로퍼티
ko.javascript.info
'Programming > JavaScript' 카테고리의 다른 글
| 자바스크립트 숨겨진 기능 Shadow DOM 활용법 (0) | 2022.04.24 |
|---|---|
| 모던 자바스크립트 (문서) 18-6. 속성과 프로퍼티 (0) | 2022.04.24 |
| 모던 자바스크립트 (문서) 18-3. DOM 다루기 (0) | 2022.04.24 |
| 모던 자바스크립트 (문서) 18-2. DOM 트리 (0) | 2022.04.24 |
| 모던 자바스크립트 (문서) 18-1. 브라우저 환경과 다양한 명세서 (0) | 2022.04.24 |