[JavaScript]Document 객체 활용

JavaScript는 HTML에 연결이 되어있음 ( 접근이 가능하고 읽을 수 있다는 것 )
자바스크립트에서 HTML의 document객체를 제공하고 , 수정 , 변경도 가능함

자바스크립트로 HTML의 정보 가져오기
document객체 통해 가져오기

id를 통해 element가져오기 , 괄호안은 string 이어야 함.

const title = document.getElementById("hehe");

자바스크립트로 HTML의 정보를 가져왔을때 , 자바스크립르는 해당 HTML의 요소를 변경할 수 있음

title.innerText="Change";

//querySelector로 elements 들고오기
//단 동일한 elements가 있다하더라도 첫번째 것만 출력
//모두 출력하고 싶다 , querySelectorAll 사용

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

console.log(title1);

//elements에 이벤트 추가하기

const even = document.querySelector("#event");

console.dir(even);

//클릭시 글자 색 변경
const handleClick = () => {
even.style.color = "red";
};

//엘리먼트위에 마우스 올릴 시 이벤트 발생

const handleMouseEnter = () => {
    even.innerText = "마우스 내려!";
}

//엘리먼트에 마우스가 떠날 시 이벤트 발생

const handleMouseLeave = () => {
    even.innerText="마우스 올려!" ; 
}

even.addEventListener("click" , handleClick);
even.addEventListener("mouseenter" , handleMouseEnter);
even.addEventListener("mouseleave",  handleMouseLeave)