천 줄 코딩도 한 삽질 부터

JavaScript 정리 2 본문

JS/JavaScript

JavaScript 정리 2

리준희 2020. 12. 17. 01:57

오랜만에 글을 쓰네요

 

드디어 애증의 운전면허도 끝났고, 코로나 확진자는 1000명을 넘어서

알바를 제외하고는 집 밖에 나갈일이 없는 요즘.. 집중하기 좋은 것 같네요

 

강의 코스 따라가다가 HTML 요소들을 JavaScript로 받아올때 바로 나오지가 않아서

정리할 겸 조금 적어봅니다

 

 

먼저 예시용 HTML파일입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Coreenee </title>
</head>
<body>
    <h2 id ="title" class = "daftPunk"> work it harder, make it better </h2>
</body>
</html>

 

 

 

querySelector()

querySelector()는 HTML문서에서 일치하는 첫 번째 태그를 객체로 가져옵니다.

클래스 역시 가져올 수 있습니다.

let title = document.querySelector("#title");

 

태그 뿐만 아니라 클래스도 가져올 수 있습니다.

 

 

 

addEventListener()

addEventListener()는 이벤트의 발생과 발생시, 실행할 함수를 argument로 받습니다

이벤트가 발생하는 모든 객체가 대상이 됩니다.

let title = document.querySelector("#title");

function clickEvent(){
	title.style.color = "aqua";
}

title.addEventListener("click", clickEvent);

<title을 클릭하면 색을 바꾸는 함수>

 

 

classList

태그가 class를 가지고 있다면 classList를 사용합니다.

객체로는 remove() add() contains()가 있습니다.

remove는 말 그대로 삭제, add는 추가이고,

contains는 해당 객체가 인자로 받은 클래스 명을 가지고 있는지 확인하고, 반환값은 boolean으로 나옵니다.

 

const title = document.querySelector("#title");
const DAFTPUNK = "daftPunk";

function listEditor() {
	const haveClass = title.classList.contains(DAFTPUNK);
    if (haveClass) {
    	title.classList.remove(DAFTPUNK);
	} else {
      title.classList.add(DAFTPUNK);
   }
}

<daftPunk 클래스가 없으면 추가해주고, 있으면 없애주는 함수>

 

 

 

막상 적으려니 생각이 별로 안나는 ㅋㅋ;

 

티스토리에 코드 삽입 기능이 있었다는 것도 알아가네요

 

수강중인 강의도 마무리가 보이고 있어요, 배포준비중입니다!

 

꾸준히 정진해보겠습니다. 감사하며 열심히 할게요.

저작자표시

'JS > JavaScript' 카테고리의 다른 글

JavaScript 정리 1  (0) 2020.12.02
'JS/JavaScript' Related Articles more
Comments