### JavaScript DOM
:Document Object Model
프로그래밍 인터페이스
HTML 요소찾기
document.getElementById(id) : id 로 찾는다
document.getElementsByTagName(name) : TagName으로 찾는다.
document.getElementsByClassName(name) : 클래스이름으로 찾는다.
HTML 요소 추가 및 삭제
document.createElement(element) : HTML 요소를 생성한다.
document.removeChild(element) : HTML 요소를 지운다
document. appendChild(element) : HTML 요소를 추가한다
document.replaceChild(element) : HTML 요소를 교체한다.
document.write(text) : HTML output Stream에 쓴다.
HTML 객체 찾기
document.anchors
document.applets
document.baseURI
document.body
document.cookie
document.doctype
document.documentElement
document.documentMode
document.documentURI
document.domain
document.domConfig
document.embeds
document.forms
document.head
document.images
document.implementation
document.inputEncoding
document.lastModified
document.links
document.readyState
document.referrer
document.scripts
document.strictErrorChecking
document.title
document.URL
애니메이션
모든 애니메이션은 컨테이너 요소를 기준으로 해야한다.
요소 스타일
컨테이너 요쇼 : style="position: relative" 로 작성
애니메이션 요소 : style= "position: absolute" 로 작성
이벤트
onload & onunload : 방문자의 브라우저 유형 및 브라우저 버전을 확인하고 정보를 기반으로 올바른 버전의 웹페이지를 로드하는 데 사용한다.
onchange : 입력 필드의 유효성 검사와 함께 사용된다.
eventListener
addEventListener(event, function, useCapture(선택사항)) : 이벤트 핸들러를 지정된 요소에 첨부한다. 동일한 요소에 많은 이벤트를 추가할 수 있음.
event 유형에는 on을 쓰지 않는다. ex) onclick -> click
removeEventListner() : 이벤트 리스너를 제거한다.
탐색
전체 문서에 액세스 하는 속성
document.body : 문서의 body
document.documentElement : 전체 문서
노드
nodeName : 특정노드 이름을 지정한다.
read-only이다.
element node 의 nodeName은 tag 이름과같다.
속성 노드의 nodeName 은 속성 이름이다.
text node의 nodeName은 항상 #text 이다.
문서 노드의 nodeName은 항상 #document 이다.
nodeValue : 노드의 값을 지정한다.
element node의 nodeValue는 null이다.
text node의 nodeValue는 텍스트 자체이다.
속성 노드의 nodeValue는 속성 값이다.
nodeType : read-only이고, 노드 유형을 리턴한다.
appendChild() : 새 요소를 상위의 마지막 하위로 추가한다.
insertBefore() : 위를 원하지 않을 시 사용하면 위보다 상위에 만들어진다.
remove() : 기존 요소를 삭제한다.
replaceChild() : 요소를 DOM으로 바꾼다.
NodeList
querySelectorAll() : () 안에 쓰여진 모든 노드를 선택하고, 인덱스로 액세스할 수 있다.
length를 사용할 수 있다.
