39.7.1 어트리뷰트

39.7.1 어트리뷰트 노드와 attributes 프로퍼티

HTML 요소는 자신의 동작을 제어하기 위한 추가 정보를 제공하는데 이 추가 제공되는 정보를 HTML attributes 라고 한다.

<input id="user" type="text" value="ungmi2" >

• 위 input 태그의 id , type , value 가 HTML attributes 이다.

html 어트리뷰트는 크게 3가지로 구분할 수 있다.

1. 글로벌 어트리뷰트
  - id, class, style, title, lang, hidden 등

2. 이벤트 핸들러 어트리뷰트
  - onclick, onchange, onfouc ... 등

3. 특정 HTML 요소만 쓸 수 있는 어트리뷰트
  - <input> 태그의 type, value, checked 등.

const { attirubutes } = document.getElementById('user');
console.log(attributes);
// NamedNodeMap {0: id, 1: type, 2: value, type...}

**HTML attributes**는 HTML 문서가 파싱될 때 어트리뷰트 노드로 변환되어 유사 배열 객체 NamedNodeMap 에 담겨 HTML 요소와 연결된다.

• 따라서 HTML 요소의 attribute 프로퍼티에 접근하면 NamedNodeMap 에 담긴 HTML attribute 에 접근할 수 있다.

39.7.2 HTML 어트리뷰트 조작

4개의 함수로 각각 획득, 설정, 존재 여부 확인, 삭제가 가능하다.

<input id="user" type="text" value="ungmi2" >

<script>
	const inputComponent = document.getElementById('user');
</script>

1. HTML Attribute 값 획득