속성(Attribute)
: HTML 요소에 정의된 초기값
- 값은 항상 문자열
- 요소가 처음 로드될 때 정적으로 설정된다.
- getAttribute(name) 메서드를 사용하여 속성 값을 읽을 수 있다.
<input type="text" value="기본값">
프로퍼티(Property)
: DOM 객체에서 동적으로 제공되는 값
- JavaScript에서 요소에 접근할 때 이 값은 객체의 프로퍼티로 제공
- JavaScript 객체로 요소를 조작할 수 있으며, 프로퍼티는 보통 실제 값과 일치
- DOM 프로퍼티와 메서드는 일반 JavaScript 객체처럼 행동한다.
- - 어떤 값이든 가질 수 있다.
- - 대·소문자를 구분한다 ('elem.nodeType'이 아닌, 'elem.NoDeTyPe'는 동작하지 않는다.)
- - DOM 프로퍼티는 값이 항상 문자열은 아니다.
✨ 브라우저는 웹페이지를 만나면 HTML을 읽어(파싱: parsing) DOM 객체를 생성한다.
HTML 표준 속성일 경우
- 브라우저는 HTML 태그를 해석해 DOM 객체를 만들 때 HTML 표준 속성을 인식하고,
이 표준 속성을 사용해 DOM 프로퍼티를 1대1로 매핑하여 생성한다.
<body id="test" something="non-standard">
<script>
alert(document.body.id); // 표준 속성 (test)
alert(document.body.something); // 비표준 속성 (undefined)
</script>
</body>
HTML 비표준 속성일 경우
- 매핑하는 DOM 프로퍼티 생성❌
<body something="non-standard">
<script>
alert(document.body.getAttribute('something')); // 비표준 속성에 접근
</script>
</body>
- 비표준 속성에 접근할 수 있는 메서드
- elem.hasAttribute(name): 속성 존재 여부 확인
- elem.getAttribute(name): 속성값을 가져옴
- 비표준 속성도 잡지만 표준 속성도 잡음 - elem.setAttribute(name, value): 속성값을 변경함
- elem.removeAttribute(name): 속성값을 지움
- elem.attributes: 열거 가능한(iterable) 속성 집합을 반환함
- 객체엔 name과 value 프로퍼티가 존재
<body>
<div id="elem" about="Elephant"></div>
<script>
alert( elem.getAttribute('About') ); // (1) 'Elephant', 속성 읽기
elem.setAttribute('Test', 123); // (2) 속성 추가하기
alert( elem.outerHTML ); // (3) 추가된 속성 확인하기
for (let attr of elem.attributes) { // (4) 속성 전체 나열하기
alert( `${attr.name} = ${attr.value}` );
}
</script>
</body>
비표준 속성
- 사용자가 직접 지정한 데이터를 HTML에서 자바스크립트로 넘기고 싶은 경우 or 자바스크립트를 사용해 조작할 HTML 요소를 표시하기 위해 사용
- 요소에 스타일을 적용할 때 사용되기도 함
- 비표준 속성엔 속성 명 앞에 'data-'를 붙이는 것이 규칙이다.
- 이유: HTML은 살아있는 언어이기 때문에 지속적으로 업데이트 된다
➡ 비표준 속성으로 작성한 기존의 코드에 문제가 생길 수 있음 ➡ data-* 사용
dataset 프로퍼티
dataset
: 해당 요소의 모든 data-* 속성(비표준 속성)을 읽고 쓸 수 있는 DOMStringMap 객체를 반환
👉 자바스크립트 객체처럼 속성에 접근할 수 있게 해줌
- HTML 속성은 대시(-)로 구분되지만, dataset 프로퍼티에서는 카멜 케이스로 변환된다.
(ex. data-user-id ➡ dataset.userId로 접근) - 모든 data-* 속성 값은 문자열로 저장
<div id="order" class="order" data-order-state="new">
A new order.
</div>
<style>
.order[data-order-state="new"] {
color: green;
}
.order[data-order-state="pending"] {
color: blue;
}
.order[data-order-state="canceled"] {
color: red;
}
</style>
<script>
// 읽기
alert(order.dataset.orderState); // new
// 수정하기
order.dataset.orderState = "pending"; // (*)
</script>
✨ html 속성(attribute)과 DOM 객체의 property의 차이점❗
- html에 작성한 속성(attribute)는 JS 엔진에 의해 파싱될 때 DOM 객체를 생성한다.
👉 이때 html에 작성한 속성의 표준이 DOM 객체의 1:1 매핑이 되어 프로퍼티를 생성하게 된다. - ❗ 그러나 모든 속성이 1:1 매핑이 되는 것은 아니다.
비표준 속성은 DOM 객체가 생성하지 않고, getAttribute() 메서드를 통해 접근이 가능하지만, 이는 위험할 수 있다.
(HTML이라는 언어 자체가 Living Standard하기 때문) - 👍새로운 표준이 등장할 경우, 기존에 사용된 속성은 반영 되지 않을 수 있으므로 안전한 data-* 접근자를 사용한다.
data- 접근자를 사용할 경우, DOM에서 객체를 생성하여 컬렉션을 모아주는데, 이는 DOMStringMap이라는 자료 안에 모인다. 접근 방법은 element.dataset을 통해 접근이 가능하다.
속성과 프로퍼티
ko.javascript.info