DOM - Document Object Model

HTML의 요소를 Objcet의 속성을 사용하는 것처럼 조작할 수 있는 Model이다.
Javascript를 통해 HTML을 동적을 제어하기 위해선 필수적으로 이해해야한다.

DOM 요소는 document의 속성처럼 사용한다.
document.creatElecment()를 이용해서 태그 요소를 생성할 수 있다.
apppend속성을 사용해 태크 생성 위치도 정할 수 있다.
javascript에서 HTML의 특정 태그를선택 할때 사용하는 document.querySelector()도 DOM 요소다.
이렇게 DOM 과 javascript만나면 아주 많은 일들을 할수 있게 된다.
css를 통해 특정요소에 style특성 적용 유무를 javascript와 DOM을 이용해 특정 선택자를 삽입하거나, 삭제하여 효과를 조절할 수 있다.
document.testCotent는 HTML요소내의 내용에 접근한다.
document.classList는 특정 태그의 class 에 접근할 수 있다.

유효성 검사

DOM요소를 이용하여 특정 조건에 따라 유효성을 검사할 수 있는 코드를 만들어 봤다.
input창에 특정 글자수를 초과하면 경고문이 적힌 태그에 class를 없애서 초과했다고 경고해줄수 있었다. 없앤 class는 css에서 display:none속성을 가지고 있었기 때문에 해당 class를 지우거나 생성함에 때라 화면에 보이거나 안보이게 할 수 있었다.
input 창에 적힌 글자에 접근하기위해선 input창에 글씨를 적은상태에서, cosole.dir(input)을 통해 value라는 속성에 적힌 글이 할당되어있는 것을 확인 할 수 있었다.