[바닐라 자바스크립트] 8장 - 자바스크립트 HTML DOM

8.1 DOM Element(요소)

  - HTML 요소의 id로 HTML 요소 찾기

    - document.getElementById()

  - HTML 요소의 태그명을 이용해서 HTML 요소 찾기

    - document.getElementsByTagName()

  - 클래스명을 이용해서 HTML 요소 찾기

    - document.getElementsByClassName()

  - CSS 선택자를 이용해서 HTML 요소 찾기

    - 태그 선택자(Type Selector)

    - 클래스 선택자(Class Selector)

    - ID 선택자(ID Selector)

    - 복합 선택자(Combinator Selector)

    - 속성 선택자(Attribute Selector)

    - CSS 선택자를 이용해서 HTML 요소 찾기 예

8.2 DOM Attribute

  - getAttribute()

    - HTML 요소의 속성 정보 가져오기

  - setAttribute()

    - HTML 요소의 속성 정보 값 변경

  - hasAttribute()

    - HTML 요소의 특정 속성이 있는지 확인

  - removeAttribute()

    - HTML 요소의 특정 속성 삭제 

8.3 HTML 내용 변경

  - innerHTML

    - HTML 특정 위치에 새로운 HTML 삽입할 때 사용 가능

  - innerText

    - 텍스트만 삽입 가능

  - insertAdjacentHTML()

    - 자식 노드 제일 앞/뒤에 새로운 HTML 삽입할 때 사용 가능

    - 파라미터; DOM 요소 삽입 위치, 삽입할 DOM 요소에 대한 문자열

  - insertAdjacentText()

    - 현재 접근한 DOM 요소의 위치를 기준으로 텍스트 삽입

  - remove()

    - HTML 요소 삭제

8.4 DOM 이벤트

  - click 이벤트(onclick)

  - change 이벤트(onchange)

  - focus 이벤트(onfocus)

  - blur 이벤트(onblur)

  - key 이벤트(onkeydown, onkeypress, onkeyup)

  - scroll 이벤트(onscroll)

  - touch 이벤트

  - load 이벤트(onload)

  - unload 이벤트(onunload)

8.5 DOM Style(스타일)

---

[Reference]

Source Code - Vanilla JavaScript ch. 08

Vanilla JavaScript (비제이 퍼블릭 출판사)