[JavaScript] 자바스크립트 속성과 프로퍼티
반응형
🎯 속성과 프로퍼티
- 브라우저는 웹페이지를 만나면 HTML을 읽어(파싱(parsing)) DOM 객체를 생성한다.
- 태그
<body id="page">가 있을 때, DOM 객체에서body.id="page"를 사용할 수 있다. - 그런데 속성-프로퍼티가 항상 일대일로 매핑되지는 않는다.
📝 HTML 속성
- 브라우저는 HTML을 파싱 해 DOM 객체를 만들 때 HTML 표준 속성을 인식하고, 이 표준 속성을 사용해 DOM 프로퍼티를 만든다.
- 요소가
id같은 표준 속성으로만 구성되어 있다면, 이에 해당하는 프로퍼티가 자연스레 만들어집니다. 하지만 표준이 아닌 속성일 때는 상황이 달라진다.
<body id="test" something="non-standard">
<script>
alert(document.body.id); // test
// 비표준 속성은 프로퍼티로 전환되지 않습니다.
alert(document.body.something); // undefined
</script>
</body>
속성
elem.hasAttribute(name): 속성 존재 여부 확인elem.getAttribute(name): 속성 값을 가져옴elem.setAttribute(name, value): 속성 값을 변경함elem.removeAttribute(name): 속성 값을 지움elem.attributes을 사용하면 모든 속성 값을 읽을 수도 있다.elem.attributes을 호출하면 내장 클래스 Attr를 구현한 객체들을 담은 컬렉션이 반환되는데, 객체엔name과value프로퍼티가 존재한다.
<body something="non-standard">
<script>
alert(document.body.getAttribute('something')); // 비표준 속성에 접근
</script>
</body><body>
<div id="elem" about="Elephant"></div>
<script>
alert( elem.getAttribute('About') ); // (1) 'Elephant', 속성 읽기
elem.setAttribute('Test', 123); // (2) 속성 추가하기, <div id="elem" about="Elephant" test="123"></div>
alert( elem.outerHTML ); // (3) 추가된 속성 확인하기, id = elem
for (let attr of elem.attributes) { // (4) 속성 전체 나열하기
alert( `${attr.name} = ${attr.value}` );// about = Elephant, test = 123
}
</script>
</body>
📝 프로퍼티-속성 동기화
- 표준 속성이 변하면 대응하는 프로퍼티는 자동으로 갱신된다.
id가 수정되면 이에 대응하는 프로퍼티가 갱신된다.
<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.value처럼 동기화가 속성에서 프로퍼티 방향으로만 일어나는 예외상황도 존재한다.
<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를 수정하면 프로퍼티도 수정됩니다. - 하지만 프로퍼티를 수정해도 속성은 수정되지 않습니다.
🔔 유저의 어떤 행동 때문에 value가 수정되었는데 수정 전의 ‘원래’ 값으로 복구하고 싶은 경우, 속성에 저장된 값을 가지고 오면 된다.
📝 DOM 프로퍼티 값의 타입
- DOM 프로퍼티는 항상 문자열이 아니다. 체크 박스에 사용되는
input.checked프로퍼티의 경우 불린 값을 가진다.
<input id="input" type="checkbox" checked> checkbox
<script>
alert(input.getAttribute('checked')); // 속성 값: 빈 문자열
alert(input.checked); // 프로퍼티 값: true
</script>style속성의 경우 문자열이지만,style프로퍼티는 객체이다.
<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>
🏷 요약
elem.hasAttribute(name): 속성 존재 여부 확인elem.getAttribute(name): 속성 값을 가져옴elem.setAttribute(name, value): 속성 값을 변경함elem.removeAttribute(name): 속성 값을 지움elem.attributes: 속성의 컬렉션을 반환함
📌 참고
반응형
'프로그래밍 > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 함수가 실행되는 과정 (0) | 2021.11.13 |
|---|---|
| [JavaScript] 자바스크립트 animate(), 이미지 슬라이드 구현 (2) | 2021.11.10 |
| [ JavaScript] 자바스크립트 주요 노드 프로퍼티 (0) | 2021.11.09 |
| [JavaScript] 자바스크립트 DOM 탐색하기 (0) | 2021.11.09 |
| [JavaScript] 자바스크립트 DOM 트리 (0) | 2021.11.09 |