HTML에서 태그는 여러개의 속성을 가질 수 있다.
브라우저는 HTML을 파싱해 DOM 객체를 만들 때 HTML 표준 속성을 인식하고, 이 표준 속성을 사용해 DOM 프로퍼티를 만든다.
이 속성을 다루는 메서드들에 대해 알아보자.

1. Element.tagName

<ul>
    <li>html</li>
    <li>css</li>
    <li id="active" class="important current">JavaScript</li>
</ul>
<script>
console.log(document.getElementById('active').tagName) // output: li
</script>

• active 라는 엘리먼트 오브젝트의 태그 네임인 li를 반환한다.
• 해당 태그네임을 초기화 해도 태그 네임은 바뀌지 않는다.(즉, 읽기전용이다)

2. Element.id

: 위의 예시와 비슷하다. 다만 해당 태그의 ID 값을 반환한다.

3. Element.className

: 위랑 비슷하다.

• 클래스 네임을 바꾸기위해 이것을 쓰는것은 사용하기 어렵다.
• 클래스가 여러개일 경우 전체를 다 바꿔주어야한다.

4. Element.classList

: ClassName의 불편함을 해결한 것으로 클래스 전체를 배열로 가져온다.

• 가지고 있는 클래스를 배열로 반환하기 때문에 한개씩 바꿀 수 있다.
• add, remove, toggle 등의 메소드를 가지고 있다.

5. Element.getAttribute(name)

: 엘리먼트가 가진 속성 값을 가져올 수 있다.

6. Element.setAttribute(name, value)

: 엘리먼트의 속성 값을 바꿀 수 있다.

• 없는 속성이면 새로 추가해주고 있는 속성이면 값만 바꿔준다.

7. Element.removeAttribute(name)

: 속성을 없애 준다.

8. Element.hasAttribute(name)

: 속성이 있는지 없는지 찾아준다.

• 불린 값으로 반환한다.(있다면 true, 없다면 false)