TIL0427 DOM, addEventListener

DOM (Document Object Model)
dom 은 웹페이지와 javascript 를 서로 이어주는 역할을 한다
document객체로 element 와 속성에 접근할 수 있다
해당 요소의 내용은 innerHTML 로 접근해 수정할 수 있다
innerHTML 을 사용하면 내용이 전부 교체된다

특정 element 에 접근하려면 태그, 클래스, 아이디로 접근 가능하다

• querySelector('찾을 element'), getElementById('id명'), getElementByClassName('클래스명'), getElementByTagName('태그명') 으로 element에 접근할 수 있다

style 을 수정할때는 hypen 을 사용할 수 없다 (background-color => backgroundColor)
classList.add('클래스이름') 으로 클래스를 추가할 수 있다
creatElement(tagName) 은 새로운 element 를 만든다
만든 후에는 appendChild 로 꼭 어딘가에 append 시켜줘야 한다

let creat = document.creatElement('p');        // p element 생성
creat.classList.add('new');                    // new 라는 클래스명 추가
crear.innerHTML = "hi!"                        // p 안에 "hi" 내용 추가
let title = document.getElementById('here');   // p 를 넣을 위치 가져옴
title.appendChild(creat);                      // p 넣기

마우스나 키보드 등으로 interactive 한 반응을 할 수 있게 하는것을 이벤트라고 한다
이벤트에는 클릭이벤트, 마우스이벤트, 스크롤이벤트, 터치이벤트 등이 있다
Javascript 에서 이러한 이벤트들을 잡아서 다양한 interaction 을 줄 수 있다
그러기 위해서는 addEventLinstener를 사용하면 된다

요소.addEventLinstener(이벤트종류, function() {
	//이벤트가 일어났을 때 실행할 내용
});

위와 같이 함수가 인자로 전달되는 것을 콜백함수라고 한다
클릭 이벤트는 가장 많이 사용된다
키이벤트는 키보드를 누르면 발생하는 이벤트를 말한다 keydown, keyup, keypress 등이 있다
key code 는 각 키보드가 가지고 있는 고유한 code 이다
class 이름으로 요소를 찾으려면 배열이 리턴이 되기 때문에 [0] 으로 접근해야 한다
id 는 하나밖에 없기 때문에 배열로 리턴되지 않아 바로 접근 가능하다
e 는 event 와 관련된 정보를 인자로 받아오는 것입니다

password.addEventLinstener('keydown', function(e) {
	if (e.keyCode === 13) {
    	//로그인 함수로 이동
    }
})