[javascript] DOM 탐색 요소 위치 이동하기

12 Dec 2023

javascript

HTML 문서를 다루는 웹 개발에서 DOM(Document Object Model) 탐색은 매우 중요합니다. 요소를 찾고 조작하려면 원하는 위치로 이동해야 합니다. 이번 포스트에서는 DOM을 탐색하면서 요소의 위치를 이동하는 방법에 대해 알아보겠습니다.

DOM 요소 탐색

DOM을 탐색하는 가장 기본적인 방법은 querySelector와 querySelectorAll 메서드를 사용하는 것입니다. 이런 메서드들은 CSS 선택자를 사용하여 요소를 찾을 수 있게 해줍니다. 이를 통해 원하는 요소를 찾아간 후에는 DOM을 기반으로 해당 요소의 위치를 이동할 수 있습니다.

요소 위치 이동

DOM에서 요소의 위치를 이동하는 방법은 다양합니다. 예를 들어, parentNode 속성을 사용하여 부모 요소로 이동하거나, nextSibling 또는 previousSibling 속성을 사용하여 형제 요소로 이동할 수 있습니다.

const childElement = document.querySelector('.child');
const parentElement = childElement.parentNode;
const nextSiblingElement = childElement.nextSibling;
const previousSiblingElement = childElement.previousSibling;

또한 firstChild와 lastChild 속성을 사용하여 첫 번째 자식 요소와 마지막 자식 요소로 이동할 수도 있습니다.

const firstChildElement = parentElement.firstChild;
const lastChildElement = parentElement.lastChild;

예제

아래는 실제 HTML 문서를 이용하여 요소를 탐색하고 위치를 이동하는 예제 코드입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM 요소 위치 이동 예제</title>
</head>
<body>
  <div id="container">
    <p class="child">첫 번째 단락</p>
    <p>두 번째 단락</p>
  </div>

  <script>
    const childElement = document.querySelector('.child');
    const parentElement = childElement.parentNode;
    const nextSiblingElement = childElement.nextSibling;
    const previousSiblingElement = childElement.previousSibling;
    const firstChildElement = parentElement.firstChild;
    const lastChildElement = parentElement.lastChild;

    console.log(parentElement);
    console.log(nextSiblingElement);
    console.log(previousSiblingElement);
    console.log(firstChildElement);
    console.log(lastChildElement);
  </script>
</body>
</html>

위 예제 코드는 childElement를 사용하여 요소를 선택하고, 다양한 방법으로 해당 요소의 위치를 이동하고 콘솔에 출력하는 내용을 담고 있습니다.

이상으로 DOM을 탐색하면서 요소의 위치를 이동하는 방법에 대해 알아보았습니다. DOM을 효율적으로 다룰 수 있도록 이러한 메서드와 속성들을 활용하는 것이 중요합니다.