속성, 프로퍼티 동기화

태그 표준속성이 변하면 대응하는 DOM객체 프로퍼티는 자동으로 갱신된다.

몇몇 경우를 제외하고 DOM객체 프로퍼티가 변하면 태그 표준속성 역시 마찬가지로 갱신된다.

let div = document.querySelector('div');
console.log(div?.getAttribute('id')); // null
console.log(div.id); // 
div?.id='myID';
console.log(div?.getAttribute('id')); // myID

id는 속성과 프로퍼티가 양방향 동기화된다.

input.value는 속성->프로퍼티 단방향으로만 갱신된다.

let input = document.querySelector('input');
input?.setAttribute('value','abcd');
console.log( input.value ); // abcd

input?.value = 1234;
console.log( input?.getAttribute('value') ); // abcd

위와 같은 것은 기능이다. 기능이라는 것은 일부러 그렇게 구현한 것이며 그렇게 하는것이 더 쓸모있다는 것이다.

유저의 어떤 행동때문에 value가 수정되었는데 수정전의 ‘원래’ 값으로 복구하고 싶은 경우, 속성에 저장된 값을 가지고 오면 된다.