HTML - 참조값으로 접근하는 DOM의 노드 탐색 기능
- 프로그래밍/HTML, CSS
- 2021. 11. 30.
DOM(Docuemnt Object Model)은 document 내의 노드(Node) 탐색을 위해 몇 가지 편의 기능을 제공합니다. 오늘은 그중에서 다른 노드에 대 참조를 사용하는 부분에 대해 알아보려고 합니다. 여기서 중요한 점은 참조를 기반한 DOM의 탐색은 element 뿐만 아니라 text와 comment를 포함한다는 사실입니다. 오해하기 쉬운 DOM 노드 탐색의 사실과 불편하지 않게 노드 탐색을 할 수 있는 방법에 대해 알아보겠습니다.
불편한 DOM의 노드 탐색 결과
오해까지는 아니지만 처음 DOM의 노드 탐색을 사용하는 경우에 이상하게 여길 수 있는 부분이 있습니다. 바로 참조값을 이용한 접근인데요. 참조를 사용한 대표적으로는 parentNode, firstChild, lastChild, nextSibling, previousSibling가 있습니다. 어떤 부분이 이상하게 여겨질 수 있는지 예제 코드를 통해 확인해보도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul><!-- comment -->
<li id="one">1</li>
<li id="two">2</li>
<!-- comment -->
</ul>
</body>
<script>
const ul = document.querySelector('ul');
console.log(ul.parentNode.nodeName);
console.log(ul.firstChild.nodeName);
console.log(ul.lastChild.nodeName);
console.log(ul.querySelector('#one').nextSibling.nodeName);
console.log(ul.querySelector('#two').previousSibling.nodeName);
</script>
</html>올바른 이해를 돕기 위해 parentNode, firstChild, lastChild, nextSibling, previousSibling를 사용하는 예제 코드를 만들어보았습니다. 예제의 console.log()는 어떤 값을 화면에 출력할까요? 예제 코드를 실행하면 확인할 수 있는 결과는 다음과 같습니다.
DOM의 노드 탐색에 익숙하지 않다면, parentNode를 제외하고 생각과는 다른 결과를 확인하실 수 있습니다. 만약 예측했던 결과와 실행 결과가 다르다면 그 이유는 DOM의 탐색은 element 노드만 아니라 text 노드, comment 노드를 포함한다는 사실 때문입니다.
편안하고 DOM의 노드 탐색 결과
그렇다면 예측이 가능한 결과를 사용하게 해 줄 수 있는 방법은 없을까요? 편하게 DOM의 노드를 탐색하고 싶은데 말이죠.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul><!-- comment -->
<li id="one">1</li>
<li id="two">2</li>
<!-- comment -->
</ul>
</body>
<script>
const ul = document.querySelector('ul');
console.log(ul.firstElementChild.nodeName);
// LI
console.log(ul.lastElementChild.nodeName);
// LI
console.log(ul.querySelector('#one').nextElementSibling.nodeName);
// LI
console.log(ul.querySelector('#two').previousElementSibling.nodeName);
// LI
</script>
</html>우리가 평상시 익숙했던 결과를 확인하는 방법은 어렵지 않습니다. 바로 firstElementChild, lastElementChild, nextElementSibling, previousElementSibling와 같이 element 노드를 기준으로 참조하는 방식을 선택하면 됩니다.
예제로 사용한 코드는 첨부파일로도 제공하니 필요하신 분은 다운로드해서 사용하시면 됩니다.
끝맺음
DOM의 노드를 탐색하는 경우 기대했던 결과가 나오지 않는다면 이상적이지 않은 결과일 뿐, element 노드 기준이 아니라 text 노드, comment 노드를 포함했기 때문일 수 있습니다.
'프로그래밍 > HTML, CSS' 카테고리의 다른 글
| CSS - 스타일시트의 최신 버전은 왜 3이 끝일까? [ CSS Level 3 ] (2) | 2021.08.24 |
|---|---|
| HTML - 회원가입 양식 템플릿 만들기 기본편 with HTML5 (0) | 2021.08.16 |
| HTML - <a> anchor 태그와 href를 알아보자 (0) | 2021.07.22 |
| HTML - Form을 이해하고 사용하자 (0) | 2021.07.19 |
| CSS - 스타일시트란 무엇일까? (1) | 2021.06.30 |