• 요소의 클래스 명을 가져오거나 수정한다.
• 요소.className - 요소의 클래스명 가져오기
• 요소.className = "new" - 요소의 클래스명 수정하기 (new로 수정됨)

• 요소가 가진 클래스명을 모두 가져오거나 수정한다.
• 요소.classList - 요소가 가진 클래스명 전부 가져오기
• 요소.classList.add("abc") - 요소가 가진 클래스 리스트에 "abc" 라는 클래스명을 추가한다.
• 요소.classList.remove("abc") - 요소가 가진 클래스 리스트에서 "abc" 라는 클래스명을 제거한다.
• 요소.classList.toggle("abc") - 요소가 가진 클래스 리스트에서 "abc" 라는 클래스명을 추가/제거(토글)한다.
• 요소.classList.contains("abc") - 요소가 가진 클래스 리스트에서 "abc" 라는 클래스가 있는지 검사한다. (boolean)
• 요소.classList.replace("abc","new") - 요소가 가진 클래스 리스트에서 "abc" 라는 클래스를 "new"로 교체한다.

• 요소가 가진 id명을 가져오거나 수정한다.
• 요소.id - 요소의 아이디명 가져오기
• 요소.id = "new" - 요소의 아이디명 수정하기 (new로 수정됨)

• 요소가 해당 속성을 가지고 있는지를 검사한다.
• 요소.hasAttribute("속성") - 요소가 해당 속성을 가지고 있을 경우 true 를 반환. 그렇지 않으면 false 반환
• 요소.hasAttributes() - 요소가 어떠한 인라인 속성을 하나라도 가지고 있을 경우 true를 반환. 그렇지 않으면 false 반환
• 요소.hasAttributes() - 요소노드가 아닐경우 false 를 반환한다.

getAttribute / setAttribute

• 해당 요소의 title 속성 값을 가져오거나 수정한다.
• 요소.title; - 해당 요소의 title 속성값을 반환한다.
• 요소.title = "abc" - 해당 요소의 title 속성값을 abc로 수정한다 (ex. <a href="#" title="abc">);

• 요소.clientWidth- 요소의 padding을 포함한 넓이 (border, margin값은 포함하지 않는다)
• 요소.clientHeight - 요소의 padding을 포함한 높이 (border, margin값은 포함하지 않는다)
• 요소.scrollWidth- overflow:auto/scroll 등으로 인한 영역까지 포함한 넓이 (단, padding, border, margin 모두 제외)
• 요소.scrollHeight - overflow:auto/scroll 등으로 인한 영역까지 포함한 높이 (padding을 포함. border, margin 제외)
• 요소.offsetWidth- 요소의 넓이 (padding, border값 포함)
• 요소.offsetHeight - 요소의 높이 (padding, border값 포함)
• https://javascript.info/size-and-scroll

• 요소.clientLeft- 요소의 왼쪽 border 두께 (padding 이나 여백값은 포함하지 않는다 / style.borderLeftWidth 와 같다)
• 요소.clientTop- 요소의 상단 border 두께 (padding 이나 여백값은 포함하지 않는다 / style.borderTopWidth 와 같다)

• 요소.offsetLeft- 문서(document)를 기준으로 요소가 왼쪽에서 얼마나 떨어져있는지 수치(여백) 값을 가져온다. (읽기전용)
• 요소.offsetTop - 문서(document)를 기준으로 요소가 상단에서 얼마나 떨어져있는지 수치(여백) 값을 가져온다. (읽기전용)

• 요소.scrollLeft- 요소 내에서 스크롤 된 값(left 스크롤값)을 가져온다.
• 요소.scrollLeft = 50- 요소 내에서 우측으로 50픽셀 만큼 스크롤한다.
• 요소.scrollTop- 요소가 스크롤 된 값(top 스크롤 값)을 가져온다.
• 요소.scrollTop = 50- 요소 내에서 아래쪽으로 50픽셀 만큼 스크롤한다.

• 요소.closest("클래스명/아이디명/태그명") - 요소의 부모와 조상으로 부터 특정 클래스(또는 아이디,태그)를 가진 가장 가까운 요소를 선택한다. / 없을경우 null 반환

• dir - 텍스트 정렬값을 반환 or 수정한다. 요소.dir 이라고 적으면 방향을 가져오고, 요소.dir = "rtl" 이렇게 설정할 경우 오른쪽에서 왼쪽으로 수정한다는 뜻 (반대는 ltr)

• 요소.tabIndex = "1"; - 탭키로 포커스 이동시 우선순위가 1번으로 부여된다. 우선순위가 낮을수록 가장 먼저 포커스 된다.
• 요소.tabIndex; - 해당 요소의 탭 인덱스 값을 가져온다.