하루 30분 모딥다. 어트리뷰트

어트리뷰트 노드와 attributes 프로퍼티

1. HTML요소는 여러 개의 어트리뷰트 속성을 가질 수 있다.
2. 모든 어트리뷰트 노드의 참조는 유사 배열 객체이자 이터러블인 NamedNodeMap객체에 담겨져 요소 노도의 attributes 프로퍼티에 저장된다.
3. Element.prototype.attributes 프로퍼티로 취득 할 수 있다. getter만 존재하는 읽기 전용 접근자 프로퍼티이며 NamedNodeMap 객체를 반환한다.

HTMl 어트리뷰트 조작

1. Element.prototype.getAttrigute/setAttribute 메서드를 사용하여 요소노드에서 직접 HTML 어트리뷰트 값을 취득하거나 변경할 수 있다.
2. 이외에 hasAttribute, removeAttribute도 가능.

HTML 어트리뷰트 VS DOM 프로퍼티

1. DOM프로퍼티는 HTML 어트리뷰트 값을 초기값으로 가지고 있다.
2. DOM프로퍼티는 setter, getter 모두 존재하는 접근자 프로퍼티이다.
3. HTML 어트리뷰트는 초기 상태를 지정하는 것. 초기 상태는 사용자에 의해 변하지 않는다.
4. 요소 노드는 상태(State)를 가진다. 이는 사용자에 의해 변화하는 것이다.
5. 이처럼 요소 노드는 초기 상태와 최신 상태를 관리한다. 초기 상태는 어트리뷰트 노드, 최신 상태는 DOM 프로퍼티가 관리한다.
6. 모든 DOM프로퍼티가 사용자에 입력에 변경된 최신 상태를 관리하는 것은 아니다. (input 요소의 사용자 입력에 의한 상태 변화는 value 프로퍼티가 관리하고 checkbox 요소의 입력상태 변화는 checked 프로퍼티가 관리한다. 하지만 id 어트리뷰트와 id 프로퍼티는 사용자 입력과 관계없이 항상 동일한 값으로 연동한다.)
7. getAttribute 메서드로 취득한 값은 언제나 문자열. 하지만 DOM 프로퍼티로 취득한 값은 아닐 수도 있다. (ex. boolean)

data 어트리뷰트와 dataset 프로퍼티

1. data 어트리뷰트와 dataset 프로퍼티를 이용하여 어트리뷰트와 자바스크립트 간에 데이터를 교환할 수 있다
2. **users.dataset.userId = ‘1234’ ⇒ <div class=’users’ data-user-id=’1234’ ></div>**
3. 카멜케이스 ⇒ 케밥케이스