DOM (Document Object Model)

DOM (Document Object Model)

웹 페이지를 자바스크립트로 제어하기 위한 객체 모델을 의미. Window객체가 창을 의미한다면, Document 객체는 윈도우에 로드된 문서를 의미한다고 할 수 있다.

문서 내에서 특정 태그에 해당되는 객체를 찾는 방법은 여러가지가 있다.

 

document.getElementsByTagName

인자로 전달된 태그명에 해당하는 객체를 찾아서 그 리스트를 NodeList라는 유사 배열에 담아 반환한다.

NodeList는 배열은 아니지만 length와 배열 접근 연산자를 사용해서 엘리먼트를 조회할 수 있다.

 

document.getElementsByClassName

클래스 속성의 값을 기준으로 객체를 조회

document.getElementById

아이디 값을 기준으로 객체를 조회. 성능면에서 가장 우수.

document.querySelector

css선택자의 문법을 이용해서 객체 조회

 

document.querySelectorAll

querySelector와 기본적인 동작방법은 같지만 모든 객체를 조회한다는 점이 다르다.

HTML Element

getElement* 메소드를 통해서 원하는 객체를 조회했다면 이 객체들을 대상으로 구체적인 작업을 처리해야 한다.

이를 위해선 획득한 객체가 무엇인지 알아야 한다. 그래야 적절한 메소드나 프로퍼티를 사용할 수 있다.