2025 / 02 / 06
오늘 수업에서는 DOM에 대해 배웠습니다.
html 파일에 자바스크립트 파일을 연결하고, 태그를 사용해 이벤트 추가 및 편집에 대해 하나씩 사용해보며 이해하는 시간을 가졌습니다.
평소에 그냥 사용하다가 어떤 식으로 작동되는지 원리를 알 수 있어서 좋았습니다.
💌 DOM
HTML DOM(Document Object Model)
HTML 문서 구조를 프로그래밍적으로 조작할 수 있는 인터페이스를 제공합니다.
HTML 문서의 각 요소를 객체로 나타내며, 자바스크립트를 사용하여 요소들을 동적으로 제어할 수 있습니다.
💌 요소 선택
JavaScript는 DOM을 이용해 HTML 요소를 쉽게 찾아서 조작할 수 있게 도와줍니다.
1) getElementById
- getElementById는 HTML에서 id 속성으로 요소를 선택할 때 사용됩니다.
- title 변수는 id="title"인 요소를 가리키게 됩니다.
let title = document.getElementById("title");2) getElementsByClassName
- HTML에서 class 속성으로 여러 요소를 선택할 때 사용됩니다.
- 이 메서드는 선택된 요소들을 배열처럼 반환합니다.
- list는 class="list"인 모든 요소들을 포함하는 배열이며, 인덱스를 통해 특정 요소에 접근할 수 있습니다.
let list = document.getElementsByClassName("list");
console.log(list[1]); 3) querySelector
- CSS 선택자를 사용하여 요소를 선택할 수 있습니다.
- 일치하는 첫 번째 요소를 반환합니다.
let li = document.querySelector("li");
console.log(li); 4) querySelectorAll
- querySelector와 비슷하지만, 일치하는 모든 요소를 NodeList 형태로 반환합니다.
let liAll = document.querySelectorAll(".list");
console.log(liAll); // 출력: 모든 .list 클래스 요소들💌 요소 조작
선택한 요소의 내용이나 속성을 변경하고 새로운 요소를 추가하거나 삭제할 수 있습니다.
1) HTML 콘텐츠 변경
- 선택한 요소의 HTML 콘텐츠를 변경하려면 innerHTML 속성을 사용합니다.
- li 요소의 HTML 콘텐츠를
<p>안녕하세요</p>로 변경합니다.
let li = document.querySelector("li");
li.innerHTML = "<p>안녕하세요</p>";2) 텍스트 콘텐츠 변경
- textContent를 사용하여 요소의 텍스트만 변경할 수 있습니다.
- HTML 태그는 그대로 문자열로 인식됩니다.
<p> 반갑습니다. </p>가 문자열로 텍스트 내용에 추가됩니다.
let li2 = document.querySelector("#javascript");
li2.textContent = "<p> 반갑습니다. </p>";3) 새로운 요소 생성
- createElement를 사용하면 새로운 HTML 요소를 생성할 수 있습니다.
let newLi = document.createElement("li");
newLi.innerHTML = "C언어";
console.log(newLi); // 출력: C언어4) 새로운 요소 추가
- appendChild를 사용하여 새로운 요소를 기존 요소의 자식으로 추가할 수 있습니다.
document.querySelector("ul").appendChild(newLi);5) 요소 삭제
- remove()를 사용하여 요소를 삭제할 수 있습니다.
document.querySelectorAll("li")[3].remove(); // 4번째 li 요소 삭제
- 부모 요소에서 자식 요소를 삭제하려면 removeChild를 사용할 수 있습니다.
let javaLi = document.getElementById("java");
document.querySelector("ul").removeChild(javaLi); // 자식 요소 삭제💌 요소 속성 조작
HTML 요소의 속성 값을 확인하거나 변경할 수 있습니다.
1) 속성 값 가져오기
- getAttribute 메서드를 사용하여 요소의 속성 값을 가져올 수 있습니다.
let input = document.querySelector("input");
let curType = input.getAttribute("type");
console.log(curType); // 출력: text (기본 타입)2) 속성 값 제거하기
- removeAttribute를 사용하여 속성을 제거할 수 있습니다.
input.removeAttribute("class");3) 속성 값 변경
- HTML 요소의 속성값은 JavaScript 객체를 통해 직접 수정할 수도 있습니다.
input.type = "color";💌 클래스 조작
HTML 요소에 클래스를 추가, 제거 또는 토글할 수 있습니다.
1) 클래스 추가하기
- classList.add를 사용하여 클래스를 추가할 수 있습니다.
let p = document.querySelector("p");
p.classList.add("red");2) 클래스 제거하기
- classList.remove를 사용하여 클래스를 제거할 수 있습니다.
p.classList.remove("red");3) 클래스 토글하기
- classList.toggle은 클래스가 존재하면 제거하고, 없으면 추가하는 기능을 제공합니다.
p.classList.toggle("green");22일차 후기
- 오늘 하루 HTML DOM과 이벤트 처리를 모두 배웠는데 사용해본적 없는 부분도 있었고 생각보다 양이 많아서 정리하는데 시간이 좀 걸렸습니다.
- 이벤트 처리와 실습 예제 부분이 아직 남아 있는데 이 부분은 중요하기 때문에 추후에 "개념정리"라는 카테고리에 포스팅을 올리도록 하겠습니다.
- 이번에 개념을 천천히 다시 배우며 정리할 수 있는 시간이었습니다.
- 알고 있던 부분이지 잘한다고는 할 수 없지만, 복습하고 열심히 하겠습니다.
- 오늘은 빠르게 문제를 풀 수 있어서 기분이 좋았습니다. (*゜ω゜)ゞ
૮꒰ ྀི〃´꒳`〃꒱ა