#13 자바스크립트 DOM 선택

DOM 선택이란 무엇일까요?

DOM(Document Object Model)은 HTML 문서를 객체화하여 자바스크립트로 조작할 수 있도록 만든 모델입니다. DOM 선택이란, 이러한 DOM 트리에서 원하는 요소를 찾아내는 작업을 의미합니다. 선택한 요소의 내용을 변경하거나 스타일을 조작하는 등 다양한 작업을 수행할 수 있습니다.

DOM 선택 방법

자바스크립트는 다양한 방법으로 DOM 요소를 선택할 수 있도록 제공합니다. 각 방법은 선택하려는 요소의 특징에 따라 적절하게 사용됩니다.

1. getElementById()

• 설명: 지정된 ID를 가진 요소 하나만 반환합니다. ID는 문서 내에서 유일해야 합니다.
• 예시:

  const myElement = document.getElementById('myId');
  

   

   

2. getElementsByTagName()

• 설명: 지정된 태그 이름을 가진 모든 요소를 HTMLCollection 형태로 반환합니다.
• 예시:

  const allParagraphs = document.getElementsByTagName('p');
  

   

   

3. getElementsByClassName()

• 설명: 지정된 클래스 이름을 가진 모든 요소를 HTMLCollection 형태로 반환합니다.
• 예시:

  const elementsWithClass = document.getElementsByClassName('myClass');
  

   

   

4. querySelector()

• 설명: CSS 선택자를 이용하여 첫 번째 일치하는 요소를 반환합니다.
• 예시:

  const firstDiv = document.querySelector('div');
  const specificElement = document.querySelector('#myId.myClass');
  

   

   

5. querySelectorAll()

• 설명: CSS 선택자를 이용하여 모든 일치하는 요소를 NodeList 형태로 반환합니다.
• 예시:

  const allDivs = document.querySelectorAll('div');
  

   

   

선택한 요소 조작하기

 

// 요소의 내용 변경
myElement.textContent = '새로운 텍스트';

// 요소의 스타일 변경
myElement.style.color = 'red';

// 요소에 이벤트 추가
myElement.addEventListener('click', function() {
  // 클릭 시 실행될 코드
});

 

 

DOM 선택 예시

HTML

<div id="myDiv" class="container">
  <p>Hello, world!</p>
  <button class="myButton">클릭</button>
</div>

 

JavaScript

// ID로 선택
const myDiv = document.getElementById('myDiv');

// 클래스로 선택
const buttons = document.getElementsByClassName('myButton');

// CSS 선택자로 선택
const firstParagraph = document.querySelector('p');
const allDivs = document.querySelectorAll('div');

 

 

왜 DOM 선택이 중요할까요?

• 동적 웹 페이지 구현: 사용자의 행동에 따라 웹 페이지의 내용을 동적으로 변경할 수 있습니다.
• 웹 애플리케이션 개발: 복잡한 웹 애플리케이션을 구축하는 기반이 됩니다.
• 프론트엔드 라이브러리/프레임워크 학습: React, Vue, Angular 등 인기 있는 프론트엔드 라이브러리/프레임워크의 기본 원리를 이해하는 데 필수적입니다.