[자바스크립트 js] DOM 트리 (Document Object Model) / 노드 (Node) / parentElement / previousElementSibling / nextElementSibling

안녕하세요.

디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.

 

이번 포스팅에서는 자바스크립트, 제이쿼리로 작업할 때 기본적으로 사용되는 내용들을 다룰 건데요.

개발자라면 기본적으로 알고 있어야 하는 개념들을 정리했습니다.

해당 포스팅에서는 Node를 자유자재로 선택하고 사용하는 방법에 대해 알아볼게요.

달달달 외우기 보다는 그저 텍스트를 읽고 이해하는 것만으로도 충분합니다!

 

지금부터는 가독성을 위해 문어체로 작성할게요.

 

 

 

  window.

• 전역객체 (Global Object). 브라우저 창을 대변하면서 자바스크림트에서 최상단에 존재하는 객체.
• 모든 객체는 사실 window의 자식객체.
• 객체를 만드는 것은 window 객체의 프로퍼티를 만드는 것과 같음.
• 어떤 프로퍼티나 메소드를 사용하든 결국 전역 객체 내부의 것이기 때문에 window.을 생략할 수 있음.

 

 

 

  DOM 트리

• DOM이란 Document Object Model의 약자로, 한국어로는 '문서 객체 모델'.
  간단하게 표현하면 웹 페이지에 나타나는 HTML 문서 전체를 객체로 표현한 것.
• html > header + body > 각 태그들을 나무에 비유.
• 각 객체를 노드(Node)라고 표현함.

 

 

 

  노드(Node) 종류

• 부모노드 Parent node
• 자식노드 Child node
• 형제노드 Sibling node

 

 

 

 

  노드(Node) 타입

• 요소노드 Element Node : 태그를 표현
• 텍스트노드 Text Node : 문자를 표현
  
  1. 일반적으로 요소 노드의 자식 노드가 됨.
  2. 따로 자식 노드를 가질 수 없어서, 나무의 잎에 비유하여 '잎 노드 leaf Node'라고 함.
• 노드 타입은 위 2개 타입을 포함해 12가지 타입이 있다. 대부분 위 두 노드만 사용.
  
  • 자세한 내용은 dom.spec.whatwg.org/#node

 

 

 

  노드(Node) 선택하기

const tooktak = document.querySelector('#아이디명');

 

 

 

 

  자식 요소 노드 선택

console.log(tooktak.children); // 해당 아이디의 전체 자식
console.log(tooktak.children[1]); // 대괄호 표기법으로 해당 인덱스의 자식만 선택 가능
console.log(tooktak.children.firstElementChild); // 첫번째 자식 요소
console.log(tooktak.childern.lastElementChild); // 마지막 자식 요소

 

 

 

 

  parentElement 부모 요소 노드 선택 (프로퍼티)

console.log(tootkak.parentElement);

 

 

 

 

  previousElementSibling / nextElementSibling 형제 요소 노드 선택

console.log(tooktak.previousElementSibling); // 해당 아이디의 전에 있는 아이디 선택console.log(tooktak.nextElementSibling); // 해당 아이디의 다음에 있는 아이디 선택

 

 

 

 

  노드끼리 연결해서 선택 가능

예) console.log(tooktak.parentElement.nextElementSibling); // 해당 아이디의 부모의 형제 요소