DOM 노드 선택하기: Document 객체 이해 및 HTML 요소 찾기

웹 페이지의 내용과 구조를 조작하고 다루는 것은 웹 개발의 핵심입니다. 이를 가능하게 하는 기술 중 하나가 Document Object Model (DOM)입니다. 이 글에서는 DOM의 핵심 개념인 Document 객체를 이해하고 HTML 요소를 선택하는 방법에 대해서 알아보겠습니다.

1. Document 객체

Document 객체는 웹 페이지의 DOM 트리를 대표하는 객체로 모든 HTML 요소와 속성을 포함하고 있습니다. Document 객체를 통해 웹 페이지의 구조와 내용을 읽고 수정할 수 있습니다. 일반적으로 웹 페이지를 브라우저에서 로드할 때 브라우저는 페이지의 HTML 코드를 해석하여 DOM 트리를 생성합니다.

1. 예제 코드

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>DOM Tree</title>
</head>
<body>
    <h1>BlueShare 블로그</h1>
    <a href="https://blueshare.tistory.com" target="_blank">Link</a>
</body>
</html>

2. DOM 트리

2. 노드 선택하기

HTML 요소를 선택하려면 먼저 Document 객체에서 해당 요소를 찾아야 합니다. 이를 위해 다양한 메서드를 사용할 수 있습니다.

1. 메서드

메서드	설명
getElementById(id)	주어진 ID를 가진 요소를 반환합니다.
getElementsByTagName(tagName)	주어진 태그 이름을 가진 모든 요소를 반환합니다.
getElementsByClassName(className)	주어진 클래스 이름을 가진 모든 요소를 반환합니다.
querySelector(cssSelector)	주어진 CSS 선택자에 일치하는 첫 번째 요소를 반환합니다.
querySelectorAll(cssSelector)	주어진 CSS 선택자에 일치하는 모든 요소를 반환합니다.

2. 예제 코드

<!DOCTYPE html>
<html lang="ko">
<head>
     <meta charset="UTF-8">
     <title>DOM 노드 선택 예제</title>
</head>
<body>
     <h1 id="title">BlueShare 블로그</h1>
     <p class="content">IT 정보</p>
     <p class="content">IT 공부</p>

     <script>

     // 주어진 ID와 일치하는 요소를 선택합니다.
     const idtitle = document.getElementById('title');
     console.log(idtitle);

     // 주어진 클래스와 일치하는 모든 요소를 선택합니다.
     const classAllContent = document.getElementsByClassName('content');
     console.log(classAllContent);
     console.log(classAllContent[0]);   // 요소를 1개만 선택

     // 주어진 태그 이름과 일치하는 모든 요소를 선택합니다.
     const tagAllContent = document.getElementsByTagName('p');
     console.log(tagAllContent);
     console.log(tagAllContent[1]);   // 요소를 1개만 선택

     // 주어진 CSS 선택자와 일치하는 첫 번째 요소를 선택합니다.
     const cssContent = document.querySelector('.content');
     console.log(cssContent);

     // 주어진 CSS 선택자와 일치하는 모든 요소를 선택합니다.
     const cssAllContent = document.querySelectorAll('.content');
     console.log(cssAllContent);
     console.log(cssAllContent[0]);   // 요소를 1개만 선택

</script>
</body>
</html>

3. 실행 결과 화면