DOM&EVENT, 부조, 자식, 형제 노드 _ 코딩앙마

유튜브 코딩앙마 영상을 보고 정리한 내용입니다.

아래와 같은 방법으로 부모노드에게 접근할 수 있습니다.

const red = document.getElementById('red');
// id 가 red 인 태그 선택하고

red.parentNode;
// 부모노드 선택

red.parentElement; 
// 이렇게 요소만 접근도 가능

document.documentElement.parentNode; 
// document 반환

document.documentElement.parentElement;
// nuul 반환. 부모 노드에게 엘리먼트가 없으므로

노드의 타입 12개 정도 되는데 주로 사용하는 타입은 아래와 같습니다.

Element 요소
Attribute 속성
Text 텍스트
Comment 주석
Document <>
..

자식요소는 아래처럼 확인할 수 있습니다.

const ul = document.getElementById('color');

ul.childNodes; - 자식 노드 (안의 요소, 텍스트 등등 따로) 반환
ul.children; - html 요소만 반환 li 태그들의 데이터 집합으로.

ul.firstChild; // 첫번째 노드의 모든 타입
ul.lastChild; // 마지막 노드의 모든 타입

ul.firstElementChild; // 첫번재 요소만
ul.lastElementChild; // 마지막 요소만

형재 노드는 이전과 이후로 선택할 수 있습니다.

blue.previousSibling; 
blue.nextSibling;
// 이전과 이후 요소의 모든 타입

blue.prebiousElementSibling; 
blue.nextElementSibling; 
// 해당 요소만 반환

실무에서는 노드보다는 요소에 접근하는 방식을 자주 사용합니다.