[JS] querySelector

querySelector함수를 이용해서 html에 있는 요소를 불러올 수 있다.

[js]

const searchEl = document.querySelector('.search')

const searchInputEl = searchEl.querySelector('input')

// 검색창 요소를 클릭하면 실행.

searchEl.addEventListener('click', function () {

  searchInputEl.focus()

})

// 검색창 요소 내부 실제 input 요소에 포커스되면 실행.

searchInputEl.addEventListener('focus', function () {

  searchEl.classList.add('focused')

  searchInputEl.setAttribute('placeholder', '통합검색')

})

// 검색창 요소 내부 실제 input 요소에서 포커스가 해제(블러)되면 실행.

searchInputEl.addEventListener('blur', function () {

  searchEl.classList.remove('focused')

  searchInputEl.setAttribute('placeholder', '')

})

[html]

<div class="search">

  <input type="text" />

  <span class="material-icons">search</span>

</div>