자바스크립트 DOM 요소 속성 다루기

자바스크립트로 DOM 요소의 속성을 다루는 공통 함수들(getAttribute, setAttribute, removeAttribute, hasAttribute, toggleAttribute)에 대해 알아봅니다.

getAttribute() 함수는 DOM 요소에서 속성 값을 가져오는 함수입니다. 주어진 요소에서 속성이 존재할 경우, 그 속성의 값을 문자열로 반환합니다. 만약 속성의 값이 존재하지 않으면 빈 문자열을 반환하고, 해당 요소에서 일치하는 속성이 없다면 null을 반환합니다.

setAttribute() 함수는 DOM 요소에 속성 값을 설정하는 함수입니다. 속성이 이미 존재하는 경우 값이 업데이트됩니다. 그렇지 않으면 지정된 이름과 값으로 새 속성이 추가됩니다.

removeAttribute() 함수는 DOM 요소에서 매개변수로 지정하는 속성을 제거하는 함수입니다. 매개변수가 없으면 오류를 발생시키지만, 매개변수로 지정하는 속성이 요소에 없어도 오류 없이 아무 동작도 하지 않습니다.

hasAttribute() 함수는 DOM 요소에 지정한 속성이 있는지 체크하는 함수입니다. 해당 요소에 지정한 속성이 있으면 true를 반환하고, 없으면 false를 반환합니다.

toggleAttribute() 함수는 DOM 요소에 지정한 부울 속성(boolean attribute)이 없으면 추가하고, 있으면 제거하는 함수입니다. 해당 속성을 추가할 경우에는 false를 반환하고, 제거할 경우에는 true를 반환합니다.

classList는 DOM 요소의 class 속성을 쉽게 다룰 수 있는 객체입니다. 클래스 값의 추가, 제거, 확인 등을 다룰 수 있는 유용한 여러 메서드와 속성을 가지고 있습니다.

classList.add()는 DOM 요소에 주어진 클래스 속성 값을 추가합니다. 하나의 클래스 값만을 추가할 수도 있고, 여러 개의 클래스 값을 한 번에 추가할 수도 있습니다. 만약 해당 요소에 클래스 속성이 없으면 클래스 속성과 함께 값을 추가합니다.

classList.remove()는 DOM 요소에서 주어진 클래스 속성 값을 제거합니다. 하나의 클래스 값만을 제거할 수도 있고, 여러 개의 클래스 값을 한 번에 제거할 수도 있습니다. 제거하려는 클래스 값이 없을 경우에는 오류 없이 아무 동작도 하지 않습니다.

classList.toggle()은 DOM 요소에 지정한 클래스 값이 없으면 추가하고, 있으면 제거합니다. 해당 클래스 값을 추가할 경우에는 true를 반환하고, 제거할 경우에는 false를 반환합니다.

classList.replace()는 DOM 요소에 있는 기존의 특정 클래스 값을 새로운 클래스 값으로 교체합니다. 만약, 기존의 특정 클래스 값이 존재하지 않으면 아무런 변경이 일어나지 않고 false를 반환합니다.

classList.contains()는 DOM 요소에 지정한 클래스 값이 있는지 체크합니다. 해당 요소에 지정한 클래스 값이 있으면 true를 반환하고, 없으면 false를 반환합니다. 주의할 점은 classList.contains()로 여러 개의 클래스 값을 한 번에 체크할 수 없습니다.