const title = document.getElementById("title");
console.dir("title");
title.innerText = “got you”
console.log(title.id);
console.log(title.calssName);
const hellos = document.getElementsByClassName("hello");
hellos.(으로 접근 가능)
const title = document.getElementsByTagName("hi"); (모든 hi 태그를 array로 가져옴. )
console.log(title);
const title = document.querySelector("hi");
console.log(title);
const title = document.querySelector(".hello h1");
console.log(title);
const title = document.querySelectorAll(".hello h1");
console.log(title);
const title = document.querySelector("div.hello:first-child h1");
console.dir(title);
title.sytle.color="blue";
const title = document.querySelector("div.hello:first-child h1");
function handleTitleClick(){
title.style.color = "blue";
}
title.addEventListener("click",handleTitleClick // 여기 괄호가 들어가면 안 된다.);
이벤트 처치하기
function handleMouseEnter() {
title.innerText = "Mouse is here!"
}
function handleMouseLeave() {
title.innerText = "Mouse is gone!"
}
title.addEventListener("mouseenter", handleMouseEnter);
title.addEventListener("mouseleave", handleMouseLeave);
title.onclick = handleMouseEnter;
title.addEventListener(“mouseenter” , handleMouseEnter);
위에 두 코드는 동일하나 addEventListener를 선호하는 이유는
removeEventListener을 통해서 event listener을 제거할수있기 때문이다.
document에서 body,head,title 은 중요해서 언제든
ex) document.body 로 가져올수있지만
div나 h1 등 element 들은 querySelector getElementById등으로 찾아야한다.
ex) document.querySelector(“h1”);
window는 기본제공
function handleWindowResize(){
document.body.style.backgroundColor = “tomato”;
}
function handleWindowCopy(){
alert(“copier”);
}
window.addEventListener(“resize”, handleWindowResize);
window.addEventListener(“copy”, handleWindowCopy);
const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick() {
if (h1.sytle.color === "blue") {
h1.sytle.color = "tomato";
} else {
h1.sytle.color="blue";
}
}
h1.addEventListener("click", handleTitleClick);
const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick() {
const currentClolr = h1.sytle.color;
let newColor;
if (currentClolr === "blue") {
newColor = "tomato";
} else {
newColor="blue";
}
h1.sytle.color = newColor;
}
h1.addEventListener("click", handleTitleClick);
=== 값이 일치함.
= color를 바꿔줌.
1) HTML파일은 CSS문서와 JS문서를 임포트 하고있음.
2) CSS에 .active라는 class를 생성해주고
3) addEventListener로 h1을 클릭하면 handleTitleClick 함수가 작동
4) handleTitleClick 함수는 h1의 class name을 "active" 로 바꿈
5) .active의 color는 토마토색이기 때문에 토마토 색이 됨
css
body {
background-color: beige;
}
h1 {
color:cornflowerblue;
transition:color 0.5s ease-in-out;
}
.active {
color: tomato;
}
js
const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick() {
h1.className = "active";
}
h1.addEventListener("click", handleTitleClick);
const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick() {
if(h1.className === "active") {
h1.className = "";
} else {
h1.className = "active";
}
}
h1.addEventListener("click", handleTitleClick);
const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick() {
const clickedClass = "clicked";
//오류를 쉽게 발견, 줄이는 방법. const에 저장.
if(h1.className === "clickedClass") {
h1.className = "";
} else {
h1.className = "clickedClass";
}
}
h1.addEventListener("click", handleTitleClick);
classList를 이용하는건
js에서 건드리는건 HTML element가 가지고있는 또하나의 요소 사용하는 것이다.
= element의 class내용물을 조작하는 것을 허용한다는 뜻
//특정한 클래스만 추가, 제거
const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick() {
const clickedClass = "clicked";
if(h1.classList.contains(clickedClass)) {
h1.classList.remove(clickedClass);
} else {
h1.classList.add(clickedClass);
}
}
h1.addEventListener("click", handleTitleClick);
toggle은 토큰이 존재하면 토큰제거
토큰존재 하지않으면 토큰 추가
const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick() {
h1.classList.toggle("clicked");
}
h1.addEventListener("click", handleTitleClick);