처음 배우는 JavaScript 강의. 4주차: DOM 조작과 이벤트 (2) 요소 선택, 생성, 수정

 

웹 페이지의 동적인 행동을 구현하려면, 문서의 요소들을 선택, 생성 및 수정하는 방법을 알아야 합니다. 이 과정에서 DOM (Document Object Model)은 중심적인 역할을 하며, JavaScript를 통해 이러한 조작을 쉽게 할 수 있습니다.

 

요소 선택하기

웹 페이지에서 요소를 선택하는 것은 DOM 조작의 시작점입니다. 앞서 언급한 메소드 외에도 다양한 방법으로 요소를 선택할 수 있습니다.

 

예제: querySelector와 querySelectorAll

 

CSS 선택자를 활용하여 요소를 선택할 수 있습니다. 이 방법은 매우 강력하며 유연합니다.

<div id="content">
  <p class="message">Hello, this is a message.</p>
  <p class="message">Hello, this is another message.</p>
</div>

<script>
  // 첫 번째 <p> 태그 선택
  const firstMessage = document.querySelector('#content .message');
  console.log(firstMessage.textContent);  // "Hello, this is a message."

  // 모든 <p> 태그 선택
  const allMessages = document.querySelectorAll('#content .message');
  allMessages.forEach(message => {
    console.log(message.textContent);
  });
</script>

 

요소 생성하기

새로운 요소를 생성하는 것은 웹 페이지에 동적으로 내용을 추가할 때 필수적입니다.

예제: 요소 생성 및 추가

 

<div id="container"></div>

<script>
  // 새로운 <p> 요소 생성
  const newParagraph = document.createElement('p');
  newParagraph.textContent = 'This is a new paragraph.';

  // 생성된 <p> 요소를 #container div에 추가
  const container = document.getElementById('container');
  container.appendChild(newParagraph);
</script>

 

요소 수정하기

선택한 요소의 내용을 변경하거나 스타일을 수정할 수 있습니다.

 

예제: 요소 내용 및 스타일 변경

<p id="greeting">Hello, World!</p>

<script>
  const greeting = document.getElementById('greeting');
  // 텍스트 변경
  greeting.textContent = 'Updated Hello, World!';

  // 스타일 변경
  greeting.style.color = 'blue';
  greeting.style.fontSize = '20px';
</script>

 

요소의 속성과 이벤트 처리

요소의 속성을 설정하거나 변경하고, 이벤트 리스너를 추가하여 사용자의 동작에 반응할 수 있습니다.

 

예제: 속성 설정 및 이벤트 리스너 추가

<a href="#" id="myLink">Visit Google</a>

<script>
  const myLink = document.getElementById('myLink');
  
  // 속성 변경
  myLink.setAttribute('href', 'https://www.google.com');

  // 클릭 이벤트 리스너 추가
  myLink.addEventListener('click', function(event) {
    event.preventDefault();  // 기본 동작 방지
    console.log('Link clicked!');
    window.location.href = this.getAttribute('href');
  });
</script>

window.location.href = this.getAttribute('href');

 

이 코드는 현재 브라우저 창의 위치(URL)을 변경하는 작업을 수행합니다. 여기서 사용된 JavaScript 명령어들을 하나씩 살펴보면:

1. window.location.href: window 객체는 브라우저 창을 나타냅니다. location 객체는 현재 페이지의 주소(URL)와 관련된 다양한 정보와 메서드를 포함하고 있습니다. href 속성은 해당 위치 객체의 URL을 문자열로 나타냅니다. 이 속성에 새로운 URL을 할당하면, 브라우저는 할당된 URL로 페이지를 리다이렉트(재이동)합니다.
2. this.getAttribute('href'): this 키워드는 이벤트가 발생한 요소, 이 경우 <a> 태그를 참조합니다. getAttribute('href') 메서드는 요소의 href 속성 값, 즉 <a> 태그의 href 속성에 설정된 URL을 문자열로 반환합니다. 예를 들어, Visit Google에서 this.getAttribute('href')는 "https://www.google.com"을 반환합니다.

따라서 window.location.href = this.getAttribute('href'); 라인은 클릭된 링크(<a> 태그)의 href 속성 값으로 페이지를 리다이렉트합니다. 이는 JavaScript를 사용하여 기본 링크 동작을 향상시키거나 수정하기 위해 사용됩니다. 특히, 이벤트 리스너 내에서 추가적인 로직을 실행한 후 페이지를 이동시킬 때 유용합니다. 예를 들어, 사용자의 행동을 로깅하거나 확인 메시지를 표시한 후에 페이지를 이동시킬 수 있습니다.

 

이렇게 요소를 선택, 생성, 수정하는 기본적인 DOM 조작 방법을 통해 웹 페이지의 구조와 내용을 동적으로 제어할 수 있습니다. 이를 활용하면, 사용자의 상호작용에 따라 페이지를 실시간으로 업데이트하거나 변형시킬 수 있어 웹 애플리케이션의 가능성이 크게 확장됩니다. 다음 강의에서는 이벤트 처리에 대해 더 깊이 다룰 예정입니다.