DOM을 이용하면 자바스크립트로 웹 문서를 자유롭게 다룰 수 있다고 했을 때,
하지만 웹 문서를 수정하거나 새로운 콘텐츠를 추가,삭제 하려면
가장 먼저 다루고자 하는 노드를 접근하여야 한다.
일단 원하는 태그를 선택하는 가장 기본적인 방법은 document 객체의 메소드를 활용하는 것이라 했을 때,
▼ content라는 id 값을 가진 태그 콘솔에 출력하기
// DOM 트리 접근하기
const myTag = document.querySelector('#content')
console.log(myTag);
위와 같이 document 객체의 메소드를 활용하여 태그를 선택했다면
DOM 트리의 부모, 자식, 형제 관계를 활용해서 태그를 선택 하는 법을 알아보자.
DOM Tree 접근하기(1) - 자식 요소 노드
자식이라는 말 그대로 myTag의 children이라는 프로퍼티에 접근하려할 때 기본 문법은 다음과 같다.▼
//자식 요소 노드
console.log(myTag.children);
이렇게 HTMLCollection이 출력되는데,
HTML의 content에 네 개의 자식 요소가 선택된 것이다.
또한 당연히 대괄호 표기법으로 요소를 선택하는 것도 가능하다.▼
//자식 요소 노드 대괄호 표기법으로 요소 선택
console.log(myTag.children[1]);
이렇게 1번 인덱스의 요소인 list-1 ul태그가 선택된 것을 확인 할 수있다.
이렇게 children 프로퍼티는 해당 요소의 자식 요소를 담고 있다.
이뿐만 아니라 firstElementChild와 lastElemnetChild에 접근해보면
해당 요소의 자식들 중에서 가장 첫 번째 요소와 가장 마지막 요소에 쉽게 접근할 수 있다.
▼ firstElementChild / lastElemnetChild
//firstElementChild, lastElemnetChild
console.log(myTag.firstElementChild);
console.log(myTag.lastElementChild);
DOM Tree 접근하기(2) - 부모 요소 노드
부모 요소 노드에 접근하는 방법은 parentElement 프로퍼티를 활용한다.
HTML 구조를 살펴보면 content 태그의 부모 태그는body 태그인 것을 확인 할 수 있는데,
실행해보면 body 태그가 선택된 것을 확인할 수 있다.
▼ parentElement
// 부모 요소 노드
console.log(myTag.parentElement);
요소 선택은 이미 해봤으니 넘어가겠다.
DOM Tree 접근하기(3) - 형제 요소 노드
형제 요소의 경우에는 '이전 형제'와 '다음 형제' 두 가지로 구분 된다.
이전 형제는 'previousElementSibling' , 다음 형제는 'nextElementSibling' 프로퍼티를 활용한다.
(previous는 형용사로 '이전의' 라는 뜻을 가짐 / Sibling은 명사로 '형제자매' 라는 뜻을 가짐)
▼ 형제 요소 노드 (previousElementSibling / nextElementSibling)
//형제 요소 노드
console.log(myTag.previousElementSibling); //이전
console.log(myTag.nextElementSibling); // 다음
HTML 문서를 보면 content 라는 id를 가진 태그에 이전 형제는 없기때문에 null이 출력되고
다음 형제는 script 태그가 출력 되는 것을 확인할 수 있다.
만약에 querySelector에서 content가 아니라 list-1로 바꿔준다면 일단 myTag는 list-1이 되며,
이전 형제는 title-1, 다음 형제는 title-2가 될 것이며
부모 요소는 content 태그가 되고
자식 요소의 경우에는 1번 인덱스 기준 'British Shorthair'
첫 번째 요소는 'Ragdoll' , 마지막 요소는 'Russian Blue' 가 출력 될 것이다.
이런식으로 직접 기준 되는 태그를 수정해서 각 요소들의 출력 결과를 예측하여 공부해보는 것도 좋다.
참고로 이 모든 프로퍼티들은 서로 연결해서 탐색할 수도 있다.
▼ ex) myTag.parentElement.lastElementChild
//프로퍼티 연결 가능
console.log(myTag.parentElement.lastElementChild);
content의 부모 요소인 body의 마지막 요소 이므로 script 태그에 접근할 수 있다
이렇게 DOM트리의 부모, 자식, 형제 관계를 이용하여
다양한 방식으로 요소에 접근하였다.
이러한 방법들을 활용하여 원하는 요소 노드에 다양한 방식으로 접근할 수 있다.
중요한 챕터인 만큼 한번 정리해보자
(정리) 요소 노드에 대한 이동 프로퍼티
▼ 요소 노드를 이동시킬 때 사용하는 프로퍼티
(정리 / +α) 모든 노드에 대한 이동 프로퍼티
▼ 다른 노드들을 이동하고 싶을 때 사용하는 프로퍼티
만약에 요소 노드 말고 텍스트 노드에 접근하고 싶을 때의 등 다른 노드들을 이동하고 싶은 경우에
아래와 같은 프로퍼티들을 활용할 수도 있다.
대부분 요소 노드의 프로퍼티 이름에서 Element라는 단어만 빠져있는데
사실 모든 노드가 공통적으로 갖고있는 이 프로퍼티들은 특별한 경우를 제외하면 자주 사용되진 않는다.
그 이유는 DOM 트리가 만들어질 때 생겨나는 노드들을 좀 더 자세히 살펴보면 알 수 있다 ▼
브라우저가 HTML 코드를 해석할 때 각 코드들은 상황에 맞게 node를 생성하고 DOM 트리를 구성한다.
HTML 태그는 요소 노드가 되고
문자들은 텍스트 노드가 되고
주석도 주석 노드로 DOM 트리에 반영된다.
예를 들어 이런 코드는 다음과 같은 DOM 트리를 구성하는데, ▼
<!DOCTYPE HTML>
<html>
<head>
<title>JavaScript</title>
</head>
<body>
I Love JavaScript
<!-- I Love HTML -->
</body>
</html>
그런데 텍스트 노드 중에서 붉은 테두리가 있는 부분을 통해 알 수 있듯
태그와 태그사이에 줄 바꿈과 들여쓰기로 인한 띄어쓰기도
텍스트 노드(Text라고 표시된 부분)로 생성된 모습을 확인할 수 있다.
지금 예시는 간단하기 때문에 어느 정도 DOM 트리를 예상할 수 있지만,
조금만 더 코드가 복잡하거나 혹은 코드의 스타일이 일정하지 않은 경우에는
이런 줄 바꿈과 들여쓰기로 인해 생성된 텍스트 노드의 존재를 파악하기가 쉽지 않을 수 있다.
그래서 방금 본, 모든 노드가 공통으로 갖고 있는 프로퍼티를 활용한다면,
예상치 못한 텍스트 노드를 선택하게 되어 의도하지 않은 결과를 만들어 낼 가능성이 커지게 된다.
일반적으로 다루고자하는 대상은 태그이며,
자바스크립트로 웹 문서를 다룰 때는 아무래도 텍스트 노드보다 요소 노드를 다룰 경우가 더 많을 것 이다.
만약 의도하는 대상이 HTML 태그라면 요소 노드에 대한 이동 프로퍼티를 활용하는 것이 안정적일 것이며
상황에 따라서 요소 노드가 아닌 노드들을 이동시켜야할 수도 있으니
모든 노드가 공통으로 갖는 속성들도 기억해두는 것이 좋다.
★GitHub 주소 (DOM tree 접근)
https://github.com/SeopE9611/JavaScript_soloPlay/tree/main/interactive_JS/06.DOM%EC%A0%91%EA%B7%BC
JavaScript_soloPlay/interactive_JS/06.DOM접근 at main · SeopE9611/JavaScript_soloPlay
Contribute to SeopE9611/JavaScript_soloPlay development by creating an account on GitHub.
github.com
★Notion 주소 (DOM tree 접근 대상 찾기)
https://purrfect-gargoyle-935.notion.site/DOM-tree-11be9530b3e180e284d9de4efdeca501?pvs=4
DOM tree 대상 찾기 | Notion
<!DOCTYPE html> <html lang=
purrfect-gargoyle-935.notion.site
'JS' 카테고리의 다른 글
| (8) Interactive JavaScript - 요소 노드 추가 (0) | 2024.10.11 |
|---|---|
| (7) Interactive JavaScript - 요소 노드 프로퍼티 (0) | 2024.10.10 |
| (5) Interactive JavaScript - Document Object Model(DOM) (0) | 2024.10.09 |
| (4) Interactive JavaScript - window 객체 (0) | 2024.10.08 |
| (1)~(3) Interactive JavaScript 내용 정리 (0) | 2024.10.08 |