강의 8: 자바스크립트 DOM (문서 객체 모델)

개념 설명:

웹 페이지 구조 이해: 웹 페이지는 HTML 문서로 구성되며, 이 문서의 구조를 이해하는 것이 중요합니다. HTML 문서는 요소(태그), 속성, 텍스트 등으로 구성됩니다.
DOM 요소 선택과 조작: DOM(Document Object Model)은 HTML 문서를 프로그래밍적으로 조작할 수 있도록 하는 인터페이스입니다. JavaScript를 사용하여 웹 페이지의 DOM 요소를 선택하고 조작할 수 있습니다.

 

예제 코드:
아래는 DOM 요소 선택과 조작하는 예제 코드입니다.

// DOM 요소 선택
let header = document.getElementById("header"); // id가 "header"인 요소 선택
let paragraphs = document.getElementsByTagName("p"); // 모든 <p> 요소 선택
let buttons = document.querySelectorAll("button"); // 모든 <button> 요소 선택

// DOM 요소 조작
header.innerText = "새로운 제목"; // 텍스트 내용 변경

for (let i = 0; i < paragraphs.length; i++) {
  paragraphs[i].style.color = "blue"; // 글자색 변경
}

buttons.forEach(function(button) {
  button.addEventListener("click", function() {
    alert("버튼 클릭!");
  });
});

전문용어 상세 설명:
DOM (Document Object Model): 웹 페이지의 구조를 프로그래밍적으로 표현하는 모델로, HTML 문서의 요소와 속성을 객체로 나타냅니다.
DOM 요소 선택 (DOM Element Selection): JavaScript를 사용하여 웹 페이지에서 특정 DOM 요소를 선택하는 작업을 말합니다. getElementById, getElementsByTagName, querySelectorAll 등의 메서드를 사용합니다.
DOM 요소 조작 (DOM Element Manipulation): 선택한 DOM 요소의 내용을 변경하거나 스타일을 수정하는 작업을 의미합니다. innerText, style 속성, 이벤트 리스너 추가 등이 포함됩니다.