[바닐라 js 챌린지] 3.0강 getElementById, event , classList, toggle ... ✨

3.0  document

 

console에 document를 입력하면 작성한 html을 확인할 수 있다.

document는 쉽게 설정하자면 브라우저에 존재하는 object !

 

콘솔에 document.body 입력시 body 호출 가능 

--> js를 통해서 html, css에 접근가능하다.

 

3.1 - 3.2

document라는 함수 중에는 getElementById라는 함수가 존재하는데 이 함수는 html에서 id를 통해서 element를 찾아주는 함수다.

이 element를 찾으면 id, className, innetText등 의 값들을 변경하거나 가져올 수 있다.

 

getElementById : html에서 id를 통해서 element를 찾아주는 함수

getElementByClassName :  className을 가져옴. (array를 반환)

getElementByTagName: name을 할당할 수 있음 (array를 반환) 여기서 tag는 anchor, dv, section, button 등 같은 것들

querySelector : element를 css selector방식으로 검색할 수 있음  ex) h1:first-child 

querySelectorAll : 이 selector안의 조건에 부합하는 모든 element를 가져다줌

 

<h1 id="hello">hello</h1>
<!--html-->

const h1 = document.getElementById("hello");
// const h1 = document.querySelector(".hello"); 위와 같은 코드 !
h1.innerText = "thank you";

//javascript

h1의 id인 hello를 불러와서 innerText를 통해 text를 바꿀 수 있다.

그리고 저중에서는 querySelector을 가장 많이 사용한다고 한다 !

 

 

3.3 

event : 어떤 행위를 하는 것 ex) 클릭하거나 움직이거나 버튼 누르거나 ~ 등등

eventListener : event를 listen한다 ! (무슨 이벤트를 사용하고 싶은지 알려줘야함)

<div class="hi">
     <h1>hello</h1>
</div>
<!--html-->

const color = document.querySelector("div.hi:first-child h1");

function handleTitleClick(){
	color.style.color = "blue";
    }
    
    color.addEventListener("click", handleTitleClick);
    
    // 글자 클릭 시, 파란색으로 폰트 색 변화
    // handleTitleClick() x handleTitleClick o
    //--> 우리가 직접 실행하지 않고 자바스크립트한테 실행권을 넘겨줌

3.4

const title = document.querySelecot("div.hello:first-child h1");

function handTitleClick() {
console.dir(title);
}

console.dir(title); 입력시, 콘솔에 다양한 이벤트가 나옴 !

mdn사이트 참고하기 귀찮을때 좋은 방법,,

onclick, onmouseenter .. 등  나오는데 실제로 사용할떈 on은 빼고 입력하자 

 

<div class="test">
 	<h1>event 연습 ! </h1>
 </div>

const test = document.querySelector("div.test:first-child h1");

function handleTitleClick() {
	test.style.color = "yellow";
    }
    
 function handleMouseEnter() {
   test.innerText = "마우스 여깄어요 !";
   }
   
  function handleMouseLeave() {
  test.innerText = "마우스 갔어요 !";
  }
  
  test.addEventListener("click", handleTitleClick);
  test.addEventListener("mouseenter", handleMouseEnter);
  test.addEventListener("mouseleave", handleMouseLeave);

이벤트로 여러가지 만들어보기 !

 

3.5

function handleWindowResize() {
	document.body.style.backgroundColor = "tomato"; 
    // 사이즈 변경시 , 토마토색으로 변함
 }
    
function handleWindowCopy(){
	alert("copier");
    // 사용자가 복사할 경우 알람 "copier!"뜸
}

window.addEventListener("resize", handleWindowResize);
window.addEventListener("copy", handleWindowCopy);

window는 기본적으로 제공해준다 !

 

 

3.6

 

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

function handleTitleClick(){
	const currentColor = h1.style.color;
    let newColor;
    
   if(cureentColor === "blue"){
   newColor = "tomato";
   }else {
   newColor = "blue";
   }
   h1.style.color = newColor;
   }
   
   h1.addEventListener("click",handleTitleClick);

예전에 배운 if 문을 사용해서 색변화 조건문을 만들 수 있다 .

 

 

3.7

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

function hadleTitleClick(){

  const clickClass = "click";  // click은 className
  
  if(h1.className == clickClass){
    h1.className = "";
  }else {
    h1.className = clickClass;
  }
}

h1.addEventListener("click", hadleTitleClick);

// h1의 className click일때는 className을 없애고
// 아닐경우에는 className을 clickClass로 지정

h1 {
color: tomato;
}
.click {
 color: blue;
 transition: color 0.5s ease-in-out;  
}

 

3.8

 

class가 여러개 필요할때가 있다. 색변경을 해주는 class뿐만 아니라 글씨체의 변환을 원하거나 할때 class가 여러개 필요할 수 있다. 그럴때 classList를 사용하면 편리하다

 

classList :우리가 class들의 목록으로 작업할 수 있게끔 허용해줌

className: 이전 class를 상관하지않고 모든걸 교체함 (색변경 클래스가 사라질때 폰트클래스도 같이 사라짐)

 

<div class="hello">
	<h1 class="fontSize">click me!</h1>
</div>
<!--html-->

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

function hadleTitleClick(){
  const clickClass ="click";
  
  if(h1.classList.contains(clickClass)){ //clickiClass가 contain되어있다면
    h1.classList.remove(clickClass);  //clickClass를 지운다
    
  }else {
    h1.classList.add(clickClass);  //clickClass 추가
  }
}

h1.addEventListener("click", hadleTitleClick);

이렇게 classList를 사용하면 clickClass가 사라졌다 생기는 와중에도 h1의 fontSize (class)는 계속 유지됨

 

하지만 if문을 사용해도 좋겠지만 toggle이라는 함수를 사용하면 코드를 더 간단하게 줄일 수 있다고 한다 !

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

function hadleTitleClick(){
 h1.classList.toggle("click"); 
 //click class가 이미 있다면 지워주고 없으면 추가시켜줌
}

h1.addEventListener("click", hadleTitleClick);

toggle : classname을 확인하는 함수 (기본적으로 위의 코드를 구현하는 함수다.)

토큰이 없으면 생성시키고 있으면 지워준다.

 

저 긴 if문 코드를 이렇게 한줄로 줄일 수 있다 !  처음부터 알았으면 더 편리했겠지만 이렇게 차근차근 알아가는것도 넘 재밌다 .. 마지막에 toggle 한 문장으로 지금까지 썼던 코드가 다 대체되어서 기분이 참 묘하다 

 

2022.06.11 - [웹 개발/javascript] - 바닐라 js 2주 챌린지 2강 전체 정리 ✨