Attribute
- DOM을 어떻게 만들어낼지에 대한 필수적 항목이다. HTML 텍스트 문서 상의 <tag>들인 Element가 지닌 것들로 Element의 형식을 지정한다.
- 이름="값" 설정을 통해 attribute를 지정한다.
<div class="info">
<img src="./images/harry_01" alt="해리포터 사진">
<div>
<div>의 class, <img>의 src, alt가 attribute에 해당한다.
Property
- DOM Tree 안에 존재하며, JavaScript의 최상위 존재인 Object가 가지고 있는 구성 요소다.
- 런타임 동안 Element 정보를 저장해두는 주요 수단으로, 해당 정보에 어떤 방식으로 접근해야 하는지를 나타낸다.
Our DIV node
|- nodename = "DIV"
|- className = "info"
|- style
|- . . .
|- . . .[ Element의 속성(attribute) 값에 접근 ]
우리는 두 가지 방식으로 Element atttribute에 접근할 수 있다.
// 1. 전통적인 DOM 메서드인 getAttribute()와 setAttribute()를 사용하는 방법
속성값.getAttribute(“id”)
// 2. 접근하려는 attribute와 대응하는 property로 얻어오는 방법
속성값.id
'id'와 같은 표준 attribute는 방법 1, 방법 2로 전부 접근이 가능하지만, 우리가 임의로 지정한 harrypotter와 같은 사용자 정의 attribute는 방법1로만 접근이 가능하다.
HTML DOM에 지정된 표준 attribute는 property로도 표현되지만, 임의로 지정한 사용자 정의 attribute는 property로 자동 표현되지 않기 때문이다.
<body id="standard" harrypotter="non-standard">
<script>
// id는 표준 attribute 이므로 이에 매핑하는 property가 만들어진다.
alert(document.body.id); // standard
alert(document.body.getAttribute('id')); // standard
// harrypotter는 임의로 지정한 비표준 속성이므로 property로 전환되지 않는다.
alert(document.body.harrypotter); // undefined
alert(document.body.getAttribute('harrypotter')); // non-standard
</script>
</body>
특정 attribute에 대응하는 property가 Element에 존재하는지 확신할 수 없다면 아래 코드처럼 property의 존재 유무를 확인하는 테스트를 하면 된다.
var value = element.someValue ? element.someValue : element.getAttribute(“someValue”);
property가 존재하지 않는다면 attribute을 참조하도록 DOM 메서드 getAttribute()를 사용할 수 있다.
일반적으로 property 접근이 DOM attribute 메서드보다 빠르므로, property가 없는 경우에만 DOM 메서드를 사용하는 것이 성능 면에서 좋다.
[ Property와 Attribute의 동기화 ]
표준 attribute가 변하면 대응하는 property도 자동 갱신된다. property가 변하면 attribute 또한 갱신된다. 하지만 후자의 경우 input의 value 같은 몇 가지 예외 사항이 있다.
attribute -> property / property -> attribute 둘 다 동기화가 잘되는 경우
<input>
<script>
let input = document.querySelector('input');
// attribute 추가 -> property 갱신
input.setAttribute('id', 'harrypotter');
alert(input.id); // harrypotter (갱신)
// property 변경 => attribute 갱신
input.id = 'harrypotter';
alert(input.getAttribute('id')); // harrypotter (갱신)
</script>
attribute -> property 방향으로만 동기화가 되는 경우
<input>
<script>
let input = document.querySelector('input');
// attribute 추가 => property 갱신
input.setAttribute('value', 'Ron weasley');
alert(input.value); // Ron weasley (갱신)
// property를 변경해도 attribute이 갱신되지 않음
input.value = 'Harry Potter';
alert(input.getAttribute('value')); // Ron weasley
// (여전히 Ron weasley다. Harry Potter로 갱신되지 않는다.)
</script>
사용자의 입력으로 value가 수정되었을 때, 수정 전 ‘원래’ 값으로 복구하고 싶은 경우 attribute에 저장된 값을 가지고 오면 이러한 동기화 특성을 유용하게 사용할 수 있다.
도움을 준 정보들
칼럼:
https://ko.javascript.info/dom-attributes-and-properties
속성과 프로퍼티
ko.javascript.info
https://enterkey.tistory.com/164
"속성(Attribute)"와 "요소(property)"의 차이가 무엇인가요?
element 는 페이지에 있는 각 택들을 가리킵니다. , , 등을 말합니다. attribute 는 element가 가지고 있는 것들입니다. element의 형식을 지정합니다. DIV 1 또는 href="깡통.htm" target="휴지통">깡통 에서..
enterkey.tistory.com
HTML : attribute와 property 의 차이
원문 : http://jquery-howto.blogspot.kr/2011/06/html-difference-between-attribute-and.html
medium.com
https://cornswrold.tistory.com/165
[Javascript] 속성(attribute)와 프로퍼티(property)의 차이
속성(attribute)와 프로퍼티(property)의 차이 속성(attribute) DOM을 어떻게 만들어낼 것인가에 대한 필수적인 항목 프로퍼티(property) 런타임 동안 엘리먼트 정보를 저장해두는 주요 수단이자 해당 정보��
cornswrold.tistory.com
'WEB' 카테고리의 다른 글
| [WEB] Cookie와 Session으로 HTTP의 비연결성, 비상태성 보완하기 (0) | 2020.08.19 |
|---|---|
| [WEB] Browser의 Rendering_2. Render Tree의 생성, 배치, 그리기 (0) | 2020.08.12 |
| [WEB] HTML의 Meta Tag (0) | 2020.07.27 |
| [WEB] HTML4와 HTML5의 차이점 4가지 (0) | 2020.07.16 |
| [WEB] SPA (Single-Page Application) (0) | 2020.07.07 |
댓글