DOM

• JS에서 HTML로 접근하기 위한 것(중간다리)
• HTML을 계층화시켜 트리구조로 만든 객체

객체에 접근하듯이 . 으로 접근 할 수 있다.

특정 요소 가져오기

• getElementById =
  엘리먼트에 부여한 id를 찾는 것

• getElementByclassName =
  엘리먼트에 부여한 Class를 찾는 것
  여러개를 가져올 수 있음(배열형태)

• querySelecor = CSS선택자로 찾는것 . #

• querySelecorAll
  여러개를 가져올 수있음(배열형태)

속성명은 카멜케이스로 작성해야된다!
CSS처럼 - 못씀

logo.style.backgroundcolor ='red'

---

Event

• 브라우저에서 일어나는 모든 사건들
• interaction(상호작용) 처리
• MDN에서 이벤트 찾아보자

addEventListener

• 이벤트를 달 때 사용하는 함수 이름
• 특정 이벤트가 언제 발생하는지 듣고있다가 발생하면 인자로 받은 함수를 실행시켜줌

요소.addEventListener(이벤트종류, function(){
 //이벤트가  일어났을 때 실행할 내용 
}) (인자에 있는 함수는 callback함수라고 부른다)

조건문 쓸때 가독성 때문에 else if잘 안씀

콜백함수에 매개변수있을때

thisIsPw.addEventLister('keydown', function(event){
thisIsCode.innerHTML = event.code
})  -> 이벤트라는 객체안에있는 code값을 가져온다.

인자를 넣어주는 시점은 addEventListener함수 내부적으로 함수를 호출할때 무조건 첫번째 인자로 발생한 이벤트 정보를 객체형태로 만들어 넘김
그걸 받을 매개변수 자리를 만들어 놓으면 이벤트에 대한 정보를 쓸 수 있음.