자바스크립트 getAttribute() 함수 – 요소에서 속성 값 가져오기

`Element.getAttribute()` 사용법

getAttribute() 함수는
DOM 요소에서 속성 값을 가져오는 함수입니다.
주어진 요소에서 속성이 존재할 경우, 그 속성의 값을 문자열로 반환합니다.

만약 속성의 값이 존재하지 않으면 빈 문자열("")을 반환하고, 해당 요소에서 일치하는 속성이 없다면 null을 반환합니다.

JavaScript getAttribute() 함수 사용 예제

const myVideo = document.querySelector("video");

/* 속성의 값을 문자열로 반환 */
console.log(myVideo.getAttribute("src")); // "video.mp4"

/* 속성의 값이 존재하지 않으면 빈 문자열("")을 반환 */
console.log(myVideo.getAttribute("autoplay")); // ""

/* 해당 요소에 일치하는 속성이 없다면 null을 반환 */
console.log(myVideo.getAttribute("loop")); // null

코드 부연설명
querySelector() 함수는 지정한 CSS 선택자와 일치하는 첫 번째 요소 객체를 반환합니다.

getAttribute() 함수는 속성 값을 문자열로 반환하지만,
getAttributeNode() 함수는 속성 객체(Attr)를 반환한다는 차이점이 있습니다.

구문

매개변수

getAttribute() 함수의 매개변수
`attributeName`	필수. 값을 가져오려는 속성의 이름(문자열 형식)입니다.

반환 값

주어진 요소에서 속성이 존재할 경우, 그 속성의 값을 문자열로 반환합니다.
만약 속성의 값이 존재하지 않으면 빈 문자열("")을 반환합니다.
해당 요소에서 일치하는 속성이 없다면 null을 반환합니다.

getAttribute() 함수는 해당 요소에서 일치하는 속성이 없다면 null을 반환하기 때문에 요소에서 지정한 속성이 있는지 체크하는 용도로 사용할 경우가 있습니다.

그런데, 요소에서 지정한 속성이 있는지 체크하는 hasAttribute() 함수가 별도로 있습니다.
이 함수는 해당 요소에 지정한 속성이 있으면 true를 반환하고, 없으면 false를 반환합니다.

DOM 요소에서 지정한 속성이 있는지 체크하려면, 명시적인 hasAttribute() 함수를 사용하세요.

이 밖에도 속성에 관련된 함수들을 참조하세요.

DOM 요소에서 속성의 값을 설정하려면 setAttribute() 함수를 사용하세요.

DOM 요소에서 특정 속성을 제거하려면 removeAttribute() 함수를 사용하세요.

주의할 점

getAttribute() 함수를 사용할 때 주의해야 할 몇 가지 점이 있습니다.

속성의 값이 여러 개인 경우

대표적으로 class 속성의 값은 띄어쓰기로 여러 개의 값을 가질 수 있습니다.
이점을 고려하지 않고 getAttribute() 함수를 사용해서 값을 비교할 경우 조심해야 합니다.

정확히 말하자면, 여러 개의 값이라기 보다는 여러 개의 클래스 이름입니다.
여기에서는 클래스 이름을 통상적으로 "값"이라고 부르기 때문에 "값"이라고 하겠습니다.

다음의 예제는 <p> 요소에 a와 b라는 클래스 값이 있습니다.

getAttribute() 함수로 이 요소에 a라는 클래스 값이 있는지 체크하는 예제 코드를 만들어 보겠습니다.

JavaScript

const elem = document.querySelector("p");
const elemClassValue = elem.getAttribute("class");
console.log(elemClassValue); // "a b" => 띄어쓰기 포함해서 전체를 문자열로 반환

if (elemClassValue === "a") {
    console.log("a 클래스 값이 있습니다.");
} else {
    console.log("a 클래스 값이 없습니다.");
}
// 출력: "a 클래스 값이 없습니다."

위 예제처럼 getAttribute() 함수는 속성의 값을 띄어쓰기 포함해서 전체를 문자열로 반환합니다.

이럴 경우 "a 클래스 값이 없습니다."가 출력될 것입니다.

class나 rel, role 속성 등의 값은 띄어쓰기로 여러 개의 값을 가질 수 있습니다.
이러한 속성들의 값을 체크할 때에는 다른 함수를 사용하거나 getAttribute() 함수를 사용해야 할 경우에는 문자열을 띄어쓰기로 분리해서 분석(예를 들면, split() 함수 등으로)해서 사용해야 합니다.

다음은 class의 특정 값이 있는지를 getAttribute() 함수 대신에 classList.contains()를 사용한 예제입니다.

classList.contains()는 DOM 요소에 지정한 클래스 값이 있는지 체크합니다. 해당 요소에 지정한 클래스 값이 있으면 true를 반환하고, 없으면 false를 반환합니다.

JavaScript class의 특정 값이 있는지를 getAttribute() 함수 대신에 classList.contains()를 사용한 예제

const elem = document.querySelector("p");

if (elem.classList.contains("a")) {
    console.log("a 클래스 값이 있습니다.");
} else {
    console.log("a 클래스 값이 없습니다.");
}
// 출력: "a 클래스 값이 있습니다."

다음은 getAttribute() 함수를 사용해야 할 경우에 split() 함수를 이용해서 문자열을 띄어쓰기로 분리해서 사용한 예제입니다.

split() 함수는 문자열을 주어진 문자열 구분자나 정규식을 기준으로 나누어 배열로 변환하는 함수입니다.

띄어쓰기로 구분한 배열을 foreach() 함수로 순회하면서 a 클래스 값이 있는지를 체크합니다.

JavaScript getAttribute() 함수를 사용해야 할 경우에 split() 함수를 이용해서 문자열을 띄어쓰기로 분리해서 사용한 예제

const elem = document.querySelector("p");
const elemClassValue = elem.getAttribute("class");
console.log(elemClassValue); // "a b"

const elemClassValueArray = elemClassValue.split(" "); // ["a", "b"]

let isClassName = false;

elemClassValueArray.forEach(classname => {
    if (classname === "a") {      
        isClassName = true;
    }
});

console.log(isClassName); // true

`nonce` 속성에 사용 금지

nonce 속성은 보안 상 중요한 속성 중 하나이며, 주로 스크립트나 스타일시트에 대한 보안 정책인 Content Security Policy(CSP)와 관련이 있습니다. 이 속성의 값을 getAttribute()를 사용해서 가져오면 빈 문자열("")을 반환합니다.