[JS Deep Dive] 39장 - DOM (2)

 

1. 노드 탐색 

요소 노드를 취득한 다음 취득한 요소노드를 기점으로 DOM 트리의 노드를 옮겨 다니며 부모 형제 자식 노드 등을 탐색해야할 때가 있다. 이처럼 DOM 트리상의 노드를 탐색할 수 있게 Node, Element 인터페이스는 트리 탐색 프로퍼티를 제공한다. 

 

노드 탐색 프로퍼티는 모두 접근자 프로퍼티이다. 

단 노드 탐색 프로퍼티는 setter 없이 getter 만 존재하여 참조만 가능한 읽기 전용 접근자 프로퍼티이다. 

읽기전용 접근자 프로퍼티에 값을 할당하면 아무런 에러없이 무시된다. 

 

 

2. 공백 텍스트 노드

HTML 요소 사이의 공백(스페이스 키, 탭 키, 엔터 키 등)  은 텍스트 노드를 생성한다. 

 

 

3. 자식  노드 탐색

 

Node.prototype.hasChildNodes 메서드를 사용하여 자식노드가 있는지를 확인할 수 있다. 

 

4. 노드 정보 취득

Node.protype.nodeTyoe : 노드 객체의 종류 나타냄

Node.prototype.nodeName : 노드의 이름을 문자열로 반환함

 

5. 요소 노드의 텍스트 조작

• Node.prototype.nodeValue 프로퍼티는 setter와 getter 모두 존재하는 접근자 프로퍼티다. 따라서 참조와 할당 모두 가능하다.
• 노드 객체의 nodeValue 프로퍼티를 참조하면 노드 객체의 값을 반환한다.
• 노드 객체의 값이란 텍스트 노드의 텍스트다.
• 따라서 텍스트 노드가 아닌 노드, 즉 문서 노드나 요소 노드의 nodeValue 프로퍼티를 참조하면 null을 반환한다.