출처 : nomad coder 크롬앱 만들기
The Document Object
document : Html에 대한 모든 것을 js로 보여준다. 접근할 수 있는 html객체. 나의 website. 모든 것들은 document에서부터 시작한다.
document object를 이용하여 html을 변경할 수 있다.
ex)
document.title = "a";이 코드를 통해 이 문서의 제목이 a로 바뀐다.
Searching For Elements
getElementById()
document를 통해 element 가져오기
ex)html 코드창
<body>
<h1 id = "title">Grab me!</h1> </body>script.js 코드 창
const title = document.getElementById("title")
title.innerText ="Got you!";
console.log(title.className);
console.dir(title);console.dir 은 console.log 보다 더 element를 자세히 보여준다.
console 내에서 이와 관련 정보 확인 가능!
HTML을 JS를 통하여 가져오고 JS를 통하여 항목들을 변경한다.
querySelector()
querySlector를 이용하여 element를 CSS방식으로 검색할 수 있다.
ex)
<div class = "hello"><h1>Grab me!</h1></div>
js 내에
document.querySelector(".hello h1")위 코드를 통하여 hello라는 class 내부에 있는 h1을 가져올 수 있다.
querySelector는 하나의 element만 반환해준다는 특징을 가지고 있다.
- 추가사항
getElementByClassName(), getElementByTagName(), querySelectAll() 과 같은 함수는 element들을 array로 반환해준다.
const title = document.querySelector("#hello")
const title = document.getElementById("hello")위의 두 코드들은 같은 역할을 한다. getElementById 내에는 #붙혀줄 필요가 없다. id값을 찾고 있다는 것을 알고 있기 때문!
ex) script.js 내에 다음과 같은 코드를 적어주면 title 내용이 바뀐다.
const title = document.querySelector(".hello h1");
title.innerText = "Hello";ex) class hello 내의 첫번째 h1을 부르기
const title = document.querySelector(".hello : first-child h1");
console.log(title)ex) div내에 class hello 내의 첫번째 h1을 부르기
const title = document.querySelector("div.hello : first-child h1");
console.log(title);ex) title 내부 내용 보기
console.dir("title");ex) 변수 title의 style을 js 문법으로 바꾸기
title.style.color ="blue";Event
addEventListener()
addEventListener() : event를 listen하는 function
ex)
const title= document.querySelector("div.hello:first-child h1");
function handleTitleClick(){
console.log("title was clicked");
title.style.color = "blue";}
title.addEventListener("click",handleTitleClick);
addEventListener내의 "click"은 click 내의 event를 들어라
addEventListener내의 handleTitleClick은 이 함수를 실행시켜라 라는 의미.
js에게 function을 넘겨주어서 유저가 title을 click한 경우에 js가 유저 대신 실행버튼을 눌러주게 하는 것!
<Listen 하고 싶은 event 찾는 법>
- h1 html element mdn 검색 -> 링크에 Web APIs 포함된 페이지 찾기(js 관점의 HTML Heading Elements 라는 의미)
- element를 console에 출력시키기 ex) console.dir(title) -> on으로 시작하는 property들에서 찾을 수 있다. ex) onabort, on auxclick,,,,
eventlistener 에 event 사용할 때는 on 빼주기!
ex) 마우스 글자에 가져다 댔을 때 event 실행시키기 -> onmouseenter
function handleMouseEnter(){
console.log("mouse is here!")};
title.addEventListenr("mouseenter", handleMouseEnter);ex) onmouseleave
function handleMouseEnter(){
title.innerText="Mouse is here!";}
function handleMouseLeave(){
title.innerText="Mouse is gone!";}
title.addEventListner("mouseenter", handleMouseEnter);
title.addEventListner("mouseleave", handleMouseLeave);
ex) resize
function handleWindowResize(){
document.body.style.backgroundColor = "tomato";}
window.addEventListener("resize", handleWindowResize)ex) copy
function handleWindowCopy(){
alert("copier!")}
window.addEventListener("copy", handleWindowCopy)ex) offline/ online
function handleWindowOffline(){
alert("SOS No WIFI")}
function handleWindowOnline(){
alert("ALL GOOD")}
window.addEventListner("offline", handleWindowOffline)
window.addEventListner("online", handleWindowOnline)
if click event
ex) 처음 h1을 click 했을때는 blue, 그다음 click시 tomato 가 반복되게 만들기
const h1 = document.querySelector("div.hello : first child h1");
function handleTitleClick(){
const currentColor = h1.color.style ;
let newColor;
if(currentColor === "blue"){
newColor = "tomato"}
else{newColor = "blue"}
newColor = h1.color.style;}
h1.addEventListener("click", handleTitleClick);
h1.style.color을 일일히 쓰는 대신 변수를 지정해주어야 무엇을 하려고 하는지 이해하기가 쉽다.
정리
1. element를 찾아라
2. event를 listen 해라
3. event에 react 해라 (무엇을 보여주거나 감추거나 색깔을 바꾼다는 것 등과 같다.)
ex) style 과 같은 css 속성을 js에 쓰지 않고 같은 효과 적용하기
style.css 내에
h1{color: blue;}
.active{color : tomato;}script.js 내에
const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick(){
if(h1.className==="active"){
h1.className = "";} else
{h1.className = "active";}active가 아닐 때의 className 자체가 없기 때문에 ""로 기입한다.
consoloe.log(h1.className)으로도 확인 가능!
*active라고 일일히 적어주면 오타로 인해 error가 날 가능성이 크다.
변수를 지정해주는 게 좋다.
ex) const activeClass = "active"
"active"를 모두 activeClass 로 기입해주기.
classList()
ClassName을 if 내에 사용하면 기존의 html 내에 적어둔 h1의 className이 그냥 바뀌어버린다. 대체되지 않기 위해서 classList()를 사용할 수 있다.
ex)
function handleTitleClick(){
const activeClass = "active";
if(h1.classList.contains(activeClass)){
h1.classList.remove(activeClass)}
else
{h1.classList.add(activeClass)}}이를 통해 기존의 className 은 변하지 않고 list를 추가했다 뺐다를 할 수 있다.
toggle function
toggle : className이 존재하는 지 확인한다.
만약 className이 존재 -> className 제거
만약 className이 없다면 -> className 을 추가해주는 역할을 한다.
ex)
function handleTitleClick(){
h1.classList.toggle("active");}아주 간단해짐.
<추가사항>
-
.removeEventListener 을 통하여 event 삭제 가능.
-
event의 또다른 형태 : element.event=function
ex)
title.onclick=handleTitleClick;
title.onmouseenter=handleMouseEnter;
- console에 바로 호출 가능한 element 들 : document.body, title, head (나머지는 querySelector나 getElementById 등으로 찾아야 한다.)
