DOM & Event

기묭선·2021년 12월 15일
0
post-thumbnail

| DOM & Event

  1. 웹에서 HTML, CSS, Javascript가 어떤 기능을 하는지 설명할 수 있다.
  2. HTML에서 Javascript를 연결하는 방법 2가지를 설명할 수 있다.
  3. DOM의 정의와 기능에 대해 설명할 수 있다.
  4. DOM을 이용해서 Javascript로 HTML에 접근하고 조작할 수 있다.
  5. DOM에 접근하기 위해 사용하는 메소드들(getElement(s), querySelector(All))의 차이점을 설명할 수 있다.
  6. addEventListener 함수를 사용해 웹페이지를 동적으로 변화시킬 수 있다.

dom 이란
웹페이지의 html 을 계층화 시켜 트리구조로 만든 객체(오브젝트 모델

getElementById()
querySelector('') -해당하는 요소의 한 가지만 반환

getElementsByClassName('.logo')[0]
getElementsByTagName
querySelectorAll - 복수로 반환하기 떄문에

document.querySelector('.logo')

객체 데이터타입
-(hyphen) > camelCase 방식

addEventListener
함수 () < 인자를 갖고있음
요소.addEventListener(이벤트종류, function() {
//이벤트가 일어났을 때 실행할 내용
});
인자로 넘기는 함수 >>"콜백함수"(호출)

const password = document.getElementById('password').value
사용자가 작성한 input value 값 할당

! >> not
ex) !true >>> false
// falsy 값 >>
// null
// 0
// undefined
// ""

enter

전달해주지 않은 매개변수 event

profile
경험치 쌓으며 레벨업 하기

0개의 댓글