7. DOM 조작 기초
DOM이란 무엇인가?
DOM(Document Object Model)은 HTML 문서를 트리 구조로 나타낸 것입니다. JavaScript를 사용하면 DOM을 조작하여 웹 페이지의 콘텐츠와 구조를 동적으로 변경할 수 있습니다.
DOM 요소 선택
JavaScript에서는 다양한 방법으로 DOM 요소를 선택할 수 있습니다.
1. getElementById
ID 속성을 사용하여 요소를 선택합니다.
let element = document.getElementById("myElement");
2. getElementsByClassName
클래스 이름을 사용하여 요소를 선택합니다.
let elements = document.getElementsByClassName("myClass");
3. getElementsByTagName
태그 이름을 사용하여 요소를 선택합니다.
let elements = document.getElementsByTagName("div");
4. querySelector
CSS 선택자를 사용하여 첫 번째 일치하는 요소를 선택합니다.
let element = document.querySelector(".myClass");
5. querySelectorAll
CSS 선택자를 사용하여 모든 일치하는 요소를 선택합니다.
let elements = document.querySelectorAll(".myClass");
DOM 요소 조작
선택한 요소의 콘텐츠와 속성을 조작할 수 있습니다.
1. 텍스트 콘텐츠 변경
let element = document.getElementById("myElement");
element.textContent = "새로운 텍스트";
2. HTML 콘텐츠 변경
let element = document.getElementById("myElement");
element.innerHTML = "<strong>새로운 HTML</strong>";
3. 속성 변경
let element = document.getElementById("myElement");
element.setAttribute("class", "newClass");
4. 스타일 변경
let element = document.getElementById("myElement");
element.style.color = "red";
element.style.backgroundColor = "yellow";
DOM 요소 생성 및 추가
새로운 DOM 요소를 생성하고 기존 요소에 추가할 수 있습니다.
1. 새로운 요소 생성
let newElement = document.createElement("div");
newElement.textContent = "새로운 요소";
2. 요소 추가
let parentElement = document.getElementById("parent");
parentElement.appendChild(newElement);
이벤트 처리
DOM 요소에 이벤트를 추가하여 사용자의 상호작용을 처리할 수 있습니다.
1. 클릭 이벤트 추가
let button = document.getElementById("myButton");
button.addEventListener("click", function() {
alert("버튼이 클릭되었습니다!");
});
2. 이벤트 제거
let button = document.getElementById("myButton");
function handleClick() {
alert("버튼이 클릭되었습니다!");
}
button.addEventListener("click", handleClick);
// 이벤트 제거
button.removeEventListener("click", handleClick);
이벤트 객체
이벤트 객체는 이벤트와 관련된 정보를 제공합니다.
let button = document.getElementById("myButton");
button.addEventListener("click", function(event) {
console.log("클릭 위치: " + event.clientX + ", " + event.clientY);
});
결론
DOM 조작은 JavaScript를 사용하여 웹 페이지를 동적으로 변경하는 중요한 기술입니다. 요소를 선택하고 조작하는 방법, 새로운 요소를 추가하는 방법, 이벤트를 처리하는 방법을 이해하면 더욱 상호작용적인 웹 페이지를 만들 수 있습니다.
이로써 JavaScript 기초 시리즈를 마무리하겠습니다. 다음 시리즈인 JavaScript 심화 시리즈에서 만나요!
'JavaScript 기초 시리즈' 카테고리의 다른 글
[JavaScript 기초 시리즈] 6일차: JavaScript 조건문과 반복문에 대해 알아보자 (0) | 2024.08.06 |
---|---|
[JavaScript 기초 시리즈] 5일차: JavaScript 객체와 배열에 대해 알아보자 (0) | 2024.08.05 |
[JavaScript 기초 시리즈] 4일차: JavaScript 함수와 스코프에 대해 알아보자 (1) | 2024.08.04 |
[JavaScript 기초 시리즈] 3일차: JavaScript 연산자와 표현식에 대해 알아보자 (1) | 2024.08.03 |
[JavaScript 기초 시리즈] 2일차: JavaScript 변수와 자료형에 대해 알아보자 (0) | 2024.08.02 |