4-2. 브라우저를 위한 JS(DOM - 요소 선택, 조작, 이벤트 연결)

DOM (Document Object Model)

• DOM은 웹페이지의 구조를 객체로 표현한 모델
• 목적: 주로 웹페이지의 HTML 구조나 내용을 동적으로 변경해야 할 때 사용
• 일반적인 처리 순서:
  1. 요소 선택: document.querySelector등의 메서드를 사용해 요소를 선택하고 변수에 저장.
  2. 요소 조작 함수 정의: 변수에 저장된 요소에 대해 스타일, 텍스트, 구조 변경 등을 수행.
  3. 이벤트 연결 (필요 시): 사용자 상호작용을 처리하기 위해 이벤트 핸들러를 추가

// 1. 요소 선택
const button = document.getElementById("changeButton");
const textElement = document.querySelector(".text");

// 2. 요소 조작 함수 정의
function changeTextAndStyle() {
  // 텍스트 변경
  textElement.textContent = "텍스트가 변경되었습니다!";
  
  // 스타일 변경
  textElement.style.color = "blue";
  textElement.style.fontSize = "20px";
}

// 3. 이벤트 연결
button.addEventListener("click", changeTextAndStyle);

 

요소 선택

• document.querySelector(selector): CSS 선택자를 사용하여 첫 번째로 매칭되는 요소를 반환 (단일 객체)
• document.querySelectorAll(selector): CSS 선택자를 사용하여 모든 매칭되는 요소의 NodeList를 반환 (여러 객체)
• document.getElementById(id): 주어진 id를 가진 요소를 반환 (단일 객체)
• document.getElementsByClassName(className): 특정 클래스를 가진 모든 요소를 HTMLCollection으로 반환 (여러 객체)
• document.getElementsByTagName(tagName): 특정 태그 이름을 가진 모든 요소를 HTMLCollection으로 반환 (여러 객체)

const firstParagraph = document.querySelector(".intro p");  // .intro 클래스 내 첫 번째 <p> 요소
const listItems = document.querySelectorAll("ul li");  // 모든 <ul> 내 <li> 요소들

const header = document.getElementById("mainHeader");  // id가 mainHeader인 단일 요소
const buttons = document.getElementsByClassName("btn");  // 클래스가 btn인 모든 요소들
const divs = document.getElementsByTagName("div");  // 모든 <div> 요소들

 

 

요소 조작

• HTML 요소의 스타일 변경, 텍스트 수정, 구조 추가/삭제 등은 사용자와의 상호작용을 구현할 때 자주 사용되는 DOM 조작 방식

 

텍스트 내용 변경(textContent 속성)

//변경전 <p id="message">이전 메시지입니다.</p>

const message = document.getElementById("message");
message.textContent = "새로운 메시지입니다!";

//변경후 <p id="message">새로운 메시지입니다!</p>

 

스타일 조작(style 속성)

//변경 전 <div id="box" style="color: black; font-size: 16px;">스타일을 변경해보세요.</div>

const box = document.getElementById("box");
box.style.color = "blue";
box.style.fontSize = "20px";

//변경 후 <div id="box" style="color: blue; font-size: 20px;">스타일을 변경해보세요.</div>

 

속성 추가 및 변경(setAttribute())

//사용 전<a id="link" href="https://oldsite.com">이전 사이트로 이동</a>

const link = document.getElementById("link");
link.setAttribute("href", "https://newsite.com");
link.textContent = "새로운 사이트로 이동";

//사용 후 <a id="link" href="https://newsite.com">새로운 사이트로 이동</a>

 

HTML 내용 변경(innerHTML 속성)

//변경 전 <div id="contentArea">이전 HTML 콘텐츠입니다.</div>

const contentArea = document.getElementById("contentArea");
contentArea.innerHTML = "<p>새로운 <strong>HTML</strong> 콘텐츠입니다!</p>";

//변경 후 <div id="contentArea"><p>새로운 <strong>HTML</strong> 콘텐츠입니다!</p></div>

 

이벤트 연결

• 사용자 상호작용을 처리하기 위해 이벤트를 연결하는 단계입니다. 요소에 이벤트 핸들러를 추가하여 특정 동작을 실행할 수 있음
• 두 가지 방식 존재
  • 이벤트 리스너를 사용하는 방식
  • HTML 태그 속성으로 직접 지정하는 방식
• 이벤트 종류
  • click: 요소가 클릭될 때 발생 (가장 자주 사용)
  • blclick: 요소가 더블 클릭될 때 발생
  • mouseover: 마우스가 요소 위에 올라갔을 때 발생 (호버)
  • mouseout: 마우스가 요소를 벗어날 때 발생
  • mousedown: 마우스 버튼이 눌렸을 때 발생
  • mouseup: 마우스 버튼을 놓을 때 발생
  • mousemove: 마우스가 요소 위에서 이동할 때 발생

 

이벤트 리스너 방식(addEventListener)

• HTML과 JavaScript가 분리되어 코드 가독성이 높아짐
• 한 요소에 여러 개의 이벤트 핸들러를 추가 가능

//요소 <button id="myButton">클릭하세요</button>

const button = document.getElementById("myButton");

// 클릭 이벤트 연결
button.addEventListener("click", () => {
  alert("버튼이 클릭되었습니다!");
});

 

 

HTML 태그 속성으로 직접 지정

• 간단한 이벤트 연결에는 빠르게 적용 가능
• HTML에서 바로 이벤트 동작을 정의할 수 있어 작은 프로젝트에 적합

function handleClick() {
  alert("버튼이 클릭되었습니다!");
}

//요소 <button onclick="handleClick()">클릭하세요</button>