DOM 조작은 자바스크립트를 사용하여 웹 페이지의 HTML 구조를 동적으로 변경하고 조작하는 프로세스입니다.
이를 위해 DOM(Document Object Model)을 활용하여 HTML 문서를 트리 구조로 나타냅니다.
이후 웹 페이지의 모든 요소를 JavaScript로 조작할 수 있게 됩니다.
DOM 요소 선택 (Selecting DOM Elements)
DOM 요소를 조작하기 위해 먼저 해당 요소를 선택해야 합니다.
다양한 메서드를 사용하여 요소를 선택할 수 있습니다:
// 아이디를 사용하여 요소 선택
let elementById = document.getElementById("myElementId")
// CSS 선택자를 사용하여 단일 요소 선택
let elementBySelector = document.querySelector(".myClass")
// CSS 선택자를 사용하여 모든 요소 선택
let elementsBySelector = document.querySelectorAll(".myClass")DOM 요소 속성 및 내용 변경 (Manipulating DOM Elements)
선택한 DOM 요소의 속성(attribute) 및 내용(content)을 변경할 수 있습니다.
다양한 메서드를 사용하여 DOM 요소를 변경할 수 있습니다:
// 텍스트 내용 변경
elementById.textContent = "새로운 내용"
// HTML 내용 변경
elementBySelector.innerHTML = "<strong>강조된 텍스트</strong>"
// 속성 변경
elementById.setAttribute("class", "newClass")
// 속성 제거
elementById.removeAttribute("class")새로운 DOM 요소 생성 (Creating New DOM Elements)
JavaScript를 사용하여 새로운 DOM 요소를 생성하고 문서에 추가할 수 있습니다.
다양한 메서드를 사용하여 새로운 요소를 생성하고 추가할 수 있습니다:
// 새로운 div 요소 생성
let newDiv = document.createElement("div")
// 텍스트 내용 설정
newDiv.textContent = "새로운 요소"
// 문서에 추가
document.body.appendChild(newDiv)이렇게하여 DOM 조작을 통해 웹 페이지의 구조와 내용을 동적으로 변경할 수 있습니다.
