자바스크립트 hasAttribute() 함수 – 요소에 지정한 속성이 있는지 체크

`Element.hasAttribute()` 사용법

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

해당 요소에서 지정한 속성의 값을 가져오려면 getAttribute() 함수를 사용하세요.

구문

매개변수

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

반환 값

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

예제

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() 함수는 주로 해당 요소에 특정 속성이 있는지 여부를 체크하는 조건문에 많이 활용됩니다.

다음은 웹사이트에 <a> 태그로 링크가 있는 모든 요소를 찾아 모두 새창 뜨기 링크로 변경하는 활용 예제입니다.

JavaScript

// 문서에서 모든 a 요소 찾기
const anchorEle = document.querySelectorAll("a");

// 순회를 통해서 각각의 요소 다루기 - forEach() 함수 적용
anchorEle.forEach(ele => {
    // href 속성이 있다면
    if (ele.hasAttribute("href")) {
        // 새창 뜨기 링크로 변경
        ele.setAttribute("target", "_blank");
        
        // 새창 뜨기 보안에 관련된 rel 속성 값 적용
        ele.setAttribute("rel", "noopener noreferrer");
    }
});

적용된 HTML

<a href="https://exmaple.com" target="_blank" rel="noopener noreferrer">
    exmaple.com
</a>
<a href="https://exmaple.com" target="_blank" rel="noopener noreferrer">
    exmaple.com
</a>
<a href="https://exmaple.com" target="_blank" rel="noopener noreferrer">
    exmaple.com
</a>

활용 예제에서 사용한 함수나 개념은 다음의 관련 주제 링크를 참조하세요.