-
DOM - 노드의 관계를 통한 접근프론트엔드/DOM 2020. 10. 7. 04:57
DOM의 각 요소 노드에 접근하는 방법은 매우 다양하다.
기본 제공 메서드를 통해 'id', 'class', 'tagname'을 통해서 접근하는 방법이 가장 쉽다.
그리고 다음으로 많이 쓰이는 것은 노드의 관계를 이용한 접근 방법이다.
이게 무슨 이야기냐면 다음과 같다.
DOM은 트리 요소로 객체들이 구조화되어 있다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <ul> <li id="1">1번</li> <li id="2">2번</li> <li id="3">3번</li> <li id="4">4번</li> </ul> </body> </html>예를 들어 위의 코드의 요소 노드들의 상관 관계 구조도를 그리면 다음과 같다.
HTML 문서 구조상 위아래 관계의 노드는 부모 자식 관계를 맺고 있다.
그리고 동등한 관계의 노드는 형제 관계를 맺고 있다.
결국 노드든 DOM Tree 구조상 다른 노드와 부모, 형제 관계를 맺는다.
그리고 이러한 관계를 이용해 접근해줄 수 있는 프로퍼티가 제공된다.
이름
설명
parentNode
부모 노드를 객체를 반환한다
childNodes
모든 자식 노드의 객체를 반환한다
firstChild
첫번째 자식 노드의 객체를 반환한다
lastChild
마지막 자식 노드의 객체를 반환한다
nextSibling
다음 형제 노드의 객체를 반환한다
previousSibling
이전 형제 노드의 객체를 반환한다
위 그림의 경우 요소 노드들로만 구조도를 그렸다.
하지만 실제로는 저 구조도에 모든 텍스트노드, 어트리뷰트 노드까지 포함된다.
그렇다보니 실제로 코드를 쓰다보면 문제가 생기는 경우가 있다.
코드로 알아보자.
<!DOCTYPE html> <head> </head> <body> <ul> <li id="1">1번</li> <li id="2">2번</li> <li id="3">3번</li> <li id="4">4번</li> </ul> </body> <script> let test = document.querySelector('ul'); console.log(test); </script> </html>우선 <li> 태그를 자식으로 두고 있는 <ul> 태그를 선택한다음 그 내용을 인쇄하면 다음과 같다.
<ul> 태그가 <li> 태그들을 가지고 있는 모습을 볼 수 있다.
그렇다면 이제 <ul> 태그의 첫번째 자식인 'id'값이 '1'인 <li>를 선택해보자.
아마도 아래같이 하면 될 것이다.
<script> let test = document.querySelector('ul').firstChild; console.log(test); </script>실행하면 다음과 같은 결과가 나온다.
원래대로라면 <li> 태그가 나와야 하는데 뭔가 결과가 이상하다.
그렇다면 이번엔 ul 태그가 가진 모든 노드를 출력해보자.
<script> let test = document.querySelector('ul').childNodes; console.log(test); </script>
<ul> 태그 밑에는 <li> 요소 노드만 있는 줄 알았다.
하지만 실제 노드 단위로 선택시 텍스트 노드까지 전부 다 선택이 된다.
노드 단위로 선택할 경우에는 눈에 보이는 구조적인 요소 노드만 탐색하는 것이 아니다.
그 안의 텍스트 노드까지 포함하고 있는 것이다.
그렇다면 요소 노드들만 따로 탐색하려면 어떻게 해야할까?
요소 노드 탐색을 위한 프로퍼티는 따로 제공되고 있다.
이름
설명
parentElement
부모 요소 노드의 객체를 반환한다.
children
모든 자식 요소 노드의 객체를 반환한다.
firstElementChild
첫번째 자식 요소 노드의 객체를 반환한다
lastElementChild
마지막 자식 요소 노드의 객체를 반환한다
nextElementSibling
다음 형제 요소 노드의 객체를 반환한다
previousElementSibling
이전 형제 요소 노드의 객체를 반환한다
그럼 다시 돌아가서 <ul> 태그 밑의 첫번째 <li> 태그를 선택해보자.
<script> let test = document.querySelector('ul').firstElementChild; console.log(test); </script>
이제 요소 노드 단위로 선택이 됐다.
그렇다면 다음 2번 자식 요소 노드를 선택하려면 어떻게 해야될까?
기본 제공 프로퍼티만으로는 불가능하다.
<script> let test = document.querySelector('ul').firstElementChild.nextElementSibling; console.log(test); </script>그럴 때는 위의 코드처럼 조합하면 된다.
그렇다면 세번째 <li>는 어떻게 선택할까?
<script> let test = document.querySelector('ul').firstElementChild.nextElementSibling.nextElementSibling; console.log(test); let test2 = document.querySelector('ul').lastElementChild.previousElementSibling; console.log(test2); </script>위 코드와 같이 두 가지 방식으로 접근할 수 있다.
첫번째는 '첫번째 자식 요소 노드 선택.다음 요소 노드 선택.다음요소노드선택'
두번째는 '마지막 자식 요소 노드 선택.이전 요소 노드 선택'
이런식으로 조합을 해가면서 DOM 모델의 노드들을 선택해나가면 된다.
'프론트엔드 > DOM' 카테고리의 다른 글
DOM 조작 - 속성 노드의 생성, 수정, 삭제 2 (0) 2020.10.16 DOM 조작 - 속성 노드의 생성, 삭제 (0) 2020.10.16 DOM 조작 - 텍스트 노드에 대한 접근 / 수정 (0) 2020.10.13 DOM - 요소노드에 대한 접근 (0) 2020.10.07 DOM에 관해서 (0) 2020.10.07