JS브라우저 DOM

DOM(Document Object Model)이란?

• HTML 문서를 JavaScript로 조작할 수 있도록 계층적 구조로 표현한 객체 모델.
• 브라우저는 HTML 문서를 로드하고, 이를 DOM 트리로 변환하여 JavaScript에서 조작할 수 있도록 제공.

 

 

id와 class의 역할

1. id:
   • DOM 요소에 고유 식별자를 부여.
   • 하나의 문서에서 유일해야 함.
   • 특정 요소를 빠르게 선택하거나, CSS/JavaScript에서 조작할 때 사용.
2. class:
   • DOM 요소에 공통 스타일 또는 공통 동작을 부여.
   • 여러 요소에 중복으로 사용할 수 있음.
   • CSS와 JavaScript에서 그룹으로 선택하거나, 스타일을 적용하는 데 사용.

 

 

id와 class를 사용해 DOM 요소 조작

HTML 코드:

<div id="main" class="container">Hello, DOM!</div>

JavaScript 코드:

// id로 요소 선택
const mainElement = document.getElementById("main");
mainElement.textContent = "Welcome to JavaScript DOM!";

// class로 요소 선택
const containerElements = document.getElementsByClassName("container");
Array.from(containerElements).forEach((el) => {
    el.style.color = "blue"; // 텍스트 색상 변경
    el.classList.add("highlight"); // 클래스 추가
});

// 동적으로 요소 추가
const newElement = document.createElement("p");
newElement.id = "dynamicParagraph";
newElement.className = "text";
newElement.textContent = "This is a dynamically added paragraph.";
document.body.appendChild(newElement);