어트리뷰트
어트리뷰트 노드와 attributes 프로퍼티
- attributes 프로퍼티
- HTML 문서의 구성 요소인 HTML 요소는 여러 개의 속성을 가질 수 있음.
- HTML 요소의 동작을 제어하기 위한 추가적인 정보를 제공.
- 글로벌 어트리뷰트와 이벤트 핸들러 어트리뷰트는 모든 HTML에서 공통적으로 사용 가능.
- type, value, checked 어트리뷰트 등 특정 HTML 요소에만 한정적으로 사용가능한 어트리뷰트도 있음.
- 어트리뷰트 노드
- HTML 문서가 파싱될 때 HTML 요소의 어트리뷰트는 어트리뷰트 노드로 변환되어 요소 노드와 연결된다. 이 때 HTML 어트리뷰트당 하나의 어트리뷰트 노드가 생성됨.
//요소 노드의 attribute 프로퍼티는 요소 노드의 모든 어트리뷰트 노드의 참조가 담긴
// NamedNodeMap 객체를 반환
const { attributes } = document.getElementById('user');
// NamedNodeMap {0: id, 1:type, 2:value, id:id, type: type, vakye: value, length: 3}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 프로퍼티는 참조와 변경이 가능
요소 노드는 상태(state)를 가지고 있다. 2개의 상태 즉 초기 상태와 최신 상태를 관리해야함.
- HTML 어트리뷰트의 역할 : HTML 요소의 초기 상태를 지정하는 것. 즉, HTML 어트리뷰트 값은 HTML 요소의 초기 상태를 의미하며 이는 변하지 않음.
👉 setAttribute를 통해서 어트리뷰트 노드에서 관리하는 HTM 요소에 지정한 어트리뷰트 값 즉 초기 상태 값을 변경할 수 있음.
- DOM 프로퍼티 역할 : 요소노드의 최신 상태를 관리함. 사용자의 입력에 의한 상태 변화에 반응하여 언제나 최신 상태를 유지.
const input = document.getElementById('user');
// DOM 프로퍼티에 값을 할당하여 HTML 요소의 최신 상태를 변경한다.
input.value = 'foo';
console.log(input.value); // foo
// getAttribute 메서드로 취득한 HTML 어트리뷰트 값, 즉 초기 상태 값은 변하지 않고 유지된다.
console.log(input.getAttribute('value')); // ungmo2 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 어트리뷰트와 dataset 프로퍼티
HTML 요소에 정의한 사용자 정의 어트리뷰트와 자바스크립트간의 데이터 교환 가능.
data 어트리뷰트는 data-user-id, data-role과 같이 data- 접두사 다음에 임의의 이름을 붙여 사용.
스타일
인라인 스타일 조작
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);DOM 표준
HTML과 DOM 표준은 W3C(World Wide Web Consortium)과 WHATWC(Web Hypertext Application Technology Working Group)이라는 두 단체가 협력하며 공통된 표준을 만들고 있었음.
그런데, 2018년 4월부터 구글, 애플, 마이크로소프트, 모질라로 구성된 4개의 주류 브라우저 벤더사가 주도하는 WHATWG이 단일 표준을 내놓기로 두 단체가 합의하였음!
