처음 배우는 JavaScript 강의. 4주차: DOM 조작과 이벤트 (1) DOM (Document Object Model) 기본

DOM (Document Object Model) 이해

DOM은 HTML 및 XML 문서의 프로그래밍 인터페이스입니다. 웹 페이지의 모든 내용을 객체로 표현하여, 프로그래밍 언어가 문서 구조, 스타일 및 내용을 읽고 조작할 수 있도록 해줍니다. JavaScript를 통해 DOM을 조작하면, 문서의 동적 변경이 가능해집니다—즉, 웹 페이지가 로드된 후에 사용자의 상호작용에 따라 내용을 동적으로 변경할 수 있습니다.

DOM 요소 선택하기

웹 페이지의 요소를 선택하는 것은 DOM 조작의 첫 단계입니다. JavaScript는 다양한 메소드를 제공하여 요소를 쉽게 선택할 수 있습니다.

 

getElementById : ID를 사용하여 단일 요소를 선택합니다.

<div id="intro">Welcome to JavaScript!</div>
<script>
  const element = document.getElementById('intro');
  console.log(element.textContent);  // "Welcome to JavaScript!"
</script>

 

getElementsByClassName : 클래스 이름을 사용하여 요소의 배열을 선택합니다.

<div class="item">Item 1</div>
<div class="item">Item 2</div>
<script>
  const items = document.getElementsByClassName('item');
  for (let item of items) {
    console.log(item.textContent);  // "Item 1", "Item 2"
  }
</script>

 

getElementsByTagName : 태그 이름을 사용하여 요소의 배열을 선택합니다.

<p>First paragraph.</p>
<p>Second paragraph.</p>
<script>
  const paragraphs = document.getElementsByTagName('p');
  for (let p of paragraphs) {
    console.log(p.textContent);  // "First paragraph.", "Second paragraph."
  }
</script>

 

querySelector : CSS 선택자를 사용하여 첫 번째 요소를 선택합니다.

<div class="item">First Item</div>
<div class="item">Second Item</div>
<script>
  const firstItem = document.querySelector('.item');
  console.log(firstItem.textContent);  // "First Item"
</script>

 

querySelectorAll : CSS 선택자를 사용하여 모든 요소를 선택합니다.

<ul>
  <li class="entry">Entry 1</li>
  <li class="entry">Entry 2</li>
</ul>
<script>
  const entries = document.querySelectorAll('.entry');
  entries.forEach(entry => {
    console.log(entry.textContent);  // "Entry 1", "Entry 2"
  });
</script>

 

DOM 요소 조작하기

요소를 선택한 후에는, 텍스트 콘텐츠의 변경, 스타일 조정 및 속성 수정 등 다양한 방식으로 요소를 조작할 수 있습니다.

 

텍스트 변경

const element = document.getElementById('intro');
element.textContent = "Hello, changed world!";

 

스타일 조정

const element = document.getElementById('intro');
element.style.color = 'red';  // 텍스트 색상을 빨간색으로 변경

 

속성 설정

const link = document.querySelector('a');
link.setAttribute('href', 'https://www.example.com');

 

이러한 기초적인 DOM 조작 방법을 이해하고 사용하는 것은 웹 개발에서 필수적인 기술입니다. 실제 웹 페이지에서 다양한 요소를 동적으로 변경할 수 있는 능력은 웹 애플리케이션의 사용자 경험을 획기적으로 개선할 수 있습니다. 다음 강의에서는 이벤트 리스너를 추가하여 사용자의 상호작용에 응답하는 방법을 배울 예정입니다.