DOM의 정의 및 요소 선택 방법

이제 앞에서 배운 HTML, CSS, JavaScript를 결합해야 한다.

DOM이란>

DOM은 HTML과 XML 문서를 구조화하여 프로그래밍적으로 접근하고 조작할 수 있도록 만든 문서 객체 모델이다.

웹 페이지의 각 요소는 JavaScript 객체로 표현되는데, DOM은 이 웹 페이지를 구성하는 JavaScript 객체들의 집합이다. 이를 변경하면 페이지에 즉시 반영된다.

📌 DOM의 핵심 역할
HTML 문서를 JS에서 조작할 수 있도록 변환
웹 페이지의 구조, 스타일, 콘텐츠를 JS를 통해 동적으로 변경 가능

---

DOM 요소 선택 메서드

DOM에서 요소를 선택하기 위해 사용하는 다양한 메서드가 있다.

getElementById

getElementById 메서드에 문자열을 전달하면 해당 문자열과 일치하는 ID 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환한다. 없으면 null을 반환한다.

구문

document.getElementById(id);

• id가 존재하면 Element 객체를 반환
• 존재하지 않으면 null을 반환

예제

let banner = document.getElementById('banner');

---

getElementsByTagName

태그 이름을 사용하여 여러 개의 요소를 한 번에 선택하는 메서드이다.

구문

var elements = document.getElementsByTagName(name);

• html collection을 반환한다. (배열처럼 생겼지만 배열은 아님 →map과 같은 메서드 사용불가)
• 대소문자 구분 없음 ("img"와 "IMG" 동일)

예제

const allImages = document.getElementsByTagName('img');
console.log(allImages[0]); // 첫 번째 <img> 요소

---

getElementsByClassName

클래스 이름을 사용하여 여러 개의 요소를 한 번에 선택하는 메서드이다.

구문

var elements = element.getElementsByClassName(names);

• html collection을 반환한다.
• names에는 검색할 클래스 혹은 클래스들을 띄어쓰기로 구분해서 전달한다.
•  

예제

const items = document.getElementsByClassName('list-item');
console.log(items); // 해당 클래스를 가진 모든 요소

//여러 개의 클래스로 탐색하는 법 (red와 test 모두 포함 요소 검색색)
document.getElementsByClassName('red test');

---

querySelector

앞에서 배운 방법보다 더 좋은 방법인 querySelector를 배워보자. 더 최근에 생긴 메서드이다!

구문

let elem = document.querySelector(css);

• elem.querySelector(css)는 주어진 CSS 선택자에 대응하는 요소 중 첫 번째 요소를 반환

예제

document.querySelector('h1'); // 첫 번째 <h1> 요소 선택
document.querySelector('#red'); // ID가 "red"인 요소 선택
document.querySelector('.big'); // 클래스가 "big"인 요소 선택
document.querySelector('a[title="Java"]'); // 특정 속성을 가진 요소 선택

---

querySelectorAll

똑같은 원리인데, 일치하는 첫 번째 요소 대신에 일치하는 모든 요소를 반환한다.

구문

let elems = document.querySelectorAll(css);

• elem.querySelector(css)는 elem의 자식 요소 중 주어진 CSS 선택자에 대응하는 모든 요소를 반환