[Web Dev] javascript value 가져오는 방법 this 키워드 이용방법

javascript value 가져오기

 

javascript에서 HTML의 value값을 가져오는 방법은 간단하다.

 

document.querySelector('#value_id').value

document.getElementById('#value_id').value

document.getElementByClass('.value_class').value

 

이런식으로 가져오면 된다.

 

 

다음 예제를 보자.

 

<input id=night_day type="button" value="day" onclick="
    if(document.querySelector('night_day').value === 'day'){
        document.querySelector('body').style.backgroundColor = 'white';
        document.querySelector('body').style.color = 'black';
        this.value = 'white';
    }
    else{
        document.querySelector('body').style.backgroundColor = 'black';
        document.querySelector('body').style.color = 'white';
        this.value = 'night';
    }
    ">

 

<input> 태그의 id를 이용해서 조건문을 가동하는 코드다.

 

 

this 키워드

 

위 소스코드에서 <input>태그내에 작성되는 javascrip 상위 태그를 지향하고 있다.

this 키워드를 사용하는 방법은 상위태그 자체를 가리키고 있는 것이 된다.

 

this 키워드 사용방법을 알아보자. 위 소스코드에서 

this.value = 'white';

소소코드는 input의 value값을 변경하는 소스코드가 되는 것이다.

this코드가 강력한 점은 javascript에서 value를 가져오기 위해서

 

document.querySelector('#value_id').value

document.getElementById('#value_id').value

document.getElementByClass('.value_class').value

 

따위의 긴 소스코드를 계속해서 작성을 하지않게

도와주는 것이다.