[JavaScript] 자바스크립트 getAttribute와 setAttribute 설명

728x90

목 차

• 1. getAttribute 메서드와 setAttribute 메서드란?
• 2. getAttribute
• 2-1. 문법
• 2-2. 특징
• 2-3. 예제
• 3. setAttribute
• 3-1. 문법
• 3-2. 특징
• 3-3. 예제

반응형

 

1. getAttribute 메서드와 setAttribute 메서드란?

JavaScript에서 getAttribute와 setAttribute 메서드는 HTML 요소의 속성(attribute)을 동적으로 읽거나 설정할 때 사용됩니다. 두 메서드는 HTML 문서의 DOM 요소와 상호작용하여 속성을 관리합니다.

 

2. getAttribute

• getAttribute는 HTML 요소의 특정 속성 값을 가져옵니다.

 

2-1. 문법

element.getAttribute(attributeName);

• attributeName : 가져올 속성의 이름(문자열, 대소문자를 구분하지 않음).
• 반환값 : 속성 값(문자열). 해당 속성이 없으면 null을 반환합니다.

 

2-2. 특징

1. HTML의 속성을 그대로 읽음 : DOM 속성과 동기화되지 않을 수 있습니다.
2. 대소문자를 구분하지 않음 : 속성 이름은 대소문자를 구분하지 않습니다.
3. 사용 가능한 모든 속성에 접근 가능 : 표준 속성뿐만 아니라 사용자 정의 속성(data- 속성 등)도 읽을 수 있습니다.

 

2-3. 예제

• HTML 요소의 속성을 읽을 수 있습니다. (id, class, data-role, style 속성을 가져오는 예제입니다.)

<div id="myDiv" class="box" data-role="admin"></div>
<script>
  const div = document.getElementById('myDiv');
  
  // HTML 속성 읽기
  console.log(div.getAttribute('id'));         // "myDiv"
  console.log(div.getAttribute('class'));      // "box"
  console.log(div.getAttribute('data-role'));  // "admin"
  
  // 없는 속성 읽기
  console.log(div.getAttribute('style'));      // null
</script>

 

3. setAttribute

• setAttribute는 HTML 요소의 특정 속성 값을 설정하거나 새 속성을 추가합니다.

 

3-1. 문법

element.setAttribute(attributeName, value);

• attributeName : 설정할 속성의 이름(문자열, 대소문자를 구분하지 않음).
• value : 설정할 속성 값(문자열).

 

3-2. 특징

1. 속성이 없으면 새로 추가 : 해당 속성이 없으면 새로운 속성을 생성하고 값을 설정합니다.
2. 값을 문자열로 변환 : value가 숫자나 다른 데이터 타입이어도 자동으로 문자열로 변환됩니다.

 

3-3. 예제

• HTML 요소에 속성 값을 설정하거나 추가할 수 있습니다. (class, data-role 속성을 설정하고 가져오는 예제입니다.)

<div id="myDiv" class="box"></div>
<script>
  const div = document.getElementById('myDiv');
  
  // 속성 추가 및 수정
  div.setAttribute('class', 'new-box');       // 기존 'class' 속성 값 변경
  div.setAttribute('data-role', 'user');      // 'data-role' 속성 추가
  
  console.log(div.getAttribute('class'));     // "new-box"
  console.log(div.getAttribute('data-role')); // "user"
</script>