문서 객체 모델(Document Object Model) : DOM - (3) 탐색

연재되는 내용입니다.

 

 

3.3 DOM Traversing (탐색)

DOM Traversing

parentNode

• 부모 노드를 탐색한다.
• Return: HTMLElement를 상속받은 객체
• 모든 브라우저에서 동작

const elem = document.querySelector('#two');

elem.parentNode.className = 'blue';

부모노드 클래스명 변경

결과

firstChild ( firstElementChild ), lastChild ( lastElementChild )

• 자식 노드를 탐색한다.
• Return: HTMLElement를 상속받은 객체
• IE9 이상의 브라우저에서 동작

const elem = document.querySelector('ul');

// first Child
elem.firstChild.className = 'blue';
// last Child
elem.lastChild.className = 'blue';

자식노드 클래스명 변경

결과 ( 미작동 )

위 예제를 실행해 보면 예상대로 동작하지 않는다.

그 이유는 IE를 제외한 대부분의 브라우저들은 요소 사이의 공백 또는 줄바꿈 문자를 텍스트 노드로 취급하기 때문이다. 이것을 회피하기 위해서는 아래와 같이 HTML의 공백을 제거하거나 jQuery: .prev()와 jQuery: .next()를 사용한다.

<ul><li
  id='one' class='red'>Seoul</li><li
  id='two' class='red'>London</li><li
  id='three' class='red'>Newyork</li><li
  id='four'>Tokyo</li></ul>

또는 firstElementChild, lastElementChild를 사용할 수도 있다. 이 두가지 프로퍼티는 모든 IE9 이상에서 정상 동작한다.

const elem = document.querySelector('ul');

// first Child
elem.firstElementChild.className = 'blue';
// last Child
elem.lastElementChild.className = 'blue';

결과 : ( 두가지 방법 결과는 같음 )

자식노드 클래스명 변경

결과

hasChildNodes()

• 자식 노드가 있는지 확인하고 Boolean 값을 반환한다.
• Return: Boolean 값
• 모든 브라우저에서 동작

childNodes

• 자식 노드의 컬렉션을 반환한다. 텍스트 요소를 포함한 모든 자식 element를 반환한다.
• Return: NodeList (non-live)
• 모든 브라우저에서 동작

children

• 자식 노드의 컬렉션을 반환한다. 자식 요소 중에서 Element type 요소만을 반환한다.
• Return: HTMLCollection (live)
• IE9 이상의 브라우저에서 동작

const elem = document.querySelector('ul');

if (elem.hasChildNodes()) {
  console.log(elem.childNodes);
  // 텍스트 요소를 포함한 모든 자식 요소를 반환한다.
  // NodeList(9) [text, li#one.red, text, li#two.red, text, li#three.red, text, li#four, text]

  console.log(elem.children);
  // 자식 요소 중에서 Element type 요소만을 반환한다.
  // HTMLCollection(4) [li#one.red, li#two.red, li#three.red, li#four, one: li#one.red, two: li#two.red, three: li#three.red, four: li#four]
  [...elem.children].forEach(el => console.log(el.nodeType)); // 1 (=> Element node)
}

결과 :

자식 element 반환 결과

previousSibling, nextSibling

• 형제 노드를 탐색한다. text node를 포함한 모든 형제 노드를 탐색한다.
• Return: HTMLElement를 상속받은 객체
• 모든 브라우저에서 동작

previousElementSibling, nextElementSibling

• 형제 노드를 탐색한다. 형제 노드 중에서 Element type 요소만을 탐색한다.
• Return: HTMLElement를 상속받은 객체
• IE9 이상의 브라우저에서 동작

const elem = document.querySelector('ul');

elem.firstElementChild.nextElementSibling.className = 'blue';
elem.firstElementChild.nextElementSibling.previousElementSibling.className = 'blue';

결과 :

형제 노드 클래스명 변경

결과

 

출처 및 참고 :

https://poiemaweb.com/js-dom

DOM | PoiemaWeb

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction

DOM 소개 - Web API | MDN