JavaScript DOM 속성 조작

🗓2020년 03월 02일 ∙ 🖊TutorialPost ∙ ⏳1분

DOM에 요소의 속성 - class, attribute 등을 추가하거나 제거하는 방법을 확인해 보겠습니다. 요소의 속성을 조작함으로써 문서의 콘텐츠 및 디자인을 동적으로 변경할 수 있습니다. 더불어 HTML5에 추가된 data 속성의 조작에 대해서도 알아보겠습니다.

요소 스타일링

요소의 스타일을 바꾸고 싶다면 우선 CSS 클래스를 만들고, 만들어진 클래스를 스타일을 적용하고자 하는 요소에 지정하는 방식으로 사용합니다.

element.classList                      // 요소의 클래스를 나열
element.classList.add("className")     // 클래스 추가
element.classList.remove("className")  // 클래스 제거
element.classList.item( Number )  // 콜렉션의 인덱스를 이용하여 클래스 값을 반환
div.classList.toggle("visible");  // 클래스 값 토글

속성 조작하기

  • getAttribute() - 어트리뷰트 값을 가져온다.
  • hasAttribute() - 어트리뷰트 값을 가지고 있는지 검사한다.
  • setAttribute() - 어트리뷰트에 값을 대입한다.
  • removeAttribute() - 어트리뷰트를 제거한다.
  • className - 클래스값을 가져오거나 변경한다.
  • id - 아이디값을 가져오거나 변경한다.
let foo = document.getElementById("foo");

// 요소가 class 어트리뷰트를 가지고 있는지 검사한 후, 어트리뷰트 값을 가졍온다.
if (foo.hasAttribute("class")) {
  var attr = foo.getAttribute("class");
}

// class 값을 변경한다. 존재하지 않으면 생성한다.
foo.className = "bar";
foo.setAttribute("class", "baz");

// class 속성을 제거한다
foo.removeAttribute("class");

data 속성

data 속성은 HTML5에 추가된 속성입니다. data속성을 이용하면 HTML 요소에 임의의 데이터를 간단하게 추가할 수 있으며, JavaScript나 CSS에서 손쉽게 해당 데이터를 조작할 수 있습니다.

<button data-action="foo">
  Say Hello
</button>
const bar = document.querySelectorAll('[data-action="foo"]');

console.log(bar[0].dataset.action) // "foo"
SHARE