정의 및 사용 방법

setAttribute() 함수는 DOM 요소에 속성 값을 설정하는 함수입니다.

특징

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

구문

JavaScript 
element.setAttribute(attributeName, value)

매개변수

setAttribute() 함수의 매개변수
attributeName 필수. 값을 설정하려는 속성의 이름(문자열 형식)입니다.
value 필수. 속성에 설정하려는 값(문자열 형식)입니다.

반환 값

없습니다. 즉, undefined를 반환합니다.

DOM 요소에서 속성 값을 가져오려면 getAttribute() 함수를 사용하세요.

DOM 요소에서 특정 속성을 제거하려면 removeAttribute() 함수를 사용하세요.

예제

상황별 예제로 살펴보겠습니다.

지정된 속성이 이미 존재하는 경우

요소에서 지정된 속성이 이미 존재하는 경우 값이 업데이트됩니다.

다음은 "비밀번호 보기" 버튼을 클릭하면,
<input> 요소의 type 속성 값이 password에서 text로 업데이트되는 예제입니다.

HTML 
<input type="password" value="test">
<button type="button">비밀번호 보기</button>
JavaScript 
const elem = document.querySelector("input");
const button = document.querySelector("button");

button.addEventListener("click", () => { // 버튼 클릭 이벤트
    /* 버튼을 클릭하면,
       input 요소의 type 속성 값이 password에서 text로 변경됩니다. */
    elem.setAttribute("type", "text");
});

코드 부연설명
querySelector() 함수는 지정한 CSS 선택자와 일치하는 첫 번째 요소 객체를 반환합니다.

실제 적용된 모습 "비밀번호 보기" 버튼을 클릭해 보세요!

지정된 속성이 없는 경우

요소에서 지정된 속성이 없는 경우에는 지정된 이름과 값으로 새 속성이 추가됩니다.

다음은 "test 입력하기" 버튼을 클릭하면,
<input> 요소에는 value 속성이 없지만, value 속성과 값이 test로 설정되는 예제입니다.

HTML 
<input type="text">
<button type="button">test 입력하기</button>
JavaScript 
const elem = document.querySelector("input");
const button = document.querySelector("button");

button.addEventListener("click", () => { // 버튼 클릭 이벤트
    /* 버튼을 클릭하면,
       input 요소의 value 속성이 없지만,
       value 속성이 추가되고 값이 test로 변경됩니다. */
    elem.setAttribute("value", "test");
});
실제 적용된 모습 "test 입력하기" 버튼을 클릭해 보세요!

여러 속성을 설정하기

각 속성은 setAttribute() 함수를 각각 호출하여 설정합니다.

JavaScript 
const element = document.getElementById("example-id");

// 첫 번째 속성 설정
element.setAttribute("alt", "Set your alt");

// 두 번째 속성 설정
element.setAttribute("title", "Set your title");

// 세 번째 속성 설정
element.setAttribute("src", "/images/image.jpg");

값을 필요로 하지 않는 부울 속성(Boolean attribute)일 경우

HTML 속성 중에서 값을 필요로 하지 않는 속성을 부울 속성(Boolean attribute)이라고 합니다.
예를 들자면 hidden, open, autoplay 등의 속성이 부울 속성에 해당합니다.

부울 속성은 값이 없지만, 값이 무엇이든지 간에 설정하면 해당 속성이 적용됩니다. 중요한 것은 속성이 존재하는 경우 실제 값과는 관계가 없이 적용된다는 것입니다.
setAttribute(attributeName, value) 함수의 두 매개변수는 필수이므로, 속성의 설정하려는 값을 지정해야 하는데, 이 경우 빈 문자열("")로 지정할 것을 권장합니다.

다음은 "input box 숨기기" 버튼을 클릭하면,
<input> 요소에 hidden 속성을 추가하는 예제입니다. 이렇게 hidden 속성을 추가하면 <input> 요소는 화면에서 숨겨집니다.

부연설명
hidden 속성은 해당 요소가 시각적으로 보이지 않고 스크린 리더에서도 접근할 수 없도록 숨겨진(hidden) 요소임을 나타내는 속성입니다.

HTML 
<input type="text">
<button type="button">input box 숨기기</button>
JavaScript 
const elem = document.querySelector("input");
const button = document.querySelector("button");

button.addEventListener("click", () => { // 버튼 클릭 이벤트
    /* 버튼을 클릭하면,
       input 요소에 hidden 속성을 추가하기
        값은 빈 문자열("")로 설정합니다. */
    elem.setAttribute("hidden", "");
});
실제 적용된 모습 "input box 숨기기" 버튼을 클릭해 보세요!

주의할 점

setAttribute() 함수로 HTML의 style 속성을 설정할 수 있지만, style 속성 전체가 해당 문자열로 설정되면서 기존 값이 덮어써지므로 부분 스타일을 변경하는 경우에는 권장하지 않습니다.

권장하지 않음 
element.setAttribute("style", "background-color:blue;");

대신 자바스크립트의 style 속성을 사용하세요.

권장함 
element.style.backgroundColor = "blue";

브라우저 호환성

setAttribute() 함수의 브라우저 호환성
메서드
데스크탑 Chrome
Chrome
데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
setAttribute() 1 12 1 1

명세서

setAttribute() 함수의 명세서 사양
명세서 사양
setAttribute() DOM Standard
#ref-for-dom-element-setattribute①

참고문헌

같이 보기