About Web

2020.03.29 - [Frontend/Javascript] - Javascript (자바스크립트) - 요소(Element) 찾기

자바스크립트의 요소 찾기와 다르게

제이쿼리의 경우엔 좀더 간단하게 요소를 찾을 수 있다.

1. 기본 셀렉터

위 요소를 사용하는 예시를 들자면 아래와 같다.

<div id="wrap">
  <div class="box">
    <p>예시용 설명글 입니다.</p>
  </div>
</div>

<script>
  var wrapper = $("#wrap");
  var box = $(".box");
  var paragraph = $("p");
  
  console.log(wrapper);  // <div class="wrap"> 반환
  console.log(box);  // <div class="box"> 반환
  console.log(paragraph);  // <p>예시용 설명글 입니다.</p> 반환
</script>

*사용시 주의사항

<div id="wrap">
  <div class="box">
    <p>예시용 설명글 입니다.</p>
  </div>
  <div class="box">
    <span>안녕</span>
  </div>
  <p class="dsc">안내사항을 전달 드립니다.</p>
</div>

<script>
  var wrapper = $("#wrap");
  var box = $(".box");
  var paragraph = $("p");
  
  console.log(wrapper);  // <div class="wrap"> 반환
  console.log(box);  // <div class="box"> 2영역을 배열 형식으로 반환
  console.log(paragraph);  // <p>예시용~</p>, <p class="dsc">안내사항을~</p> 2영역을 배열형식으로 반환
</script>

위와 같은 경우라고 했을 때

<div class="box">

  <span>안녕</span>

</div>

이라는 영역을 가져오고 싶어서

var box = $(".box") 를 사용하여 해당 요소를 찾았지만

<div class="box">

  <p>예시용 설명글 입니다.</p>

</div>

영역까지 같이 검색이된다.

그렇기 때문에 페이지에 하나만 존재하는 id값을 검색해서 사용하는 경우가 아니라면

클래스 검색, 태그 검색시 주의해야할 필요가 있다.

2. 특정 상황, 속성별 셀렉터

위의 예시들 처럼

css 작성할 때와 마찬가지로

특정 속성 및 상황별 선택자를 사용하면

제이쿼리에서 원하는 영역을 가져올 수 있다.

제이쿼리는 자바스크립트로 만든 자바스크립트 라이브러리다.

즉, 자바스크립트의 사용을 더 쉽게 하기위해 만든 문법이라고 생각할 수 있다.

기본적인 문법의 기초는 자바스크립트를 기반으로 만든 것이기 때문에

일반 *바닐라 스크립트와 동일하지만

사용하는 명령어나 함수가 다르다.

*바닐라 스크립트 : 다른 라이브러리를 사용하지 않고 순수한 일반 자바스크립트 문법을 말한다.

예를들면,

원하는 요소를 찾을 때

바닐라 자바스크립트의 경우 원하는 아이디 값의 요소를 찾는다고하면

document.getElementById('아이디값') 으로 검색을 하거나 document.querySelector('#아이디값')으로 검색을 할 수 있다.

하지만 제이쿼리의 경우

$('#아이디값') 이라는 명령어를 통해 바로 원하는 아이디 값을 찾을 수 있다.

<div id="wrapper">
  <ul class="list">
    <li></li>
    <li></li>
  </ul>
</div>

<script>
  // 바닐라 스크립트 문법
  var wrapper = document.getElementById('wrap');  // #wrapper 찾기
  var listWrap = wrapper.getElementsByClassName('list')[0];  // #wrapper .list 찾기
  var lists = listsWrap.getElementsByTagName('li');  // #wrapper .list li 찾기
  
  // 제이쿼리 문법
  var wrapper2 = $('#wrapper');  // #wrapper 찾기
  var listWrap2 = $('#wrapper .list')  // #wrapper .list 찾기
  var lists = $('#wrapper .list li')  // #wrapper .list li 찾기
</script>

위와 같은 원하는 요소를 찾은 경우 외에도

제이쿼리 문법은 바닐라 스크립트로 작성해야 할 문법의 양을 훨씬 줄여서 작성할 수 있기 때문에

편리하게 사용할 수 있다.

그렇지만 앞서 말했듯이 기본적인 문법의 구조는 바닐라 스크립트이기 때문에

기본적인 바닐라 스크립트의 공부가 되어있지 않은 상태에서

제이쿼리 문법과 명령어만 외워서 사용하는 것은 지양하는 것이 좋다.

특히나 SPA(Single Page Application)의 활용이 높아지면서 Vue, React 등의 라이브러리가 많이 사용이 되는데

해당 라이브러리에선 제이쿼리 문법을 사용하지 않고 주로 바닐라 스크립트로 작성해야 하는 일이 많기 때문에

바닐라 스크립트를 위주로 공부하고 그 내용들을 바탕으로 제이쿼리를 공부하면

훨씬 더 금방 제이쿼리에 대해 이해하고 접근할 수 있을 것이다.