JS - [element 가져오기 / Event]

0. JAVASCRIPT ON THE BROWSER

JS가 브라우저를 어떻게 동작시키는지 알아보자.

 

브라우저에서 콘솔 창에 document를 입력하면 아래와 같이 HTML 파일을 가져올 수 있다.

즉 document는 우리가 접근할 수 있는 HTML을 가리키는 객체이다. 만약 document.title을 입력하면 내가 HTML에 입력했던 title 태그에 넣어준 값 Momentum 이 출력될 것이다. document.title = "Hi"와 같이 값을 넣어주어 HTLM을 변경할 수도 있다. (물론 콘솔 창에서 변경한 값은 새로고침 하면 원래대로 돌아갈 것이다.)

 

 

---

1. element 가져오기

1) getElementBy~ 

document.getElementById(" ") 함수를 이용해 해당하는 id 값을 통해 element를 가져올 수 있다. (대개 const title = document.getElementById("title"); 와 같이 선언해서 간단히 사용) 또한 title.innerText 와 같이 사용해서 (일치하는 id 값을 가진 element를 찾아서) innerText의 값을 가져오거나  title.innerText="Good"; 과 같이 값을 넣어줄 수도 있다. innerText 외에도 className, autofocus 등 HTML의 여러 속성 값을 JS에서 가져오거나 변경할 수 있다.

 

 

JS로 HTML의 값들을 가져오는 함수에 대해 더 알아보자. 참고로 element를 더 자세하게 볼 때는 console.log 대신 console.dir()를 사용하자.

• document.getElementById(" ") : HTML에서 id를 통해 element를 찾아줌
• document.getElementsByClassName(" ") : class를 통해 element를 찾아줌
• document.getElementsByTagName(" ") : 태그 이름을 통해 element를 찾아줌

 

여기서 여러 element를 받아오는 경우 사진과 같이 array로 받아온다. 이런 경우 object 자체가 아니고 array로 가져오므로 document.getElementByTagName("h1'"). ~~ 과 같이 사용해 HTML의 속성 값을 컨트롤할 수 없다.

console.log(document.getElementsByTagName("h1"); 출력 결과

 

---

2) querySelector~ 

element를 가져오는 다른 방법으로는 querySelector와 querySelectorAll 도 존재한다. querySelector는 element를 CSS selector 방식으로 검색할 수 있다. 예를 들어 document.querySelector(".hello h1"); 와 같이 사용하면 hello 클래스 안에 있는 h1 태그를 가져오라는 명령이다.

• document.querySelector(" 선택자 형식으로 명시 ") : element를 CSS 방식으로 검색. 단 하나의 element를 반환
• document.querySelectorAll(" 선택자 형식으로 명시 ") : element를 CSS 방식으로 검색. 모든 element를 array로 반환

 

※ document의 head, title, body는 중요하기 때문에 document.body.style~ 과 같은 코드는 허용되지만, h1이나 div 태그 등은 document.h1.~ 처럼 호출할 수 없다. 따라서 나머지 element 들은 querySelector나 getElementBy~ 로 호출해야 함!!

 

 

---

2. Event

1) addEventListener 

JS에서 addEventListener 함수를 이용해 event 효과를 줄 수 있다. 말 그대로 event를 listen 하는 함수로, addEventListener("이벤트", 함수명); 와 같이 어떤 event가 발생하면 어떤 function을 호출할지 알려주면 된다.

참고로 함수명에는 괄호를 넣지 않아야 한다!!!! 괄호를 넣으면 함수가 바로 실행되므로.. 우리가 원하는 건 JS에 function만을 넘겨주고 event가 발생할 때만 함수를 실행하고 싶은 것이므로 함수명만 넣어줘야 한다.

스타일 변경할땐 [ 가져올요소.style.바꿀속성 = "" ]과 같이 사용하면 됨

사진과 같은 코드에서는 click event가 발생하면, JS가 handleTitleClick 함수를 실행시켜 문장의 색이 blue로 변경될 것이다.

 

 

예시로 특정한 event를 listen해보자!

마우스가 (title)요소 위에 위치할 때 일어나는 event인 mouseenter를 사용해 보겠다.

그런 후 브라우저에서 해당 요소 위에 마우스를 올리면 아래와 같이 잘 출력된다!

---

2) onEVENTNAME

onEVENTNAME에 event listener를 할당함으로써 사용할 수도 있다. 예를 들어 title.addEventListener("click", handleTitleClick) 은 title.onClick = handleTitleClick; 과 같이 사용할 수도 있다.

 

아래와 같이 함수를 작성하고 1, 2번 방식을 비교해보면 아래와 같다. 참고로 강의에서는 addEventListener 방식을 추천한다고 한다. (나중에 removeEventListner를 통해서 제거할 수 있기 때문)

함수 작성!

1) addEventListener 방식

2) onEVENTNAME 방식

 

 

---

listen 하고 싶은 event를 찾는 방법 알아보기!

방법 1

1. 구글에 찾고 싶은 element의 이름을 검색 - ex) h1 html element mdn (Mozilla Developer Network) 검색

2. Web APIs 라는 문장이 포함된 페이지를 찾는다. (JS 관점의 HTML Heading Element 라는 의미)

3. HTMLelement 클릭 - 여러가지 event 확인가능

 

 

방법 2

1. element를 console.dir() 로 출력

const title = document.querySelector(".hello h1");

2. 콘솔창에서 확인했을 때 property 이름 앞에 on이 붙어있다면, 그게 바로 event listener!! 물론 event 사용할 땐 앞에 on 떼고 사용해야함.

 

 

---

event로는 window의 interface또는 object도 처리할 수 있다. 그러면 window의 event를 listen해보자.

HTML은 document를 이용했다면 window는 그대로 window 키워드를 사용한다.

 

아래와 같이 window 의 크기가 resize 될 경우 body 태그의 배경색을 변경하는 코드를 작성했다.

여기서 윈도우 창 크기를 변경하면

 

배경색이 토마토색으로 바뀜!

 

다른 예시로 브라우저가 와이파이에 연결되어있는지 확인하는 코드를 작성해봤다.

만약 와이파이가 해제되면 SOS no WIFI 라는 문장이, 와이파이에 연결되면 ALL GOOD 이라는 문장이 알림창으로 뜰 것이다!

 

---