부모 노드 접근
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;
출처: 코딩앙마 유튜브
'Dev > JAVASCRIPT' 카테고리의 다른 글
Javascript JS DOM & EVENT #1 노드에 접근하기 (0) | 2024.02.01 |
---|---|
Javascript JS 제네레이터 (generator) (0) | 2024.02.01 |
Javascript JS async / await (0) | 2024.02.01 |
Javascript JS 콜백함수 (callback) (0) | 2024.02.01 |
Javascript JS 클래스(class) (1) | 2024.01.31 |