Document Object
-자바스크립트는 html을 변경할 수 있고, 읽어올 수 있다.
-console창에 document를 입력하면 html을 확인할 수 있다.(document는 이미 브라우저에 존재하는 object)
-console.dir()를 하면 element정보를 읽어올 수 있다.
Searching For Elements
getElementByID =>
-html 속 ID로 데이터를 불러올 수 있다.
getElementsByClassName=>
-html 속 class로 데이터를 배열로 불러올 수 있다. 배열로 표현되기 때문에 그 안에 데이터를 사용하지 못한다. 클래스를 사용해 데이터를 수정할 때는 querySelector를 사용해야 한다.
querySelector =>
-element를 css방식으로 읽어올 수 있다. (ex. 클래스명: .hello / ID명: #hello)
-element가 많을 경우에는 첫번째 element만 가져온다.
-id.style.color="red"; -> html속 ID로 데이터 불러오기, style 데이터에서 color 데이터 변경한다.
querySelectorAll =>
-querySelector를 사용하면 맨 첫번째 element만 선택되니까 그것 말고 다 선택하고 싶으면 querySelectorAll를 사용해 주면 된다.
Event
addEventListener
-대상.addEventListener(어떤 이벤트가 감지되었을떼, 어떤 함수를 실행할 것인지 )
Events : console.dir()의 element 중 on으로 시작하는 것들은 event다.
Events part Two : 구글에 MDN을 검색할때 JS관점으로 HTML태그를 검색하려면 Web APIs라고 되어있는 문서를 찾는다.
More Events : addEventListener를 on element보다 많이 쓰는 이유는 remove명령어로 EventListener를 제거할 수 있기 때문이다.
addEventListener 함수의 첫 번째 인자는 이벤트이고 이벤트와 관련된 함수에서 그 이벤트에 대한 정보를 함수의 첫 번째 인자에 저장해둔다.
addEventListener를 사용하는 이유
대상.onclick = 함수명; 은
대상.addEventListener("click",함수명) 과 같은 의미인데 왜 addEventListener를 사용할까?
-> removeEventListener을 통해서 event listener을 제거할 수 있기 때문이다.
