: 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법.
: CSS에서는 class, id, 태그 등의 스타일을 각각 구별해서 정의해야 한다. 이때 class, id, 태그등을 선택자라 한다. HTML 태그의 id속성은 HTML 요소가 문서 안에서 중복되지 않도록 사용하는 CSS 선택자인데 getElementById() 메서드를 이용하면 특정한 id가 포함된 DOM 요소에 접근할 수 있다.
getElementById("id명")
: 특정 id가 포함된 DOM 요소에 접근.
ex) id값이 heading일때, document.getElementById("heading)
getElementByClassName("class명")
: 지정한 class 선택자 이름이 들어 있는 DOM 요소에 접근.
getElementsByTagName("태그명")
: class나 id를 지정하지 않는 DOM요소에 접근할 때 사용.
다른 방법으로 접근하는 메소드
querySelector("#heading)
: // id="heading"인 요소
-> id 선택자처럼 반환값이 하나 일 때, 사용.
querySelectorAll(".bright")
: // class="bright"인 요소
-> class 선택자나 태그 이름을 사용하여 여러 값이 한꺼번에 반환될 경우에 사용.
웹 요소의 내용을 수정하는 프로퍼티
요소명.innerText=내용
: 텍스트 내용을 표시
요소명.innerHTML=내용
: HTML 태그까지 반영하여 표시