🎶 자바스크립트에서 어트리뷰트의 개념과 HTML 어트리뷰트, DOM 프로퍼티, 그리고 어트리뷰트를 조작하는 방법에 대해 알아보자.
1. 어트리뷰트
HTML 문서의 구성 요소인 HTML 요소는 여러 개의 어트리뷰트(attribute)를 가질 수 있다. HTML 요소의 동작을 제어하기 위한 추가적인 정보를 제공하는 HTML 어트리뷰트는 HTML 요소의 시작 태그에
어트리뷰트 이름 = "어트리뷰트 값"
형식으로 정의한다.
<input id="user" type="text">
HTML 문서가 파싱될 때 HTML 요소의 어트리뷰트는 어트리뷰트 노드로 변환되어 요소 노드와 연결된다. 이때 HTML 어트리뷰트당 하나의 어트리뷰트 노드가 생성된다.
2. 어트리뷰트 조작
모든 어트리뷰트 노드의 참조는 유사 배열 객체이자 이터러블인 NamedNodeMap 객체에 담겨서 요소 노드의 attributes 프로퍼티에 저장되므로, 요소 노드의 모든 어트리뷰트 노드는 요소 노드의 Element.prototype.attributes 프로퍼티로 취득할 수 있다.
<!DOCTYPE html>
<html>
<body>
<input id="user" type="text" value="a">
<script>
const {attributes} = document.getElementById('user');
console.log(attributes);
// NamedNodeMap {0: id, 1: type, 2: value, id: id, type: type, value: value, length=3}
console.log(attributes.id.value); // user
</script>
</body>
</html>
요소 노드의 attributes 프로퍼티는 getter만 존재하는 읽기 전용 접근자 프로퍼티이므로 HTML 어트리뷰트 값을 취득할 수 있지만 변경할 수 없다.
이에, Element.prototype.getAttribute/setAttribute 메서드를 사용하면 attributes 프로퍼티를 통하지 않고 요소 노드에서 메서드를 통해 직접 HTML 어트리뷰트 값을 취득하거나 변경할 수 있어서 편리하다.
<!DOCTYPE html>
<html>
<body>
<input id="user" type="text" value="a">
<script>
const $input = document.getElementById('user');
// value 어트리뷰트 값 취득
const inputV = $input.getAttribute('value');
console.log(inputV); // a;
// value 어트리뷰트 값 변경
$input.setAttribute('value', 'b');
console.log($input.getAttribute('value'); // b
</script>
</body>
</html>
참고로, 특정 HTML 어트리뷰트가 존재하는지 확인하려면 Element.prototype.hasAttribute 메서드를 사용하고, 특정 HTML 어트리뷰트를 삭제하려면 Element.prototype.removeAttribute 메서드를 사용한다.
<!DOCTYPE html>
<html>
<body>
<input id="user" type="text" value="a">
<script>
const $input = document.getElementById('user');
// value 어트리뷰트가 존재하는지 확인
if($input.hasAttribute('value')){
$input.removeAttribute('value');
}
</script>
</body>
</html>
3. HTML 어트리뷰트 vs DOM 프로퍼티
요소 노드 객체에는 HTMl 어트리뷰트에 대응하는 DOM 프로퍼티가 존재한다. DOM 프로퍼티는 setter과 getter이 모두 존재하는 접근자 프로퍼티이므로, DOM 프로퍼티는 참조와 변경이 가능하다.
여기서 HTML 어트리뷰트가 DOM에서 중복 관리되고 있는 것처럼 쉽게 오해할 수 있지만, HTML 어트리뷰트의 역할은 HTML 요소의 초기 상태를 지정하는 것이다. 즉, HTML 어트리뷰트 값은 HTML 요소의 초기 상태를 의미하며 이는 변하지 않는다.
초기 상태 값을 관리하지 않으면 웹페이지를 처음 표시하거나 새로고침할때 초기 상태를 표시할 수 없기 때문에, 요소 노드는 2개의 상태, 초기 상태와 최신 상태를 관리해야 한다. 즉, 요소 노드의 초기 상태는 어트리뷰트 노드가 관리하며, 요소 노드의 최신 상태는 DOM 프로퍼티가 관리하는 것이다.
(1) 어트리뷰트 노드
HTML 어트리뷰트로 지정한 HTML 요소의 초기 상태는 어트리뷰트 노드에서 관리한다.
document.getElementById('user').setAttribute('value','b');
setAttribute 메서드는 어트리뷰트 노드에서 관리하는 HTML 요소에 지정한 어트리뷰트 값, 즉 초기 상태 값을 변경한다.
(2) DOM 프로퍼티
사용자가 입력한 최신 상태는 HTML 어트리뷰트에 대응하는 요소 노드의 DOM 프로퍼티가 관리한다. DOM 프로퍼티는 사용자의 입력에 의한 상태 변화에 반응하여 언제나 최신 상태를 유지한다.
대부분의 HTML 어트리뷰트는 HTML 어트리뷰트 이름과 동일한 DOM 프로퍼티와 1대1 대응한다. 물론, HTML 어트리뷰트 이름과 DOM 프로퍼티 키가 반드시 일치하는 건 아니다.
'자바스크립트' 카테고리의 다른 글
| [JS] Ajax - Ajax 기초 개념, JSON, XMLHttpRequest (0) | 2025.03.09 |
|---|---|
| [JS] 비동기 프로그래밍 - 동기 처리와 비동기 처리, 이벤트 루프와 테스크 큐 (2) | 2025.03.03 |
| [JS] 타이머 - 호출 스케줄링, 타이머 함수, 디바운스와 스로틀 (0) | 2025.02.25 |
| [JS] 이벤트 - 이벤트 핸들러 제거 방법과 이벤트 객체 (0) | 2025.02.19 |
| [JS] 이벤트 - 이벤트 타입과 이벤트 핸들러 등록 (0) | 2025.02.15 |
| [JS] 노드 생성, 추가, 삽입, 복사, 교체, 삭제 (2) | 2025.02.13 |
| [JS] DOM 조작 - innerHTML과 insertAdjacentHTML 메서드 (0) | 2025.02.11 |
| [JS] DOM - HTML 요소와 노드 객체, 그리고 요소 노드 취득 방법 (0) | 2025.02.09 |