Javascript JS DOM & EVENT #2 부모, 자식, 형제 노드

부모 노드 접근

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

• 모든 부모 노드 - red.parentNode;
• html요소인 모든 부모 노드 - parentElement;

 

자식 노드 접근

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

• 모든 자식 노드 리스트 - ul.childNodes;
• html요소인 자식 노드 리스트 - ul.children;
• 첫번째 자식 노드 - ul.firstChild;
• 마지막 자식 노드 - ul.lastChild;
• 첫번째 html요소인 자식 노드 - ul.firstElementChild;
• 마지막 html요소인 자식 노드 - ul.lastElementChild;

형제 노드 접근

const blue = document.getElementById('id');

• 이전 형제 노드 - blue.previousSibling;
• 다음 형제 노드 - blue.nextSibling;
• 이전 형제 노드중 html요소인 노드 - blue.previousElementSibling;
• 다음 형제 노드중 html요소인 노드 - blue.nextElementSibling;

출처: 코딩앙마 유튜브