자바스크립트 이벤트와 id, class를 요소로, 요소에 속성값 적용하는 방법 총정리!

* 이벤트

: 각 요소와의 상호작용을 가능하게함으로써 웹페이지를 능동적으로 작동하도록 한다.

이벤트 2가지 방법 

1. 요소.onclick=function( ){ };

2. 요소.addEventListener("이벤트 명", function( ){ });  =>자바스크립트에서 권장

<click 이벤트를 예로 들기로 하자>

1. 요소.onclick=function( ){ };

2. 요소.addEventListener("이벤트 명", function( ){ });

↓ 출력화면 

               ↓같은 내용으로 방법 1를 통해 적용했을 때 역시 결과값은 같다.↓

↓ 출력화면 

* id를 요소로 잡는 방법

->getElementById(" ");

* class를 요소로 잡는 방법

1. document.getElementByClassName(" ");

2. document.getElementByTagName(" ");

* id, class, 복수 class 등 요소로 잡는 방법

querySelectorAll(".box>.a1")   ->대신 id는 (#), class는 (.)을 붙여서 써줘야 한다.

* 요소에 속성값 적용하는 방법

1. 문서 내에서 요소 찾아주기

2. 요소.style.속성="값";

↓ 출력화면 

→이어 자바스크립트 반복함수 setTimeout, setInterval, clearInterval 간단 예제 및 정리!