● 어트리뷰트
- attributes 프로퍼티
- HTML 문서의 구성 요소인 HTML 요소는 여러 개의 속성을 가질 수 있음.
- HTML 요소의 동작을 제어하기 위한 추가적인 정보를 제공.
- 글로벌 어트리뷰트와 이벤트 핸들러 어트리뷰트는 모든 HTML에서 공통적으로 사용 가능.
- type, value, checked 어트리뷰트 등 특정 HTML 요소에만 한정적으로 사용가능한 어트리뷰트도 있음.
- 어트리뷰트 노드
- HTML 문서가 파싱될 때 HTML 요소의 어트리뷰트는 어트리뷰트 노드로 변환되어 요소 노드와 연결된다. 이 때 HTML 어트리뷰트당 하나의 어트리뷰트 노드가 생성됨.
- ex) <input id="inputTag" type="text" value="hello"> 면, 3개의 어트리뷰트 노드가 생성됨
//요소 노드의 attribute 프로퍼티는 요소 노드의 모든 어트리뷰트 노드의 참조가 담긴
// NamedNodeMap 객체를 반환
const { attributes } = document.getElementById('user');
// NamedNodeMap {0: id, 1:type, 2:value, id:id, type: type, vakye: value, length: 3}
// attributes.id.value
// attributes.type.value
// attributes.length.value
⚬ HTML 어트리뷰트 조작
Element.prototype.getAttribute/setAttribute를 활용하면 attributes 프로퍼티를 통하지 않고 요소 노드에서 메서드를 통해 직접 HTML 어트리뷰트 값을 취득하거나 변경할 수 있다.
const inputValue = input.getAttribute('value');
input.setAttribute('value', 'foo');- Element.prototype.hasAttribute(attributeName) : 특정 HTML어트리뷰트가 존재하는지 확인
- Element.prototype.removeAttribute(attributeName) : 특정 HTML 어트리뷰트 삭제
⚬ HTML 어트리뷰트 vs DOM 프로퍼티
DOM 프로퍼티는 setter와 getter 모두 존재하는 접근자 프로퍼티다. 따라서 DOM 프로퍼티는 참조와 변경이 가능하다.
HTML 어트리뷰트의 역할 : HTML 요소의 초기 상태를 지정하는 것. 즉, HTML 어트리뷰트 값은 HTML 요소의 초기 상태를 의미하며 이는 변하지 않음. setAttribute를 통해서 어트리뷰트 노드에서 관리하는 HTM 요소에 지정한 어트리뷰트 값 즉 초기 상태 값을 변경할 수 있음.
DOM 프로퍼티 역할 : 요소노드의 최신 상태를 관리함. 사용자의 입력에 의한 상태 변화에 반응하여 언제나 최신 상태를 유지.
위의 이야기는 아래의 예제로 보면 이해하기 쉽다.
<body>
<input type="text" id="name" value="daeun" />
<script>
const $input = document.getElementById("name");
const { attributes } = $input;
</script>
</body>input에 아무 입력을 하지 않은 상태에서 HTML 어트리뷰트와 DOM 프로퍼티의 value 값은 똑같다.
하지만 이후에 입력을 하고 나면 서로 값이 다르다.
HTML 어트리뷰트와 DOM 프로퍼티의 대응 관계
- id 어트리뷰트와 id 프로퍼티는 1:1 대응하며, 동일한 값으로 연동함.
- input 요소의 value 어트리뷰트는 value 프로퍼티와 1:1 대응. 하지만 value 어트리뷰트는 초기 상태를, value 프로퍼티는 최신 상태를 갖는다.
- class 어트리뷰트는 className, classList 프로퍼티와 대응.
- for 어트리뷰트는 htmlFor 프로퍼티와 1:1 대응
- textContent 프로퍼티는 대응하는 어트리뷰트 존재하지 않음.
- 어트리뷰트 이름은 대소문자를 구별하지 않지만 대응하는 프로퍼티 키는 카멜 케이스를 따름. (maxlength -> maxLength)
DOM 프로퍼티 값의 타입
- getAttribute 메서드로 취득한 어트리뷰트 값 언제나 문자열.
- DOM 프로퍼티로 취득한 최신 상태값 문자열이 아닐 수 있음.
const checkbox = document.querySelector('input[type=checkbox]');
console.log(checkbox.getAttribute('checked')); // ''
console.log(checkbox.checked); // true
⚬ data 어트리뷰트와 datatset 프로퍼티
HTML 요소에 정의한 사용자 정의 어트리뷰트와 자바스크립트간의 데이터 교환이 가능하다. data 어트리뷰트는 data-user-id, data-role과 같이 data- 접두사 다음에 임의의 이름을 붙여 사용.
<body>
<ul class="users">
<li id="1" data-user-id="2134" data-role="admin">Lee</li>
<li id="2" data-user-id="1254" data-role="subscriber">Kim</li>
</ul>
<script>
const users = [...document.querySelector(".users").children];
const user = users.find((user) => user.dataset.userId === "1254");
console.log(user.dataset);
// DOMStringMap { "userId": "1254", "role": "subscriber" }
console.log(user.dataset.userId);
// 1254
console.log(user.dataset.role);
// subscriber
</script>
</body>
⚬ 스타일
- 인라인 스타일 조작
HTMLElement.prototype.style : setter와 getter 모두 존재하는 접근자 프로퍼티. 요소 노드의 인라인 스타일을 취득하거나 추가 또는 변경한다.
div.style.backgroundColor = 'red';
⚬ 클래스 조작
className, classList : class어트리뷰트에 대응하는 DOM 프로퍼티
- Element.prototype.classList : class 어트리뷰트의 정보를 담은 DOMTokenList 개게를 반환.
- DOMTokenList 객체의 메서드 : add, remove, item, contains, replace, toggle 등이 있다.
box.classList.item(0); // box
box.classList.toggle('foo');
⚬ 요소에 적용되어 있는 CSS 스타일 참조
- getComputedStyled 메서드 : HTML 요소에 적용되어 있는 모든 CSS 스타일을 참조해야 할 경우 사용한다.
- computed style (평가된 스타일) : 요소 노드에 적용되어 있는 모든 스타일, 즉 링크 스타일, 임베딩 스타일, 인라인 스타일, 자바스크립트에서 적용한 스타일, 상속된 스타일, 기본 스타일 등 모든 스타일이 조합되어 최종적으로 적용된 스타일이다.
const computedStyle = window.getComputedStyle(box);
console.log(computedStyle); // CSSStyledDeclaration
// 임베딩 스타일
console.log(computedStyle.width); // 100px
// 상속 스타일 (body -> .box)
console.log(computedStyle.display); // rgb(255,0,0)
// 기본 스타일
console.log(computedStyle.display); // bock
getComputedStyled 메서드의 두 번째 인수로 :after, :before와 같은 의사 요소를 지정하는 문자열을 전달할 수 있다.
const computedStyle = window.getComputedStyle(box, ':before');
console.log(computedStyle.content);