[JS] JavaScript로 DOM 조작하기 | 노드 프로퍼티 정리

[JS] JavaScript로 HTML 구조 살펴보기 | DOM 노드 탐색 기초

[JS] JavaScript로 HTML 구조 살펴보기 | DOM 노드 탐색 기초

1. DOM (노드 프로퍼티)

1. get node info (노드 정보 취득)

• Node.prototype.nodeType : 노드 객체의 종류, 즉 노드 타입을 나타내는 상수 반환
  • Node.ELEMENT_NODE : 요소 노드 타입을 나타내는 상수 1 반환
  • Node.TEXT_NODE : 텍스트 노드 타입을 나타내는 상수 3 반환
  • Node.DOCUMENT_NODE : 문서 노드 타입을 나타내는 상수 9를 반환
• Node.prototype.nodeName2 : 노드의 이름을 문자열로 반환한다.
  • 요소 노드 : 다문자 문자열로 태그 이름을 반환
  • 텍스트 노드 : 문자열 “#text”를 반환
  • 문서 노드 : 문자열 “#document”를 반환

<div id="area">노드 정보 취득</div>

console.log(document.nodeType);
console.log(document.nodeName);

const $area = document.getElementById('area');
console.log($area.nodeType);
console.log($area.nodeName);

const $textNode = $area.firstChild;console.log($textNode.nodeType);
console.log($textNode.nodeName);

2. text node content (요소 노드의 텍스트 조작)

• 지금까지 살펴본 노드 탐색, 노드 정보 프로퍼티는 모두 읽기 전용 접근자 프로퍼티이다.
• Node.prototype.nodeValue 프로퍼티는 setter와 getter가 모두 존재하는 접근자 프로퍼티이다.
  • nodeValue 프로퍼티 참조 시 노드 객체의 값(텍스트 노드의 텍스트)을 반환한다.
  • 텍스트 노드가 아닌 노드(문서 노드, 요소 노드)의 경우 null을 반환한다.
  • 텍스트 노드의 nodeValue 프로퍼티에 값을 할당하면 텍스트 노드의 값을 변경할 수 있다.

<div id="area">nodeValue</div>

console.log(document.nodeValue);

const $area = document.getElementById('area');
console.log($area.nodeValue);

const $textNode = $area.firstChild;
console.log($textNode.nodeValue);

$textNode.nodeValue = '텍스트 값 변경 완료!';

• Node.prototype.textContent 프로퍼티는 setter와 getter 모두 존재하는 접근자 프로퍼티로서 요소 노드의 텍스트와 모든 자손 노드의 텍스트를 모두 취득하거나 변경한다.
  • 요소 노드의 textContent 프로퍼티를 참조하면 요소 노드의 콘텐츠 영역 내의 텍스트롤 모두 반환하며 이 때 HTML 마크업은 무시된다.
  • 요소 노드의 textContext 프로퍼티에 문자열을 할당하면 요소 노드의 모든 자식 노드가 제거 되고 할당한 문자열이 텍스트로 추가 된다. 이 때도 HTML 마크업은 무시되고 문자열 텍스트로 취급된다.
• innerText 프로퍼티는 textContent 프로퍼티와 유사한 동작을 하지만 CSS에 순종적(예를 들어 visibility:hidden; 은 반환하지 않음)이고, CSS 고려로 인해 느리기 때문에 사용하지 않는 것이 좋다.

<div id="area2">textContent<span>내부 span</span></div>

const $area2 = document.getElementById('area2');

// HTML의 마크업이 무시된 div 내부의 컨텐츠를 텍스트로 취득
console.log($area2.textContent);

// nodeValue는 텍스트 노드의 값만 반환하므로 textContent보다 코드가 복잡해진다
console.log($area2.nodeValue);  // null
console.log($area2.firstChild.nodeValue);   // textContent
console.log($area2.lastChild.firstChild.nodeValue); // 내부 span

// area2의 모든 자식 노드가 제거되고 할당한 문자열이 텍스트로 추가된다.
// HTML 마크업이 파싱되지 않는다.
$area2.textContent = '텍스트 값 변경 완료!<span>내부 span</span>