js html 접근, 이벤트

js에서 html에 접근, 수정 가능.

콘솔에서 documnet 를 치면 html 내용이 나옴

document.title = "string" 과 같은 형식으로 수정 가능.

 

document.getElementById("string") 과 같이 html에서 지정한 id에 해당하는 부분을  get할 수 있음

 

const grab = document.getElementById("hi");
console.log(grab);

과 같이 하면 hi 라는 Id에 해당하는 부분

   <h1 id="hi">hello world</h1>

을 긁어옴. 

const grab = document.getElementById("hi");
grab.innerText = "Hi";

이렇게 해서 html에서 해당 id 내부의 내용을 바꿀 수 있음.

 

 

document.querySelector(".className h1")

위 함수를 사용하면 해당 클래스 내부의 h1을 끌어내는게 가능(css형식으로)

querySelectorAll 로 array 형태로 모두 갖고오기 가능 

 

const grab = document.querySelector('#hi')
console.dir(grab);
grab.style.color="blue"

console.dir에서 grab에 해당하는 부분의 정보를 확인

grab 속의 style object의 color을 바꿔서 html 수정하여 글자의 색을 변경 가능

 

 

 

 

이벤트

 

 

html element를 사용한 이벤트

const grab = document.querySelector('#hi')
function funcname() {
    alert("clicked");
}
grab.addEventListener("click",funcname);

이벤트가 발생했을때 일어날 일을 함수 속에 넣어둔뒤에

 

element.addEveneListner("이벤트종류",함수명) 

또는

element.on이벤트명 = 함수명

형태로 사용

 

위쪽의 형태로 사용할때 .removeEventListner 사용해서 eventlistner를 제거 가능

 

 

 

window 사용한 이벤트

window.addEventlistner("window이벤트 (resize)",함수명)

const grab = document.querySelector('#hi')
function funcname() {
    console.log("Hi");
}
function func2() {
    document.body.style.backgroundColor="white"
    console.log("resize");
}
func2()
grab.addEventListener("mouseenter",funcname);
window.addEventListener("resize",func2);

const grab = document.querySelector('#hi')
function changeColor() {
    const color = grab.style.color;
    let status;
    if(color==='red')
    {
        status="black";
    }
    else
    {
        status="red";
    }
    grab.style.color = status;
}
grab.addEventListener("mouseenter",changeColor);

 

 

하지만 이렇게 하면 자바스크립트에서 CSS를 조정하는 상황이 되어버림.

각자의 역할에 맞는 부분을 수행 하도록 수정

 

 

js 코드

const grab = document.querySelector('h1')
function changeColor() {
    const check='active'
    if(grab.className===check)
    {
        grab.className="";
    }
    else
    {
        grab.className= check;
    }
       
}

css코드

.active
{
    color:white;
}

css에서 특정 class에 대한 스타일을 조정하고 js에서 이벤트를 감지해서 class를 지정해준다.

 

하지만 이렇게 한다면 해당 h1에 원래 className이 있었다면

그것은 지워져버리고 active가 생겼다가 사라지는 것만 반복됨.

 

이것을 방지하기 위해서  classList 를 사용할 것.

 

const grab = document.querySelector('h1')
function changeColor() {
    const check='active'
    if(grab.classList.contains(check))
    {
        grab.classList.remove(check);
    }
    else
    {
        grab.classList.add(check);
    }
       
}
grab.addEventListener("click",changeColor);
console.log(grab)

 

이 기능을 좀 더 편하게 만들어주는 함수인 toggle을 활용할 것이다.

const grab = document.querySelector('h1')
function changeColor() {
    const check='active'
    grab.classList.toggle(check);
       
}
grab.addEventListener("click",changeColor);
console.log(grab)

 

toggle로 해당 class가 없다면 추가, 있다면 제거.