setAttribute()메소드란?

1) setAttribute()

HTML 요소의 속성을 추가/변경하는 메소드

• 이미 존재하는 속성의 경우 "추가"는 불가능하며 "변경"만 가능하다.

//case 1 (속성이름, 속성값)
element.setAttribute("style", "color: red");

//case 2 - 속성추가 후 속성값 추가
element.setAttribute("style");
element.style.display = "none";

2) removeAttribute()

HTML 요소의 속성을 삭제하는 메소드

element.removeAttribute("class");
// 해당 요소의 클래스 속성을 삭제한다.

3) getAttribute()

HTML 요소의 속성값을 반환해주는 메소드

element.getAttribute("class");
//해당 요소의 클래스 속성의 값을 반환한다.

🚩 setAttribute()는 거의 사용하지 않음

• setAttribute는 너무 강력해서 거의 사용하지 않음.
• 이는 inline으로 스타일을 적용하는 것이라 CSS 파일에서 적용한 설정보다 우선으로 적용됩니다. 때문에 잘 사용하지 않는다!!

대신 classList 메소드 사용

• classList.add()를 이용해 클래스를 추가하고, css에 해당 클래스의 속성을 등록하는 식으로 사용하는 것을 추천

element.classList.add("some-class"); 
// CSS상에서 이 클래스에 대한 선언

결론

1. 정확히는 setAttribute()와 classList가 다루고 있는 대상의 범위가 다름

• setAttribute()는 HTML 요소에 inline 스타일로 어떠한 속성을 추가하는 것
  • class 속성
  • style 속성
  • href 속성
  • ....등등
• classList()는 요소의 여러 속성 중 하나인 클래스 속성만을 다루는 것

2. 요소에 클래스를 추가/변경/제거 하는식으로 요소를 동적으로 다루고 싶다면, classList를 추천!

• setAttribute()는 inline 방식이면 이는 비추천!