HTML에 작성한 내용이 document 객체에 저장되어 있다.
때문에 객체는 변경 추가 업데이트가 가능하기 때문에
자바스크립트를 통해 HTML 정보를 변경할 수 있다.
Searching For Elements
자바스크립트 클래스 가져오기
자바스트립트에 클래스를 가져올 때, getElementByclass
여러개의 클래스가 존재한다면, 배열로 객체를 가져올 수 있다.
getElementById
아이디 이름으로 태그 가져오기
getElementByClassName
클래스 이름으로 태그 가져오기
getElementByTagName
<body>
<div class="title">
<h1>Grab me!</h1>
</div>
<body>
const title = documnet.getElemnetsByTagName("hi");
console.log(title);
querySelector
getElementsByTagName을 사용할 경우 하나의 태그가 존재해도 배열로 반환한다. 때문에 더욱 적합한 메서드는 querySelector
const title = document.querySelector(".hello h1");querySelector에서는 클래스 이름과 태그를 모두 명시해 주어야한다.
querySelector는 첫번째 element만 가져온다.
querySelectorAll은 모든 element를 가져온다.
event
const title = documnet.querySelector("div.hello:first-chile h1");
function handleTitleClick() {
console.log("title was clicked!");
}
title.addEventListener("click", handleTitleClick);이벤트를 넘겨줄 때는 실행버튼을 눌러선 안되고, 함수만 넘겨줘야한다.
이벤트를 설정하는 또 다른 방법은 프로퍼티를 활용하는 것이다
title.onclick = handleTitleClick;하지만 보통 addEventListener 사용을 더욱 선호한다.
왜냐하면 addEventListener를 사용하면 이벤트 제거가 쉽기 때문이다.
function handleWindowResize() {
document.body.style.backgroundColor = "tomato";
}
function handleWindowCopy() {
alert("copier!");
}
window.addEventListener("resize", handleWindowResize);
window.addEventListener("copy", handleWindowCopy);
function handleWindowOffLine() {
alert("SOS no WIFI");
}
window.addEventListener("offline", handleWindowOffLine);
function handleWindowOnLine() {
alert("on WIFI");
}
window.addEventListenr("online", handleWindowOnLine);document.div 이런식으로는 가지고 올 수 없어
document는 body, head, title이 중요하기 때문에 이들은 존재하지만,
그외의 것들은 querySelector 등을 사용해야 한다.
wifi가 연결되어 있는지 확인하는 것
유저가 title을 click 했을 때 title 파란색으로 칠해주고, 한번 더 누르면 tomato 색으로 변경하기, 즉 같은 이벤트에 순서가 존재함을 의미한다.
text 색 변경
CSS로 style 값 변경하기 (.style.color)
function handleTitleClick() {
if (title.styel.color === "blue") {
title.style.color = "tomato";
} else {
title.style.color = "blue";
}
}
function handleTitleClick() {
const currentColor = h1.style.color;
let newColor;
if (currenColor === "blud") {
newColor = "tomato";
} else {
newColor = "blue";
}
h1.style.color = newColor;
}
title.addEventListener("click", handleTitleClick);html에 클래스 이름 넣기
자바스크립트가 html을 변경할거고, css와 소통할 일이 없어짐
body {
background-color: beige;
}
h1 {
color: cornflowerblue;
}
.active {
color: tomato;
}
/* h1 클래스에 active class를 전달하기 */function handleTitleClick() {
const clickedClass = "clicked";
if (title.className === clickedClass) {
title.className = "";
} else{
title.className = clickedClass;
}
}
title.addEventListener("click", handleTitleClick);
html 문서의 h1 자리에 class가 추가 됌
위 코드에서 "active"라는 string을 두번 쓰고 있음
이것은 에러를 발생시킬 수 있음
때문에 clickedClass라는 변수를 생성해서 코드를 작성하는 것이 좋음
why?
clickedClass 변수의 이름을 틀리면 자바스크립트는 오류를 잡아낼 수 있다.
하지만 string 문자열의 오타는 자바스크립트가 오류를 잡아낼 수 없기 때문이다.
클래스의 전체 교체는 오류를 가져올 수 있다. (ClassList)
function handleTitleClick() {
const clickedClass = "clicked";
if (title.classList.contains(clickedClass)) {
title.classList.remove(clickedClass);
} else {
title.classList.add(clickedClass);
}
}
title.addEventListener("click", handleTitleClick);
toggle function 한줄로 줄이기
toggle function은 class name이 존재하는지 확인하고,
class name이 존재하면 toggle은 class name을 제거하고,
class name이 존재하지 않는다면 toggle은 class name을 추가한다.
function handleTitleClick() {
title.classList.toggle("clicked");
}
title.addEventListener("click", handleTitleClick);