[JS] Document object, querySelector, Event

Hyodduru ·2021년 9월 29일
0

JavaScript

목록 보기
5/60
post-thumbnail

출처 : 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 등으로 찾아야 한다.)
profile
꾸준히 성장하기🦋 https://hyodduru.tistory.com/ 로 블로그 옮겼습니다

0개의 댓글