Toy | querySelector 사용

querySelector()

• Document.querySelector()는 제공한 선택자와 일치하는 문서 내 첫 번째 Element를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다.
• 이번 토이프로젝트에서는 querySelector()를 사용하여 html의 태그 id, class를 Js에서 가져왔습니다.

querySelector(#id) => id값 id를 가진 요소를 찾음
querySelector(.class) => class값 class를 가진 요소를 찾음

채팅 시 대화명에 사용될 nickname의 id를 찾아야하기 때문에 #nickname을 사용했습니다. 그 이외 나머지는 class를 가진 요소를 찾기 떄문에 .클래스이름을 통해 요소를 찾아왔습니다.

const nickname = document.querySelector('#nickname')
const chatList = document.querySelector('.chatting-list')
const chatInput = document.querySelector('.chatting-input')
const sendBtn = document.querySelector('.send-btn')

이런식으로 바닐라 자바스크립트를 사용하여 채팅앱을 구성해볼 것 입니다.