🌼 39.7 어트리뷰트
HTML 문서가 파싱될 때 HTML 요소의 어트리뷰트는 어트리뷰트 노드로 변환되어 요소 노드와 연결된다. 이 때 모든 어트리뷰트 노드는 유사배열 객체이자 이터러블인 NamedNodeMap 객체에 담겨서 요소 노드의 attribute 프로퍼티에 저장된다.
Element.prototype.attributes: 모든 attribute를 읽을(getter) 때 사용하는 프로퍼티
🌼 39.7.3 HTML 어트리뷰트 vs DOM 프로퍼티
요소 노드 객체는 HTML 어트리뷰트에 대응하는 프로퍼티가 존재하며 이 프로퍼티들은 HTML 어트리뷰트 값을 초기값으로 가지고 있다. HTML 어트리뷰트의 역할은 HTML 요소 초기 상태를 지정하는 것이다. 즉, HTML 어트리뷰트 값은 HTML 요소의 초기 상태를 의미하며 이는 변하지 않는다.
-
Element.prototype.getAttribute/setAttribute: attribute 프로퍼티를 통하지 않고 요소 노드에서 직접 어트리뷰트 값을 취득하거나 변경할 때 사용한다. 이 때 취득한 값은 요소의 초기 상태 값이며 변경하는 행위도 요소의 최신 상태를 변경하는 것이 아닌 초기로 설정된 값을 변경하는 것이다.- 해당 어트리뷰트로 얻은 값은 항상 문자열이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<input type="checkbox" id="user" checked />
<script>
const $checkbox = document.getElementById("user");
console.log($checkbox.getAttribute("value")); // "" : HTML 어트리뷰트
console.log($checkbox.checked); // true : DOM 프로퍼티
</script>
</body>
</html>DOM 프로퍼티는 getter와 setter를 모두 갖고 있어 어트리뷰트의 값을 획득하거나 변경이 가능하다. DOM 프로퍼티에 값을 할당하는 것은 요소의 최신 상태 값을 변경하는 것을 의미한다. 즉, 요소 노드의 초기 상태는 어트리뷰트 노드가 관리하며 요소 노드의 최신 상태는 DOM 프로퍼티가 관리한다.
🌼 39.7.4 data 어트리뷰트와 dataset 프로퍼티
data 어트리뷰트와 dataset 프로퍼티를 사용하면 HTML 요소에 정의한 사용자 정의 어트리뷰트와 자바스크립트 간에 데이터를 교환할 수 있다.
-
data 어트리뷰트: data-user-id, data-role과 같이 data-접두사 다음에 이름을 붙여 사용한다.-
HTMLElement.dataset 프로퍼티로 값을 취득할 수 있다. dataset 프로퍼티를 사용하면 HTML의 모든 data 어트리뷰트의 정보를 제공하는 DOMStringMap 객체를 반환한다.
-
data-다음에 접두사로 붙힌 이름을 카멜케이스로 변환한 프로퍼티를 갖고 있어 이 프로퍼티를 사용하여 값을 취득하거나 변경할 수 있다.
-
data 어트리뷰트에 존재하지 않는 이름을 키로 사용하여 dataset 프로퍼티에 값을 할당하면 자동으로 케밥케이스로 변환된 키와 값이 생성된다.
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<ul class="users">
<li id="1" data-user-id="0042">Lee</li>
<li id="2" data-user-id="7450">Kim</li>
</ul>
<script>
const users = [...document.querySelector(".users").children];
//data-user-id가 0042인 노드 취득
const user = users.find((user) => user.dataset.userId === "0042");
user.dataset.role = "admin"; // 신규 data 어트리뷰트 생성
console.log(user.dataset); //DOMStringMap {userId: '0042', role: 'admin'}
</script>
</body>
</html>출처: 모던 자바스크립트 Deep Dive-이웅모
