속성과 프로퍼티
: 브라우저는 웹페이지를 만나면 HTML을 읽어 (parsing) DOM 객체를 생성함
: 요소 노드에서 대부분의 표준 HMTL 속성은 DOM 객체의 프로퍼티가 됨
: 태그 <body id="page">가 DOM 객체에서는 body.id = "page"가 됨
: 속성-프로퍼티는 항당 일대일로 매핑되지 않음
DOM 프로퍼티
: DOM node는 자바스크립트 객체임
- document.body에 새로운 프로퍼티 생성
document.body.myData = {
name: 'Caesar',
title: 'Imperator'
};
alert(document.body.myData.title); // Imperator
- document.body에 새로운 메서드 추가
document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (sayTagName의 'this'엔 document.body가 저장됩니다.)
- Element.prototype 같은 내장 프로토타입을 수정해 모든 요소에서 메서드를 사용하게 만들기
Element.prototype.sayHi = function() {
alert(`Hello, I'm ${this.tagName}`);
};
document.documentElement.sayHi(); // Hello, I'm HTML
document.body.sayHi(); // Hello, I'm BODY
- DOM 프로퍼티와 메서드의 특징
: 객체처럼 행동 하므로 어떤 값이든 가질 수 있음
: 대소문자를 가림
HTML 속성
: HTML에서 태그는 복수의 속성을 가질 수 있음
: 브라우저는 HTML을 파싱해 DOM 객체를 만들 때 HTML 표준 속성을 인식하고
이 표준 속성을 사용해 DOM 프로퍼티를 만듦
: 요소의 속성이 비표준 속성이 포함되어 있을 경우에는 프로퍼티를 따로 만들어줘야함
<body id="test" something="non-standard">
<script>
alert(document.body.id); // test
// 비표준 속성은 프로퍼티로 전환되지 않습니다.
alert(document.body.something); // undefined
</script>
</body><body id="body" type="...">
<input id="input" type="text">
<script>
alert(input.type); // text
alert(body.type); // type은 body의 표준 속성이 아니므로 DOM 프로퍼티가 생성되지 않아 undefined가 출력됩니다.
</script>
</body>
- 요소.hasAttibute(name)
: 속성 존재 여부 확인
- 요소.getAttribute(name)
: 속성 값을 가져옴
- 요소.setAttribute(name, value)
: 속성 값을 변경
- 요소.removeAttribute(name)
: 속성 값을 삭제
- 비 표준 프로퍼티를 읽는 예시
<body something="non-standard">
<script>
alert(document.body.getAttribute('something')); // 비표준 속성에 접근
</script>
</body>
- HTML 속성의 특징
: 대소문자를 가리지 않음
: 값은 항상 문자열
- HTML 속성을 다루는 예시
<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>
프로퍼티-속성 동기화
- 표준 속성이 변할 때 프로퍼티가 갱신되는 예시
<input>
<script>
let input = document.querySelector('input');
// 속성 추가 => 프로퍼티 갱신
input.setAttribute('id', 'id');
alert(input.id); // id (갱신)
// 프로퍼티 변경 => 속성 갱신
input.id = 'newId';
alert(input.getAttribute('id')); // newId (갱신)
</script>
- 속성 동기화가 되지 않는 예시
<input>
<script>
let input = document.querySelector('input');
// 속성 추가 => 프로퍼티 갱신
input.setAttribute('value', 'text');
alert(input.value); // text (갱신)
// 프로퍼티를 변경해도 속성이 갱신되지 않음
input.value = 'newValue';
alert(input.getAttribute('value')); // text (갱신 안됨!)
</script>: 속성 value를 수정하면 프로퍼티도 수정되지만, 프로퍼티를 수정하면 속성이 수정되지 않음
: 원래 값을 복구할 때 유용한 기능
DOM 프로퍼티 값의 타입
: DOM 프로퍼티는 항상 문자열이 아님
: boolean 값 등을 가지기도 함
<input id="input" type="checkbox" checked> checkbox
<script>
alert(input.getAttribute('checked')); // 속성 값: 빈 문자열
alert(input.checked); // 프로퍼티 값: true
</script><div id="div" style="color:red;font-size:120%">Hello</div>
<script>
// string
alert(div.getAttribute('style')); // color:red;font-size:120%
// object
alert(div.style); // [object CSSStyleDeclaration]
alert(div.style.color); // red
</script><a id="a" href="#hello">link</a>
<script>
// 속성
alert(a.getAttribute('href')); // #hello
// 프로퍼티
alert(a.href ); // 실행되는 사이트 주소에 따라 http://site.com/page#hello 형태로 값이 저장됨
</script>
비표준 속성, dataset
: 비표준 속성은 사용자가 직접 지정한 데이터를 HTML에서 자바스크립트로 넘기고 싶은 경우나
자바스크립트를 이용해 조작할 HTML 요소를 표시하기 위해 사용
: 요소에 스타일을 적용할 때도 사용
<!-- 이름(name) 정보를 보여주는 div라고 표시 -->
<div show-info="name"></div>
<!-- 나이(age) 정보를 보여주는 div라고 표시 -->
<div show-info="age"></div>
<script>
// 표시한 요소를 찾고, 그 자리에 원하는 정보를 보여주는 코드
let user = {
name: "Pete",
age: 25
};
for(let div of document.querySelectorAll('[show-info]')) {
// 원하는 정보를 필드 값에 입력해 줌
let field = div.getAttribute('show-info');
div.innerHTML = user[field]; // Pete가 'name'에, 25가 'age'에 삽입됨
}
</script><style>
/* 스타일이 커스텀 속성 'order-state'에 따라 변합니다. */
.order[order-state="new"] {
color: green;
}
.order[order-state="pending"] {
color: blue;
}
.order[order-state="canceled"] {
color: red;
}
</style>
<div class="order" order-state="new">
A new order.
</div>
<div class="order" order-state="pending">
A pending order.
</div>
<div class="order" order-state="canceled">
A canceled order.
</div>// 새 클래스를 추가하거나 지우는 것보다 더 쉽게 상태(state)를 바꿀 수 있습니다
div.setAttribute('order-state', 'canceled');
- data-*
: 비표준 속성이 나중에 표준 속성이 될 경우 발생할 문제를 해결하기 위한 속성
: data-로 시작되는 속성 전체를 개발자가 용도에 맞게 사용하도록 별도로 예약 됨
: dataset 프로퍼티를 사용하면 이 속성에 접근 할 수 있음
<body data-about="Elephants">
<script>
alert(document.body.dataset.about); // Elephants
</script><style>
.order[data-order-state="new"] {
color: green;
}
.order[data-order-state="pending"] {
color: blue;
}
.order[data-order-state="canceled"] {
color: red;
}
</style>
<div id="order" class="order" data-order-state="new">
A new order.
</div>
<script>
// 읽기
alert(order.dataset.orderState); // new
// 수정하기
order.dataset.orderState = "pending"; // (*)
</script>
Refference
속성과 프로퍼티
ko.javascript.info
'Programming > JavaScript' 카테고리의 다른 글
| 자바스크립트 프로처럼 쓰는 팁 (0) | 2022.04.30 |
|---|---|
| 자바스크립트 숨겨진 기능 Shadow DOM 활용법 (0) | 2022.04.24 |
| 모던 자바스크립트 (문서) 18-5. 주요 노드 프로퍼티 (0) | 2022.04.24 |
| 모던 자바스크립트 (문서) 18-3. DOM 다루기 (0) | 2022.04.24 |
| 모던 자바스크립트 (문서) 18-2. DOM 트리 (0) | 2022.04.24 |