멋쟁이사자 FE7 31일차

JS

DOM (Document Object Model)

웹 페이지의 구조와 내용을 프로그래밍 언어가 이해할 수 있는 객체로 나타낸 것을 말한다. 간단히 말하면, 웹 페이지를 컴퓨터가 이해하고 다룰 수 있는 형태로 변환해 주는 개념이다.

JavaScript와의 관계

JavaScript를 사용하면 DOM을 조작할 수 있다. document 객체를 통해 웹 페이지의 DOM에 접근할 수 있고, 각 요소를 선택하거나 조작할 수 있는 메서드와 속성을 사용할 수 있다. 이를 통해 동적으로 웹 페이지를 변경하거나 상호작용하는 기능을 구현할 수 있다.

---

document.getElementById()

getElementById() 메서드는 document 객체의 메서드 중 하나로, 주어진 ID를 가진 요소를 찾아 반환한다. 해당 ID를 가진 요소가 없으면 null을 반환한다.

const element = document.getElementById("elementId");

여기서 "elementId"는 찾고자 하는 요소의 ID이다. 이 메서드를 호출하면 해당 ID를 가진 요소가 반환된다.

---

document.getElementsByClassName()

getElementsByClassName() 메서드는 document 객체의 메서드 중 하나로, 주어진 클래스 이름을 가진 모든 요소들을 선택하여 NodeList(노드 목록)로 반환한다.

 

NodeList는 배열과 유사하지만 실제 배열은 아닙니다. 그래도 각 요소에 순차적으로 접근하여 조작할 수 있습니다.

const elements = document.getElementsByClassName("className");

여기서 "className"는 찾고자 하는 Class의 이름이다. 이 메서드를 호출하면 해당 Class를 가진 요소가 반환된다.

NodeList의 특징

길이 속성

NodeList는 길이(length) 속성을 가집니다. length 속성을 사용하여 NodeList에 포함된 요소의 개수를 알 수 있습니다.

배열 메서드 사용 불가

NodeList는 배열이 아닌 객체이므로, 배열 메서드(예: push(), pop(), forEach())를 직접 사용할 수 없습니다. 하지만 반복문을 사용하여 요소에 접근하고 조작할 수 있습니다.

for... of 문 사용

for... of 문을 사용하여 NodeList의 각 요소에 쉽게 접근할 수 있습니다.

인덱스 접근

각 요소는 순서대로 0부터 시작하는 인덱스를 가지며, 이를 통해 특정 요소에 접근할 수 있습니다.

---

document.querySelector()

CSS 선택자를 사용하여 첫 번째로 일치하는 요소를 선택하여 반환합니다.

즉 여러개가 일치하더라도, 위에서 아래로 내려가면서 가장 위의 요소만 선택한다.

const element = document.querySelector(".myClass");
element.style.color = "red";  // 요소의 텍스트 색상을 빨간색으로 변경
element.innerHTML = "새로운 내용";  // 요소의 내용을 새로운 텍스트로 변경

반환된 요소를 변수에 저장하면, 그 변수를 통해 해당 요소의 속성이나 스타일을 변경하거나 내용을 조작할 수 있다.

document.querySelectorAll()

CSS 선택자를 사용하여 일치하는 모든 요소들을 NodeList(노드 목록) 형태로 반환합니다.

const elements = document.querySelectorAll(".myClass");
for (var i = 0; i < elements.length; i++) {
    elements[i].style.color = "red";  // 각 요소의 텍스트 색상을 빨간색으로 변경
}

NodeList의 특징으로 for... of 문을 통해 각 요소에 접근할 수 있다.