Search
Duplicate

JS 입문 기초 정리2

간단소개
팔만코딩경 컨트리뷰터
ContributorNotionAccount
주제 / 분류
JS
Scrap
태그
기초
9 more properties
본 포스팅은 정말 정말 처음 입문하는 사람의 공부 기록입니다... 얻어가실 정보는 별로 없겠지만 혹시 틀린 부분이 있다면 언제든 댓글 달아주세요!

html에 있는 요소 가져오기

//console document.title > momentum
JavaScript
복사
document 도 객체이기 때문에, document 의 title 요소를 가져오면 현재 html의 title 요소가 나타난다.
document.body document.title document.head
JavaScript
복사
위와 같은 중요한 요소들만 document.~~ 으로 가져올 수 있다. 다른 요소들은 아래의 querySelector 등으로 가져와야 한다.
<h1 class="hello" id="title">Hello World!</h1>
HTML
복사
예시 HTML 구문

getElementById

const title = document.getElementById("title");
JavaScript
복사
title을 id가 "title" 인 요소로 선언한다. 이 요소 역시 객체이다.
title.innerText = "HELLO";
JavaScript
복사
이렇게 바꾸면 위 HTML 구문에서 <h1> 내부에 있는 텍스트가 바뀌게 된다.

getElementsByClassName

const title = document.getElementsByClassName("hello");
JavaScript
복사
title 을 class 이름이 "hello" 인 요소로 선언한다.
위 HTML구문에서 <h1> 요소의 클래스 이름이 hello 이므로 그 요소가 선언된다.
이처럼 id 나 classname 으로 html의 요소를 가져올 수 있다.

querySelector

const titleByClass = document.querySelector(".hello"); const titleById = document.querySelector("#title");
JavaScript
복사
querySelector 을 이용하여 Selector 형식으로 요소를 가져올 수 있다. 위 두 코드는 같은 요소를 가리킨다. (위의 HTML 구문 기준)
<body> <div class="hello"> <h1>Grab Me1!</h1> </div> <div class="hello"> <h1>Grab Me2!</h1> </div> <div class="hello"> <h1>Grab Me3!</h1> </div> <script src="app.js"></script> </body>
HTML
복사
const title = document.querySelector(".hello h1")
JavaScript
복사
HTML 의 body 가 위처럼 되어있을 때, title 은 첫번째 element인 <h1>Grab Me1!</h1> 만 가져온다.
모두 가져오고 싶다면 document.querySelectorAll(".hello h1") 을 사용해야 한다.
querySelectorAll 을 사용하면 위의 요소들이 array 형태로 저장된다.

Events

title = document.querySelector(".hello h1"); console.dir(title);
JavaScript
복사
→콘솔에 표시되는 요소들 중 on~ 으로 시작되는 요소들이 Events

addEventListener

title.addEventListener("click", handleTitleClick);
JavaScript
복사
title의 onclick 이벤트를 받아온다. 앞에 on을 빼고 "click" 만 쓴 후, handleTitleClick 함수를 가져온다.
click 이벤트가 실행되면, 즉 title 요소를 클릭하면 handleTitleClick 함수가 실행된다.
addEventListener 를 사용하면 후에 removeEventListener 를 이용하여 이벤트를 삭제할 수 있다.
title.addEventListener("click", handleTitleClick); title.addEventListener("mouseenter", handleMouseEnter); title.addEventListener("mouseleave", handleMouseleave); title.onclick = handleTitleClick; title.onmouseenter = handleMouseEnter; title.onmouseleave = handleMouseleave;
JavaScript
복사
위의 코드를 아래처럼 바꿀 수 있다. title의 요소가 on 되면, 함수를 실행하도록 만드는 것이다. (remove 가 되지 않아 addEventListener 를 쓰는 것이 좋다)
window.addEventListener("resize", handleResize); -> window 는 미리 설정된 전역 객체라고 한다!
JavaScript
복사
function handleTitleClick() { const curColor = title.style.color; let newColor; if (curColor === "black") newColor = "blue"; else newColor = "black"; h1.style.color = newColor; console.log(newColor); }
JavaScript
복사
→ js 에서 css 를 바꾸는 것이다. style을 css 에서 바꾸려면
h1 { color:black; } .active{ color:blue; }
CSS
복사
style.css
const h1 = document.querySelector(".hello h1"); function handleTitleClick() { if (h1.className === "active") h1.className = ""; else h1.className = "active"; } h1.addEventListener("click", handleTitleClick);
JavaScript
복사
app.js
위처럼 사용할 수 있다. CSS 파일에서 active 클래스를 만들고 h1의 클래스를 바꿔주는 것이다.

Refactoring

function handleTitleClick() { const clickedClass = "clicked" if (h1.className === clickedClass) h1.className = ""; else h1.className = clickedClass; }
JavaScript
복사
→"clicked" 를 여러번 쓸 때 에러 발생할 수 있으므로, clickedClass를 지정해주면 오타가 나도 콘솔 에러를 띄워줄 수 있다.
여러 번 쓰이는 string을 변수에 저장하기!
function handleTitleClick() { const clickedClass = "clicked" if (h1.classList.contains(clickedClass)) h1.classList.remove(clickedClass); else h1.classList.add(clickedClass); }
JavaScript
복사
→ className 자체를 바꿔주면 원래 초기에 있던 클래스들이 사라지고 clickedClass 로 교체되기 때문에, classList 를 이용하여 contain 되어 있으면 remove , 아니라면 add 해준다.
function handleTitleClick() { h1.classList.toggle("clicked");
JavaScript
복사
위의 과정들을 해주는 함수 toggle 을 이용하면 코드를 한줄로 줄일 수 있다. classname 을 한번만 쓰기 때문에 따로 변수 설정을 하지 않고 "clicked" 라고만 써도 된다.