돔

HTML 요소 선택

document.getElementsByTagName(' ') //HTML 이름 : header, div, li 등
document.getElementById(' ') //해당 아이디의 요소 선택
document.getElementsByClassName(' ') // 해당 클래스에 속한 요소 선택
document.getElementsByName(' ') //해당 name 속성값을 가지는 요소 선택

document.querySelectorAll(' ') //해당 선택자로 선택되는 요소 모두 선택
document.querySelector(' ') //해당 선택자로 선택되는 요소 1개 선택

//응용
document.querySelector('.category .margin')
document.querySelector('.category .margin > .ribbon')
document.querySelector('.category .margin > .ribbon > a').href //a의 href 속성

HTML 요소 생성

document.createElement() //지정된 HTML 요소 생성
document.write() //HTML 출력 스트림을 통해 텍스트 출력

HTML 이벤트 핸들러 추가

요소.onclik = function(){} //마우스 클릭 이벤트 핸들러

DOM 요소 수정

var selected = document.getElementById("even"); //요소 선택

selected.style.color = "red"; //선택한 요소의 스타일(css) 변경
selected.innerHTML = "요소의 내용을 바꿉니다"; //선택한 요소의 내용(텍스트) 변경