JavaScript_HTML 속성 다루기

브라우저가 컨텐츠를 화면에 보여주기 위해서 HTML문서를 해석할 때 DOM 객체가 만들어지는데, 이 때 HTML속성들이 가지고 있는 각각의 속성들은 요소의 프로퍼티가 된다.
대부분의 HTML 속성들은 이름 그대로 요소 노드들의 프로퍼티로 생성이 되는데, 한 가지 주의해야 할 점은 모든 HTML속성이 요소 노드의 프로퍼티로 생성되지는 않는다는 것이다.

// HTML 속성
const tomorrow = document.querySelector('#tomorrow');
const item = tomorrow.firstElementChild;
const link = item.firstElementChild;

// elem.getAttribute('속성'): 속성에 접근하기
console.log(tomorrow.getAttribute('href'));
console.log(item.getAttribute('class'));

// elem.setAttribute('속성', '값'): 속성 추가(수정)하기
tomorrow.setAttribute('class', 'list'); // 추가
link.setAttribute('href', 'https://www.naver.com'); // 수정

// elem.removeAttribute('속성'): 속성 제거하기
tomorrow.removeAttribute('href');
tomorrow.removeAttribute('class');

// id 속성
console.log(tomorrow);
console.log(tomorrow.id);

// class 속성
console.log(item);
console.log(item.className);

// href 속성
console.log(link);
console.log(link.href);
console.log(tomorrow.href);

1. 속성에 접근하기: element.getAttribute('속성')
2. 속성 추가(수정)하기: element.setAttribute('속성', '값')
3. 속성 제거하기: element.removeAttribute('속성')'

setAttribute로 undefined 값을 지정하면, class 값이 사라지는 것이 아니라, class 속성 값 자체가 undefined라는 class 값으로 수정되어 버린다.
getAttribute 메소드의 실행 결과에 새로운 값을 할당하려고 하면 ReferenceError가 발생한다.