[DOM_Element] JS - removeAttribute() 메서드 - 요소의 지정 속성 제거 (= removeAttribute메서드 = 리무브어트리뷰트메서드) ※ 속성제거

목차

1. removeAttribute() 예제 - 속성 제거
2. removeAttribute() 정의
3. removeAttribute() 구문
4. removeAttribute() 예제 - 여러 요소의 특정 속성 일괄 제거
5. removeAttribute() 예제 - cf. value="";

removeAttribute() 예제 - 속성 제거

 

<style>

.hz {color: red;}

</style>

<h1 class="hz">홈짱닷컴 Homzzang.com</h1>

<button onclick="homzzang()">클릭</button>

<script>

function homzzang() {

  document.getElementsByTagName("H1")[0].removeAttribute("class"); 

}

</script>

 

결과보기

removeAttribute() 정의

 

해당 요소에서 지정 속성 제거. (※ 반환값은 없음.)

 

---

 

1. cf. 아래 두 메서드는 결과는 동일하나, 동작 방식이 다름.

• removeAttribute() - 속성제거. / 반환값 없음
• removeAttributeNode() - Attr 객체 제거. / 제거된 객체 반환.

 

2. cf.

• getAttribute() 메서드 - 속성값 반환
• setAttribute() 메서드 - 속성값 설정
• hasAttribute() 메서드 - 속성 존재 여부 체크
• hasAttributes() 메서드 - 속성들 존재 여부 체크
• getAttributeNode() 메서드 - 속성 객체 반환
• setAttributeNode() 메서드 - 속성 노드 추가
• removeAttributeNode() 메서드 - 속성 객체 제거 후 제거된 속성 객체 반환

 

3. HTML attribute (속성) 강의
https://homzzang.com/b/html?sca=attribute

 

4.

• DOM Level 1 (1998)
• 모든 브라우저 지원

  

5. MDN removeAttribute() 예제 더 보기
https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute

 

removeAttribute() 구문

 

element.removeAttribute(name)

 

---

[매개변수]

 

name

필수. 제거할 속성명

 

---

[반환값]

 

없음.

 

removeAttribute() 예제 - 여러 요소의 특정 속성 일괄 제거

 

<div class="hz">

    <a href='#' rel="nofollow noreferrer noopener">링크A</a>

    <a href='#' rel="nofollow noreferrer noopener">링크B</a>

</div>

<script>

for (i of document.querySelectorAll(".hz a")) i.removeAttribute("rel");

</script>

 

결과보기

---

PS. 참고

rel="nofollow noreferrer noopener" 경우, 보안 관련 코드라 비삭제 권장. (<a> 태그 목차 22~23 참고)

 

removeAttribute() 예제 - cf. value="";

 

<input id="hz" name="hz" type="text" value="https://homzzang.com">

 

---

PS. value 속성의 속성값 제거 방식 차이

 

• hz.removeAttribute("value"); --> value 속성 조차 제거
• hz.value=""; --> value 속성의 속성값만 제거