[javascript] getAttribute 와 setAttribute 그리고 classList.add...

element . getAttribute (요소가 가진 속성명)

이 메서드는 접근한 요소가 가진 속성이 저장하고 있는 값을 가져온다.  글로 쓰면 이해가 어렵기 때문에 코드로 정리해보면 다음과 같다.

<!- html-->
<div class="ball"> </div>

//js

const ball = document.querySelector('.ball')

ball.getAttribute('class') //->  div  태그가 가진 속성인  class가 가진 값인 'ball'을 가져온다.
 ㄴ요소(element)
 
//출력결과)
ball

 

다시 정리해서 말하면,  getAttribute는 지정한 요소가 가진 속성이 가진 값을 가져오는 메서드 이다. 

---

element . setAttribute (요소가 가진 속성명, 그 속성에 추가할 값)

이 메서드는 요소가 가진 속성에 기존 값을 버리고,  새로운  값으로 설정 할때 사용한다.  이를 코드로 예를 들면 다음과 같다.

const ball = document.querySelector('.ball');

ball.setAttribute('class','red_ball');
ball.getAttribute('class');

//출력결과) 기존의 class 속성값인 ball 을  red_ball 로 바꾸었다.
red_ball

 

이렇듯.  setAttribute는 기존의 속성값을 제거하고, 새로운 속성값을 추가하는 메서드이다. 

 

이 메서드를 이용하면, 응용하기에 따라서 기존의 속성값을 유지한 상태에서 새로운 속성값을 추가적으로 더 하려고 한다면, 가능은 하겠지만 불필요한 코드가 늘어나기 때문에, 다음에 소개하는 메서드를 활용하는 것이 매우 효율적이다.

 

classList.add('추가할 클래스의 속성값')

이 메서드는 지정한 요소의 클래스 리스트(class 속성이 가지는 값의 목록)에 값을 추가할 수 있는 메서드이다. 

 

예를 들면 다음과 같다.

const ball = document.querySelector('.ball');

ball.setAttribute('class','red_ball');
ball.classList.add('blue_ball');

ball.getAttribute('class')

//출력결과) 기존에 설정한  red_ball 속성값에 더하여 blue_ball 속성값이 추가되었다. 
red_ball blue_ball

 

 

이렇듯, classList 메서드는 활용하면, 기존의 속성값을 유지한 상태에서 새로운 속성값을 추가할 수 있다. 이는 조건부로 요소에 css 코드를 적용시킬 때 활용하면 매우 유용하다.  예를 들어, 기존에는 요소에 테두리가 없었지만, 요소를 클릭하면 새로운 css 코드가 더해져 테두리가 보이게 하거나 할 때 유용하다.