HTML 속성(Attributes)과 DOM 프로퍼티(Properties)의 차이점

• 일반적으로 HTML에서 속성과 프로퍼티는 다른 개념으로 다르게 설정할 수 있습니다.

// 속성 적용
<div foo="bar">…</div>
<script>
  const div = document.querySelector('div[foo=bar]');

  console.log(div.getAttribute('foo')); // '출력: bar'
  console.log(div.foo); // 출력: undefined

  // 프로퍼티 적용
  div.foo = 'hello world';

  console.log(div.getAttribute('foo')); // '출력: bar'
  console.log(div.foo); // ' 출력: hello world'
</script>

차이점

• 속성을 부여한 엘리먼트는 직렬화가 가능하지만 프로퍼티는 볼 수 없습니다.

const div = document.createElement('div');

div.setAttribute('foo', 'bar');
div.hello = 'world';

console.log(div.outerHTML); // 직렬화:'<div foo="bar"></div>'

• 속성은 항상 문자열 형태만 가능하지만 프로퍼티는 모든 타입으로 설정할 수 있습니다.

const div = document.createElement('div');
const obj = { foo: 'bar' };

div.setAttribute('foo', obj);
console.log(typeof div.getAttribute('foo')); // 출력: 'string'
console.log(div.getAttribute('foo')); // 출력: '[object Object]'

div.hello = obj;
console.log(typeof div.hello); // 출력: 'object'
console.log(div.hello); // 출력 { foo: 'bar' }

• 속성의 key값은 대소문자를 구분하지 않지만 프로퍼티의 key 값은 대소문자를 구분합니다.

<div id="test" HeLlO="world"></div>
<script>
  const div = document.querySelector('#test');

  console.log(div.getAttributeNames()); //출력: ['id', 'hello']

  div.setAttribute('FOO', 'bar');
  console.log(div.getAttributeNames()); //출력: ['id', 'hello', 'foo']

  div.TeSt = 'value';
  console.log(div.TeSt); //출력: 'value'
  console.log(div.test); //출력: undefined
</script>

이상한 현상

• HTML 스펙에 정의된 모든 속성은 속성을 정의하면 동시에 프로퍼티를 생성하며 동기화가 이루어집니다. 이유는 getter와 setter가 존재하기 때문입니다.

<div id="foo"></div>
<script>
  const div = document.querySelector('#foo');

  console.log(div.getAttribute('id')); // 출력:'foo'
  // 프로퍼티를 안 넣었는데 자동으로 설정
  console.log(div.id); // 출력:'foo'

  div.id = 'bar';

  // 프로퍼티를 설정했는데 속성이 변경
  console.log(div.getAttribute('id')); // 'bar'
  console.log(div.id); // 'bar'
</script>

Input의 value

• value 프로퍼티는 value 속성을 반영하지 않고 defaultValue 프로퍼티가 value 속성을 반영합니다.
• 즉 value 프로퍼티는 어떠한 속성도 반영하지 않는다는 것을 의미합니다. ( 이러한 대표적인 속성은 offsetWidth, parentNode 등 존재 )

<input type="text" value="default" />
<script>
  const input = document.querySelector('input');

  // 기본적으로 value를 속성, 프로퍼티에서 모두 참조 가능
  console.log(input.getAttribute('value')); // 출력: 'default'
  console.log(input.value); // 출력: 'default'
  console.log(input.defaultValue); // 출력: 'default'

  // defaultValue 프로퍼티 변경
  input.defaultValue = 'new default';

  // 모든 속성, 프로퍼티가 변경
  console.log(input.getAttribute('value')); // 출력: 'new default'
  console.log(input.value); // 출력: 'new default'
  console.log(input.defaultValue); // 출력:'new default'

  // value 프로퍼티 변경
  input.value = 'hello!';

  // valu 프로퍼티만 변경
  console.log(input.getAttribute('value')); // 출력: 'new default'
  console.log(input.value); // 출력: hello!'
  console.log(input.defaultValue); // 출력: 'new default'

  // value 속성 변경
  input.setAttribute('value', 'another new default');

  // value 속성만 변경
  console.log(input.getAttribute('value')); // 출력: 'another new default'
  console.log(input.value); // 출력: 'hello!'
  console.log(input.defaultValue); // 출력: 'another new default'
</script>

참고

• https://jakearchibald.com/2024/attributes-vs-properties/