JavaScript / setAttribute()로 HTML 속성 추가·변경하기

JavaScript

작성일 2026-10-26 최근 수정일 2026-10-27

Element.setAttribute(name, value)는 HTML 요소에 속성을 추가하거나 이미 있는 속성의 값을 바꿉니다. 예를 들어 링크의 title을 바꾸거나 버튼에 disabled를 설정할 수 있습니다. 변경 결과는 getAttribute()와 hasAttribute()로 확인할 수 있습니다.

기본 문법과 기존 값 변경

요소를 먼저 선택한 뒤 속성 이름과 값을 차례로 전달합니다. 반환값은 undefined이므로 새 속성값을 반환값에서 찾지 말고 요소에서 다시 읽으세요. 같은 이름의 속성이 있으면 값이 교체되고 없으면 새로 생깁니다. HTML 문서의 HTML 요소에서는 속성 이름이 소문자로 정규화됩니다.

const link = document.querySelector('#sample-link');
link.setAttribute('title', '변경된 설명');
link.setAttribute('data-state', 'updated');

console.log(link.getAttribute('title'));      // '변경된 설명'
console.log(link.hasAttribute('data-state'));  // true

선택 결과가 null이면 setAttribute()를 호출할 수 없습니다. 스크립트를 대상 HTML 뒤에 놓거나 defer를 사용해 요소가 생성된 뒤 실행하세요. 속성 이름에 공백처럼 허용되지 않는 문자가 있으면 InvalidCharacterError가 날 수 있습니다. 문법과 예외는 MDN의 Element.setAttribute() 문서에 정리되어 있습니다.

disabled 같은 불리언 속성은 존재 여부로 결정됩니다

disabled는 불리언 속성입니다. 속성값이 "false"여도 속성이 존재하면 버튼은 비활성화됩니다. 활성화하려면 값을 false로 설정하는 대신 속성을 제거해야 합니다. 설정할 때는 관례대로 빈 문자열을 사용합니다.

const button = document.querySelector('#target');
button.setAttribute('disabled', '');
console.log(button.disabled); // true

button.removeAttribute('disabled');
console.log(button.disabled); // false

일반 속성에 숫자나 null을 값으로 전달하면 문자열로 변환될 수 있습니다. 따라서 삭제하려는 속성에는 setAttribute(name, null)이 아니라 removeAttribute(name)를 쓰세요. 속성 자체가 있는지 확인할 때는 hasAttribute()가 적합합니다.

전체 예제: 속성을 바꾸고 되돌리기

아래 코드를 UTF-8로 set-attribute-example.html에 저장해 브라우저에서 엽니다. ‘속성 변경’을 누르면 링크의 기존 title을 교체하고 data-state를 새로 추가하며 대상 버튼을 비활성화합니다. ‘처음으로’를 누르면 원래 상태로 돌아갑니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>요소 속성 추가와 변경</title>
</head>
<body>
<p><a id="sample-link" href="#example" title="처음 설명">예제 링크</a></p>
<button id="target" type="button">설정 대상</button>
<button id="change" type="button">속성 변경</button>
<button id="reset" type="button">처음으로</button>
<p id="result" aria-live="polite"></p>
<p id="example">링크가 가리키는 같은 문서의 위치입니다.</p>
<script>
const link = document.querySelector('#sample-link');
const target = document.querySelector('#target');
const result = document.querySelector('#result');

function show() {
  result.textContent = `title: ${link.getAttribute('title') ?? '(없음)'}; ` +
    `data-state: ${link.getAttribute('data-state') ?? '(없음)'}; ` +
    `disabled: ${target.disabled}; ` +
    `disabled 속성 존재: ${target.hasAttribute('disabled')}`;
}

document.querySelector('#change').addEventListener('click', () => {
  link.setAttribute('title', '변경된 설명');
  link.setAttribute('data-state', 'updated');
  target.setAttribute('disabled', '');
  show();
});

document.querySelector('#reset').addEventListener('click', () => {
  link.setAttribute('title', '처음 설명');
  link.removeAttribute('data-state');
  target.removeAttribute('disabled');
  show();
});
show();
</script>
</body>
</html>

처음에는 title: 처음 설명, data-state: (없음), disabled: false가 표시됩니다. 변경 후에는 title: 변경된 설명, data-state: updated, disabled: true가 표시됩니다. 대상 버튼은 비활성화되지만 재설정 버튼은 별개이므로 복원할 수 있습니다. 화면의 상태 문자열은 getAttribute()와 hasAttribute()로 읽은 실제 속성을 보여 줍니다.

입력값을 속성에 넣을 때 주의할 점

사용자가 입력한 값을 onclick, srcdoc 또는 스크립트 URL 속성에 그대로 넣으면 코드나 HTML로 해석되어 보안 문제가 생길 수 있습니다. 클릭 동작에는 addEventListener()를 사용하고, 이동 URL은 허용할 주소와 프로토콜인지 검증한 뒤 설정하세요. 예제는 고정된 값의 title과 data-state만 다룹니다.

문자열 상태값이 필요하면 getAttribute(), 속성 존재 여부는 hasAttribute(), 삭제는 removeAttribute()를 사용합니다. DOM 속성 프로퍼티와 HTML 속성이 항상 똑같이 동작하는 것은 아니므로, 해당 속성의 의미를 확인한 뒤 적절한 API를 선택하세요.

JavaScript