이제 앞에서 배운 HTML, CSS, JavaScript를 결합해야 한다.
DOM의 정의
DOM은 문서 객체 모델을 의미하며, 웹 페이지를 구성하는 JavaScript 객체들의 집합이다. 예를 들어 HTML 요소 중 <h1> 태그를 모델링하는 JavaScript 객체가 존재하는 것이다. <h1> 태그를 나타내는 JS 객체를 변경하면 페이지에 변경 사항이 반영되게 된다. 문서 객체 모델은 JS에서 엡페이지 콘텐츠로 접근하는 통로이다.
문서 객체의 메서드들
Selecting
요소 선택을 도와주는 메서드들을 공부해보자.
getElementById
getElementById 메서드에 문자열을 전달하면 일치하는 ID를 가진 요소를 찾아 나타낸다. 없으면 null을 반환한다.
getElementsByTagName
태그 이름을 전달하면, 한 번에 한 개 이상의 태그'들'을 선택하는 메서드이다. html collection을 반환하며 대소문자 구분은 없다. html collection은 배열처럼 생겼지만 배열은 아니다.map과 같은 메서드는 사용할 수 없음
const allImages = document.getElementsByTagName('img');
allImages[0]getElementsByClassName
앞에서 배운 방법보다 더 좋은 방법인 querySelector를 배워보자. 더 최근에생긴 메서드임
- a newer, all-in-one method to select a single element
이 하나를 사용해서 ID, 클래스 이름, 요소 타입, 속성, CSS 스타일등 원하는 선택자를 무엇이든 사용해서 선택할 수 잇다.
document.querySelector('h1');