요소 속성을 다루는 공통 함수

자바스크립트로 DOM 요소의 속성을 다루는 공통 함수들에 대해 알아봅니다.

이 함수들을 사용하면 DOM 요소의 모든 속성을 쉽게 다룰 수 있습니다.

주요 함수

DOM 요소의 속성을 다루는 주요 공통 함수들
getAttribute() 요소에서 속성 값 가져오기
setAttribute() 요소에 속성 값 설정이나 속성 추가하기
removeAttribute() 요소에서 지정한 속성 제거하기
hasAttribute() 요소에 지정한 속성이 있는지 체크
toggleAttribute() 요소에 부울 속성 추가/제거 상태 바꾸기

getAttribute()

getAttribute() 함수는
DOM 요소에서 속성 값을 가져오는 함수입니다.
주어진 요소에서 속성이 존재할 경우, 그 속성의 값을 문자열로 반환합니다.

만약 속성의 값이 존재하지 않으면 빈 문자열("")을 반환하고, 해당 요소에서 일치하는 속성이 없다면 null을 반환합니다.

구문
JavaScript 
element.getAttribute(attributeName)
매개변수
getAttribute() 함수의 매개변수
attributeName 필수. 값을 가져오려는 속성의 이름(문자열 형식)입니다.
예제
HTML 
<video src="video.mp4" autoplay></video>
JavaScript getAttribute() 함수 사용 예제 
const myVideo = document.querySelector("video");

/* 속성의 값을 문자열로 반환 */
console.log(myVideo.getAttribute("src")); // "video.mp4"

/* 속성의 값이 존재하지 않으면 빈 문자열("")을 반환 */
console.log(myVideo.getAttribute("autoplay")); // ""

/* 해당 요소에 일치하는 속성이 없다면 null을 반환 */
console.log(myVideo.getAttribute("loop")); // null

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

더 자세한 내용과 예제는 자바스크립트 getAttribute() 함수 – 요소에서 속성 값 가져오기를 참조하세요.

setAttribute()

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

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

다음은 "비밀번호 보기" 버튼을 클릭하면,
<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 선택자와 일치하는 첫 번째 요소 객체를 반환합니다.

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

더 자세한 내용과 예제는 자바스크립트 setAttribute() 함수 – 요소에 속성 값 설정이나 속성 추가하기를 참조하세요.

removeAttribute()

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

구문
JavaScript 
element.removeAttribute(attributeName)
매개변수
removeAttribute() 함수의 매개변수
attributeName 필수. 요소에서 제거하려는 속성의 이름(문자열 형식)입니다.
대소문자를 구분하지 않습니다.
예제

다음은 "배경색 지우기" 버튼을 클릭하면,
<p> 요소의 class 속성이 제거되는 예제입니다.

HTML 
<style>
    .bg {
        background-color: yellowgreen;
    }
</style>
<p class="bg">배경색을 지워보세요.</p>
<button type="button">배경색 지우기</button>

<p> 요소의 class 속성이 제거되면, class 속성의 bg 값도 같이 제거되므로 .bg로 지정한 배경색 스타일도 함께 제거됩니다.

JavaScript 
const elem = document.querySelector("p");
const button = document.querySelector("button");

button.addEventListener("click", () => { // 버튼 클릭 이벤트
    /* 버튼을 클릭하면,
       p 요소의 class 속성이 제거됩니다. */
    elem.removeAttribute("class");
});

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

실제 적용된 모습 "배경색 지우기" 버튼을 클릭해 보세요!

더 자세한 내용과 예제는 자바스크립트 removeAttribute() 함수 – 요소에서 지정한 속성 제거하기를 참조하세요.

hasAttribute()

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

구문
JavaScript 
element.hasAttribute(attributeName)
매개변수
hasAttribute() 함수의 매개변수
attributeName 필수. 속성의 이름(문자열 형식)입니다.
대소문자를 구분하지 않습니다.
반환 값

해당 요소에 지정한 속성이 있으면 true를 반환하고, 없으면 false를 반환합니다.

예제
HTML 
<video src="video.mp4" autoplay></video>
JavaScript 
const myVideo = document.querySelector("video");

console.log(myVideo.hasAttribute("src")); // true
console.log(myVideo.hasAttribute("autoplay")); // true
console.log(myVideo.hasAttribute("loop")); // false

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

더 자세한 내용과 예제는 자바스크립트 hasAttribute() 함수 – 요소에 지정한 속성이 있는지 체크를 참조하세요.

toggleAttribute()

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

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

구문
JavaScript 
element.toggleAttribute(attributeName[, force])
매개변수
toggleAttribute() 함수의 매개변수
attributeName 필수. 지정하려는 부울 속성의 이름(문자열 형식)입니다.
대소문자를 구분하지 않습니다.
force 옵션. true 또는 false 값을 가질 수 있습니다.
  • true로 설정하면 지정한 부울 속성이 해당 요소에 있거나 없거나 상관없이 강제로 추가합니다.
    (즉, 현재 부울 속성의 값을 true로 설정하라는 의미입니다.)
  • false로 설정하면 지정한 부울 속성이 해당 요소에 있거나 없거나 상관없이 강제로 제거합니다.
    (즉, 현재 부울 속성의 값을 false로 설정하라는 의미입니다.)
반환 값
  • 지정한 속성을 추가할 경우에는 false를 반환하고,
  • 제거할 경우에는 true를 반환합니다.
예제

다음은 "input box 숨기기/표시하기" 버튼을 클릭하면,
<input> 요소에 hidden 속성을 추가하거나 제거함으로써, <input> 요소를 숨기거나 표시하는 예제입니다.

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.toggleAttribute("hidden");
});

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

toggleAttribute() 함수로 <input> 요소에 hidden 속성을 추가하면 <input> 요소는 숨겨집니다. 반대로 제거하면 <input> 요소는 원래대로 표시됩니다.

실제 적용된 모습 "input box 숨기기/표시하기" 버튼을 클릭해 보세요!

더 자세한 내용과 예제는 자바스크립트 toggleAttribute() 함수 – 요소에 부울 속성 추가/제거 상태 바꾸기를 참조하세요.

브라우저 호환성

DOM 요소 속성을 다루는 공통 함수들의 브라우저 호환성
메서드
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
getAttribute() 1 12 1 1
setAttribute() 1 12 1 1
removeAttribute() 1 12 1 1
hasAttribute() 1 12 1 1
toggleAttribute() 69 18 63 12

같이 보기