TIL(5) - DOM & EVENT

김서하·2021년 6월 14일
0

Wecode Session

목록 보기
5/7
post-thumbnail

DOM

✔️ HTML에서 JavaScript를 동작하는 두 가지 방법에 대해 이해한다.
✔️ JavaScript에서 DOM을 이용해 HTML에 접근하고 조작할 수 있다.
✔️ 다양한 이벤트의 기능을 살펴보고 그 중 자주 사용하는 기능을 직접 사용해 본다.
✔️ addEventListener 함수를 사용해 이벤트를 생성하여 정적인 웹페이지를 동적으로 변화시킬 수 있다.

1. JavaScript 위치

2. DOM

HTML -> CSS

  • inline style
  • <style>...</style>
  • .css

HTML -> JS

  • link
  • script

JS -> HTML

  • DOM(Document Object Model)

    • 웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object) 모델

    • JavaScript는 이 모델로 웹페이지에 접근하고, 페이지를 수정할 수 있습니다.

    • DOM은 웹페이지(HTML)와 Script언어(JavaScript)를 서로 잇는 역할.

    • JS에서 HTML에 접근해서 요소를 생성하고, 클래스를 부여하고, 스타일을 수정하고, 내용을 추가한다.

  • querySelector('') 클래스, id, 태그를 모두 가져올 수 있다. 가장 첫번째 요소를 반환한다.
  • getElementsByclassName('') 배열로 가져오기 때문에 인덱스가 필요하다.
  • getElementsByTagName('') 배열로 가져오기 때문에 인덱스가 필요하다.
  • getElementByIdName('') ID는 중복사용할 수 없기 때문에 단수형으로 쓴다.
profile
개발자 지망생 서하입니당

0개의 댓글