[javascript] 바닐라 JS로 크롬 앱 만들기 #3.0 - #3.4

 

 

자바스크립트는 HTML에 접근할 수 있게끔 설정되어 있다.

 

document.title 이라고 콘솔에 입력하면 <title> 사이에 적은 텍스트가 나온다!

 

변경도 가능할까?

 

document.title = "mandu";  하면 새로고침 하기 전까진 title이 mandu로 바뀐다.

 

 

 

 

JS에서 HTML을 변경하는 것도 가능하다! (접근하고 읽고 변경할 수 있다.)

 

 

 

document.getElementById("title")

하면 id가 title인 태그를 가져온다. 

 

consol.dir 하면 더 자세하게 볼 수 있다. 

그 속에 outerHTML, locanName, innerHTML .... 등등등

autofocus 쓰면 autofocus가 true가 된다. 

 

 

 

---

document.getElementbyClassName, TagName ... 

 

document.querySelector(".hello h1")

document.querySelector(".hello h1:first-child")

css 셀렉터 방식으로 가져올 수 있다. 

hello 클래스 안에 h1을 가져온다! 

 

첫번째 element만 가져온다.

 

 

모두 가져오고 싶다면

document.querySelectorAll(".hello h1")

이렇게 쓰면 된다. 

 

 

document.querySelector("div.hello h1:first-child")

class hello를 가진 div 내부의 first-child인 h1을 찾아오는 것 

 

title.style.color = "blue" 이런식으로 바꿀 수 있다. 

 

 

마우스를 올렸을 때, 입력을 마쳤을 때, 와이파이가 끊겼을 때, 등등 다 이벤트 !  

 

 

addEventListener("click", function)

event를 listen하는 것!

클릭하는 걸 listen할거야. 

 

function은 자바스크립트에게 실행하게 하는 거야. 

 

 

구글에 `${찾고 싶은 element의 이름}  html element mdn`이라고 검색하기

Web APIs라는 문장이 포함된 페이지를 찾는다! 여기서 event에 관한 것들을 볼 수 있다.

 

복사하고 붙여넣기도 감지할 수 있어! 대박...

 

console.dir(엘리먼트) 쳐서 나오는 애들을 봐도 된다. 

 

mouseenter! 마우스가 그 범위에 들어오면! 와 신기해...