[JavaScript] 자바스크립트 removeAttribute와 hasAttribute 설명

728x90

목 차

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

반응형

 

1. removeAttribute 메서드와 hasAttribute 메서드란?

• HTML 요소의 속성을 다룰 때, removeAttribute는 속성을 제거하고, hasAttribute는 특정 속성의 존재 여부를 확인하는 데 사용됩니다. 

 

2. removeAttribute

• removeAttribute는 HTML 요소에서 특정 속성을 제거합니다.

2-1. 문법

element.removeAttribute(attributeName);

• attributeName : 제거할 속성의 이름(문자열, 대소문자를 구분하지 않음).
• 반환값 : 없음. 단순히 속성을 제거합니다.

 

2-2. 특징

1. 속성이 존재하지 않아도 에러가 발생하지 않음 : 제거하려는 속성이 없으면 아무 작업도 하지 않습니다.
2. 속성을 완전히 제거 : setAttribute로 다시 추가하기 전까지 해당 속성은 제거된 상태로 유지됩니다.

 

2-3. 예제

• HTML 요소의 class 속성을 제거하는 예제입니다.

<div id="myDiv" class="box" data-role="admin"></div>
<script>
  const div = document.getElementById('myDiv');
  
  // 속성 제거
  div.removeAttribute('class');
  
  // 확인
  console.log(div.getAttribute('class')); // null
</script>

 

3. hasAttribute

• hasAttribute는 HTML 요소에 특정 속성이 존재하는지 확인합니다.

3-1. 문법

element.hasAttribute(attributeName);

• attributeName : 확인할 속성의 이름(문자열, 대소문자를 구분하지 않음).
• 반환값 : true/false (true: 속성이 존재함, false: 속성이 존재하지 않음)

 

3-2. 특징

1. 존재 여부만 확인 : 속성 값 자체는 반환하지 않습니다.
2. 정확한 속성 이름 확인 : 속성 이름이 정확히 일치해야 true를 반환합니다.

 

3-3. 예제

• HTML 요소에 class 속성과 data-role 속성이 있는지 확인하는 예제입니다.

<div id="myDiv" class="box"></div>
<script>
  const div = document.getElementById('myDiv');
  
  // 속성 존재 확인
  console.log(div.hasAttribute('class')); // true
  console.log(div.hasAttribute('data-role')); // false
</script>