html 문서의 구조를 가리켜 문서 객체 모델(document object model)이라고 한다.
html의 각 태그마다 기능과 속성이 있다. 가령, 태그는 문서에 이미지를 출력하는 기능이 있고, src와 alt 속성이 있다. 이 이미지 태그도 문서 객체라고 한다.

이렇듯 html 태그는 각각의 기능과 속성을 갖고 있는 문서 객체이다. 문서 객체 모델을 배우는 주된 목적은 자바스크립트를 사용하여 문서 객체를 선택하고, 속성과 스타일을 적용하기 위해서이다.



선택자

html에서 사용하는 스타일과 자바스크립트에서 사용하는 스타일은 모두 html 요소의 디자인 속성을 바꿀 때 사용한다.
하지만 html에서 사용하는 스타일은 사용자가 지정된 요소에 어떠한 동작을 취했을 때 지정한 요소에 스타일을 적용시킬 수는 없다.
그래서 html 내에서 작성된 스타일은 ‘정적’이라고 표현하고, 자바스크립트 내에서 작성된 스타일은 ‘동적’이라고 표현한다.


자바스크립트를 이용해 특정 문서 객체를 선택하고, 여기에 속성 또는 스타일을 적용하기 위해서는 문서 객체의 선택자 사용법을 잘 알고 있어야 한다.



-선택자 종류
document.getElementById(“아이디명”) : 아이디로 선택하기
document.getElementsByTagName(“태그명”) : 요소(태그) 이름으로 선택하기
document.getElementsByClassName(“클래스명”) : 클래스명으로 선택하기
document.getElementsByName(“name속성의 값”) : 속성 중 name 속성의 이름으로 선택하기
document.querySelector(“”) : CSS 선택자 문법으로 선택하기(하나만)
document.querySelectorAll(“”) : CSS 선택자 문법으로 선택하기(여러개)



-선택자 적용 위치와 방법


선택자를 사용할 때는 <head> 태그 영역에 자바스크립트를 선언하게 되면, html을 읽어오는 것보다 스크립트의 선택자가 먼저 실행되어서 문서 객체를 선택할 수 없게 된다.
선택하고자 하는 태그가 먼저 읽히고 난 뒤에 스크립트가 읽히도록 순서를 변경해주거나, window.onload를 이용해서 모든 문서의 객체를 로딩한 후에 스크립트가 읽혀지도록 해줘야 한다.



-선택자를 사용한 문서 객체 CSS 적용법


자바스크립트에서 스타일 속성을 작성할 때 주의할 점은, 자바스크립트에서 ‘-‘를 사용하면 산술 연산자로 인식하기 때문에 background-color가 아닌 backgroundColor로 작성해야 한다.


// document.선택자(선택 메서드).style.속성=값;

document.getElementById("title").style.backgroundColor="black";  // 아이디가 title인 요소의 배경색 변경
document.getElementByTagName("p")[3].style.color="blue";   // p태그 중 4번째 요소의 글자색 변경



-요소의 속성값 변경, 생성 및 불러오는 방법

문서 객체의 속성 메서드


요소선택.속성명 : 요소의 지정한 속성 값을 불러온다.
요소선택.속성명=”새 값” : 요소의 지정한 속성 값을 새 값으로 변경 또는 생성한다.
요소선택.getAttribute(“속성”) : 요소의 지정한 속성 값을 불러온다.
요소선택.getAttribute(“속성”,”새 값”) : 요소의 지정한 속성 값을 새 값으로 변경 또는 생성한다.



문서 객체의 하위 요소 속성


요소선택.innerHTML : 선택한 요소의 모든 하위 요소를 문자 데이터로 반환한다.
요소선택.innerHTML=새 요소 : 선택한 요소의 전체 하위 요소를 새 요소로 변경 또는 생성한다.




-문서 객체 이벤트 핸들러 적용하기
사용자가 사이트에서 행하는 모든 행위를 이벤트라고 부르고, 이런 행위를 취했을 때 자바스크립트가 실행되는 것을 이벤트 핸들러라고 한다.

이벤트 종류


onclick : 선택한 요소를 마우스로 클릭했을 때 이벤트 발생
onmouseover : 선택한 요소에 마우스를 올렸을 때 이벤트 발생
onmouseout : 선택한 요소에 마우스가 벗어났을 때 이벤트 발생
submit : 선택한 폼에 전송이 일어났을 때 이벤트 발생


문서 객체에 이벤트 핸들러를 적용하는 기본문법은 아래와 같다.


/*
  요소선택.이벤트=function(){
    실행문;
  }
*/

document.getElementById("btn1").onclick=function(){
  alert("welcome");
}