Jehyun Jung

Slowly Developing Myself

Handling HTML Elements Using JavaScript

Built-in Variable

document, window와 같은 browser에서 사용가능한 변수들이 기본적으로 제공되며 해당 변수들을 활용해서 HTML를 수정할 수 있다.

#console.log의 경우 html 형태로 출력한다.
console.log(document)
#console.dir을 이용하게 되면 object형태로 출력한다.
console.dir(document)

document라는 object 형태로 반환하여 document에 들어 있는 모든 property 값들을 확인할 수 있다.

Handling Elements

Accessing Elements

<body>
    <h1 autofocus id="title">Grab me!</h1>
    <h2 class="test">hello</h1>
    <h2 class="test">hello</h1>
    <h2 class="test">hello</h1>
    <h2 class="test">hello</h1>
    <h2 class="test">hello</h1>
    <h2 class="test">hello</h1>
    <div class="test2">
      <h1>hello</h1>
    </div>
</body>

위의 HTML element에 접근하기 위해 javascript에서는 아래와 같은 방식들을 사용가능하다.

#ID로 접근하는 방법
const title=document.getElementById("title");

#class으로 접근하는 방법
const hellos=document.getElementsByClassName("test")
console.log(hellos)

#Tag 종류로 접근하는 방법
const hello=document.getElementsByTagName("div");
console.log(hello)

#CSS selector로 접근하는 방식
const hello2=document.querySelector(".test2 h1")
console.log(hello2)

const hello3=document.querySelector(".test")
console.log(hello3)

#querySelectorAll을 활용하면 CSS선택자에 해당하는 모든 html 원소를 선택 가능하다
const hello4=document.querySelectorAll(".test")
console.log(hello4)

Changing Value of HTML element

#document title 값을 바꾸면 해당 페이지의 제목이 바뀐다.
document.title="HEllO";

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

#아래와 같이 html property을 수정할 수 있다.
title.innerHTML="Hello"
title.autofocus=false;
title.className="hello"
title.style.color="Red"

Handling Events

<h1 autofocus id="title">Grab me!</h1>

javascript에서는 html 요소에 대한 event들을 처리할 수 있다.

event에는 mouseclick, mouseenter, 등 여러 종류가 있는데 각각의 event가 발생할 때의 반응을 정의해줄 수 있다.

예를 들어 위의 html element을 클릭하는 경우 색깔을 바꾸게 하고 싶다라고 하면

const title=document.querySelector("h1");

function handleTitleClick(){
    const currentColor=title.style.color;
    let newColor;
    if(currentColor=== "blue"){
        newColor="tomato"
    }else{
        newColor="blue"
    }
    title.style.color=newColor
}
title.addEventListener("click",handleTitleClick);

위와 같이 해당 element에 addEventListener function을 활용해서 event handler을 등록해준다.

function handleMouseEnter(){
    console.log("mouse entered")
}
function handleMouseLeave(){
    console.log("mouse leaved")
}

title.addEventListener("mouseenter",handleMouseEnter)
title.addEventListener("mouseleave",handleMouseLeave);
console.log(title)

window 변수에 대한 event도 처리가능하다.

function handleWindowResize(){
    document.body.style.backgroundColor="tomato"
}
function handleWindowCopy(){
    alert("copy event occured")
}
function handleWindowOffline(){
    alert("WIFI OFF")
}
function handleWindowOnline(){
    alert("WIFI ON")
}
window.addEventListener("resize",handleWindowResize)
window.addEventListener("copy",handleWindowCopy)
window.addEventListener("offline",handleWindowOffline)
window.addEventListener("online",handleWindowOnline)

Much Prettier Coding

<h1 id="title">Grab me!</h1>

const title=document.querySelector("h1");
function handleTitleClick(){
    const currentColor=title.style.color;
    let newColor;
    if(currentColor=== "blue"){
        newColor="tomato"
    }else{
        newColor="blue"
    }
    title.style.color=newColor
}
title.addEventListener("click",handleTitleClick);

아래와 같이 HTML를 직접 수정할 수 있지만, JavaScript에서 HTML를 수정하는 것은 좋지 않다.

style.css
body {
  background-color: white;
}
h1{
  color:blue;
}

.active{
  color:tomato;
}

위와 같이 CSS파일에 active class 정의를 만들어 놓은 후 Javascript에서는 특정 tag의 class에 active를 추가하는 방식이 더 좋다.

const h1=document.querySelector("h1");
//해당 tag의 class가 active인 경우 active를 해제하고, active가 아닌 경우 active를 활성화해준다.
function handleTitleClick(){
    const className="active"
    let newClassName;
    if(h1.className===className){
        newClassName=""
    }else{
        newClassName=className
    }
    h1.className=newClassName
}
//위의 방식은 class가 한개일때만 적용가능하고, 여러개의 class가 동시에 있는 경우는 classList를 활용한다.
function handleTitleClick(){
    const className="active"
    if(h1.classList.contains(className)){
        h1.classList.remove(className)
    }else{
        h1.classList.add(className)
    }
}
//JavaScript에서는 특정 class에 대해 활성화/비활성화를 쉽게 할 수 있도록 아래와 같이 toggle 함수를 제공한다.
function handleTitleClick(){
    h1.classList.toggle("active") 
}

References

link: nomadcoders

댓글남기기

참고