요소 속성 가져오기

문제

요소 속성에 포함된 정보에 접근하고 싶다.

해결

브라우저가 DOM에서 정의된 표준 속성으로 속성을 정의했다면 요소에서 바로 속성에 접근할 수 있다.

<input tye="check" id="field" checked="checked" value="test" />
...

var field = document.getElementById("field");
alert(field.checked);   //true
alert(field.value);     //test
alert(field.type);      //text

표준이 아닌 속성 또는 특정 브라우저에서는 아직 지원하지 않는 표준 속성은 getAttribute 메소드를 사용해서 접근해야 한다.

<div id="elem" class="test" role="article" data-index="1">
    testing
</div>
...

var elem = document.getElementById("elem");
var index = elem.getAttribute("data-index");
alert(index);   // 1
var role = elem.getAttribute("role");
alert(role);    //article

설명

getAttribute 메서드는 표준 속성과 비표준 속성에 동등하게 작동하기 때문에 모든 속성에 접근할 때는 이 메서드를 사용하는 습관을 들이는 편이 좋다.

속성이 없을 경우 메서드는 null 값이나 빈 문자열("")을 반환한다. hasAttribute 메서드를 사용하면 속성이 있는지 확인할 수 있다.

if(elem.hasAttribute(role)){
    var role = elem.getAttribute('role');
    ...
}