2022_01_12 DOM_노드 탐색

딥다이브 참조 - 프로젝트에 도움이 될것같은 내용을 위주로 설명

 

DOM이란 무엇인가?

DOM은 HTML문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API

즉, 프로퍼티와 메서드를 제공하는 트리 자료구조 이다.

 

앞서 다른분이 설명을 하셧겠지만 다시한번 복습

 

HTML의 계층적 구조를 노드로 구분 가능

 

노드 탐색이란?

특정 노드를 취득하고 취득한 노드 기점으로 부모 형제 자식 등 탐색을 해야할 때 사용하는 것

 

<ul id="fruits">
	<li class="apple">Apple</li>
    	<li class="banana">Banana</li>
    	<li class="orange">Orange</li>
</ul>

• #fruits 는 3개의 자식 요소를 가진다. -> 자식 모두를 탐색하거나 하나만 탐색 할 수 있음
• .banana 는 2개의 형제, 1개의 부모 요소를 가진다 -> 형제 노드를 탐색하거나 부모 노드를 탐색 할 수 있음
• 이처럼 하나의 특정 노드 요소를 선택하고 탐색할 수 있도록 다양한 Node, Element 프로퍼티를 제공한다

프로퍼티 종류

• Node.prototype
  • parentNode
  • previousSibling
  • firstChild
  • childNodes
• Element.prototype
  • previousElementSibling
  • nextElementSibling
  • chidren
• 노드 탐색 프로퍼티는 setter 없이 getter만 존재하여 읽기 전용 프로퍼티이다.
• 만약 setter 하여 값을 변경해주려고하면 에러 없이 무시된다.

 

공백 텍스트 노드

• 따로 언급한적은 없지만 모든 스페이스, 탭, 엔터 키를 누르면 공백 문자가 추가되고 그것을 파싱해보면
• 공백 텍스트 노드 라고한다. 
• 공백 텍스트 노드를 없애려면 모든 tab, 여백, 줄바꿈을 안하면 되긴하는데 가독성이 떨어진다

 

 

 

자식 노드 탐색 

자식 노드를 탐색 하기 위한 프로퍼티들

 

<ul id="fruits">
	<li class="apple">Apple</li>
    	<li class="banana">Banana</li>
    	<li class="orange">Orange</li>
</ul>

<script>
const fruits = document.getElementById('fruits');

console.log(fruits.childNodes);
// 자식이 구성하고 있는 모든 노드를 호출한다

console.log(fruits.children);
// 자식이 구성하고 있는 HTML 요소만 출력 [li.apple, li.banana, li.orange]

console.log(fruits.firstChild);
// 첫번째 자식 노드 탐색 #text 텍스트 노드 반환

console.log(fruits.lastChild);
// 마지막 자식 노드 탐색 #text 텍스트 노드 반환

console.log(fruits.firstElementChild); 
// li.apple 반환 , 요소 노드만 반환

console.log(fruits.lastElementChild); 
// li.orange 반환 , 요소 노드만 반환
</script>

 

자식 노드 존재 확인

자식 노드 존재 확인 코드

console.log(fruits.hasCildNodes());
// true 근데 text요소 확인 하는 것

console.log(fruits.childElementCount)
// 이렇게 사용해야지 텍스트 노드가 아닌 요소 노드 확인

 

부모 노드 탐색

console.log(banana.parentNode);
// ul#fruits

 

형제 노드 탐색

const fruits = document.getElementById('fruits');

const { firstChild } = $fruits;
console.log(firstChild); // #text;

nextSibling
previousSibling
firstElementChild
nextElementSibling
previousElementSibling

• 여러 종류가 있으며  Element가 적혀있다면 요소 노드를 반환하고
• Element가 없다면 요소 노드 혹은 텍스트 노드를 반환할 수 있다.

 

노드 정보 취득

console.log(document.nodeType); // 9
console.log(document.nodeName); // #document

• 이렇듯 nodeType을 사용하면 1, 3, 9 중의 하나의 숫자를 반환하고
  • ELEMENT     노드는 1
  • TEXT           노드는 3
  • DOCUMENT 노드는 9
• nodeName 사용하면 태그이름, #text, #document 중에 하나를 반환한다

 

요소 노드의 텍스트 조작

 nodeValue

• 지금까지 본건 탐색, 정보 확인 등 읽기 전용 프로퍼티
• nodeValue는 setter 가 가능한 프로퍼티 이다. 즉, 노드 객체 값을 반환 ( 텍스트 노드만 )
• document, Element 노드에 nodeValue 참조하면 null 반환한다. ( 딱봐도 변환할 수 없는 것들 )
• 왜? 노드 객체의 값이란 텍스트라서

<div id="foo"> Hello </div>

<script>
	const textNode = document.getElementById('foo').firstChild;
    // 자식 노드의 텍스트 노드를 획득한 후
    
    textNode.nodeValue = 'World';
    
    console.log(textNode.nodeValue); // World

</script>

이렇게 텍스트를 변경할 수 있다.

 

textContent

textContent 프로퍼티는 요소 노드의 텍스트와 모든 자손 노드의 텍스트를 취득, 변경할 수 있음

<div id="foo">Hello
	<span> World!</span>
</div>

document.getElementById('foo').textContent;
// Hello World!

• nodeValue로 Hello World를 출력하려면 코드가 길어지지만 ( 자식 노드마다 하나씩 늘어남 )
• 부모와 자식간에 텍스트 노드만을 뽑아내고 싶으면 간결하게 textContent 사용하면 된다.
• 알아서 파싱도 된다. 
• 또한 innerText 프로퍼티와 굉장히 유사하지만 innerText는 css에 순종적이고 css를 고려해야 하므로 textContent보다 느리다.

 

다음은 DOM 조작을 공부해볼것이다.

끝