[JavaScript]HTML 애트리뷰트(Attribute)가 존재하는지 확인하는 방법

HTML 애트리뷰트(Attribute)가 존재하는지 확인하는 방법

이번 포스팅은 JavaScript에서 HTML 요소에 애트리뷰트가 존재하는지 확인하는 방법을 소개합니다.

---

hasAttribute() - 특정 애트리뷰트가 존재하는지

선택한 요소에서 특정 애트리뷰트가 존재하는지 확인하려면 hasAttribute() 메서드를 사용합니다.

const isAttribute = selectedNode.hasAttribute(name);

매개변수

name: 특정 애트리뷰트의 이름을 문자열로 전달합니다.

 

반환 결과

매개변수로 전달된 특정 애트리뷰트가 존재하면 true를 반환하고 그렇지 않으면 false를 반환합니다.

 

아래는 id가 "input-text"인 HTML 요소를 선택한 다음 hasAttribute() 메서드로 id, custom, style 애트리뷰트가 존재하는지 확인하는 예제입니다.

<input id="input-text" name="input-name" custom="custom-attr" />

const inputNode = document.getElementById("input-text");

console.log(inputNode.hasAttribute("id"));     // true
console.log(inputNode.hasAttribute("custom")); // true
console.log(inputNode.hasAttribute("style"));  // false

---

hasAttributes() - 애트리뷰트가 존재하는지

선택한 요소에서 하나 이상의 애트리뷰트가 존재하는지 확인하려면 hasAttributes() 메서드를 사용합니다.

const isAttribute = selectedNode.hasAttributes();

매개변수

존재하지 않습니다.

 

반환 결과

애트리뷰트가 하나라도 존재하는 경우 true를 반환하고 그렇지 않으면 false를 반환합니다.

 

아래는 id가 "input-text"인 HTML 요소를 선택한 다음 hasAttributes() 메서드로 애트리뷰트가 존재하는지 확인하는 예제입니다.

<input id="input-text" name="input-name" custom="custom-attr" />

const inputNode = document.getElementById("input-text");

console.log(inputNode.hasAttributes()); // true

---

정리

• hasAttribute() 메서드로 특정 애트리뷰트가 존재하는지 확인할 수 있습니다.
• hasAttributes() 메서드로 하나 이상의 애트리뷰트가 존재하는지 확인할 수 있습니다.