Javascript document.querySelector(All)

 

 

1. 처음 jQuery를 접할 때

 

처음 웹개발을 시작하고 아무런 배경없이 그저 받아들이기만 했을 때 html은 무엇이고, css는 무엇이며 javascript는무엇인지 전혀 모르고 그저 따라치기만 바빴습니다.

 

얼렁뚱땅 며칠 하다가 jQuery로 넘어가면서 편리하다고들 하는데 도대체 무엇이 편리한지도 정확히 모른 채 그저 공부해야 할 게 하나 더늘었다는 생각만으로 기능들을 익히기에 분주했습니다.

 

작은 프로젝트들을 하며 jQuery가 개발하는 입장에서 좋은 기능이라는 걸 깨달았고, 별 무리없이 계속 쓰고 있었습니다. 모르는 것을 뒤져보다 우연히 요즘은 제이쿼리를 잘 안쓰는 추세라는 글을 보았고, 왜 안쓰는지 찾아보았습니다.

 

당연히 이유를 몰랐습니다. 왜냐하면 DOM의 정확한 개념을 견지하지도 않고 그저 화면에 나오기만 하면 되는 기능들만 익히니 어떻게 접근해서 어떻게 결과가 나오는지는 거의 알지 못합니다. 사실 지금도 마찬가지구요,,

 

프로젝트에서 jQuery 의 사용을 그만두겠다고 결심한 이유

 

위의 링크는 jquery가 어떤이유에서 그닥 추천하지 않는지를 설명하는 포스팅입니다.

 

 

2. Vanilla Javascript를 공부해야겠다고 결심한 이유

 

제가 느끼기에 적어도 웹개발은 강력한 framework를 기반으로 탄탄한 웹 어플리케이션을 구축하는 것을 선호하는 것 같다고 느꼈습니다.

이러한 framework들은 초반에 진입이 힘들다는 단점이 있지만, 어느정도 익히고 나면 틀에서 크게 벗어나지 않고, 제한되어있어 보다 개발에 있어 높은 완성도를 자랑한다는 장점이 있습니다.

servier, jsp에서 spring, springboot로, jquery에서 react, vue로 전환되는 추세도 이 때문이 아닐까 조심스레 생각해봅니다.

 

Vanilla JS에 보다 더 다가가기 위해 오늘은 document.querySelector에 대해 공부해볼까 합니다.

 

3. document.querySelector

 

 1) querySelector

 

<div class="test">Hello</div>

class="test"인 div태그입니다.

 

이 태그를 선택하려면 jQuery에서는,

$(".test")

위처럼 표시할 수 있습니다.

 

document.querySelector에서는,

 document.querySelector(".test")

위처럼 입력합니다.

 

이외에도 javascript에서는 querySelector 말고도 다른 기능이 있습니다.

document.getElementsByClassName("test")

 

 

만약 태그의 내용 'Hello' 에서 Hi로 변경한다면,

$(".test").html("Hi"); //jQuery

document.querySelector(".test").innerHtml = 'Hi'; // Javascript

 

둘다 위와 같이 변경이 가능합니다.

 

마찬가지로 class뿐만 아니라 id에도 가능합니다.

<div id="test">Hello</div>

$("#test") //jQuery

document.querySelector("#test") //javascript
document.getElementById("test") //javascript

 

 2) querySelectorAll

 

<div class="test">Hello1</div>
<div class="test">Hello2</div>
<div class="test">Hello3</div>
<div class="test">Hello4</div>

만약 jQuery에서 class가 test인 태그에 빨간색 글씨를 준다면, class="test"인 모든 태그의 텍스트가 빨간색이 됩니다.

 

$(".test").css("color", "red");

 

출력결과

 

하지만 document.querySelector를 쓴다면,

document.querySelector('.test').style.color='red';

출력결과

위처럼 맨 윗줄만 css가 적용이 됩니다.

 

jQuery의 기능처럼 해당하는 모든 class name에 css를 적용하려면 querySelectorAll를 사용하면 됩니다.

하지만 배열로 가져오기 때문에 모든 class에 css를 적용하려면 반복문을 이용해야합니다.

var testList = document.querySelectorAll('.test');
for ( var i = 0; i < testList.length; i++ ) {
    testList[i].style.color = 'red';
}

출력결과

 

 

 

 

참고자료

www.codingfactory.net/10413

jeonghwan-kim.github.io/2018/01/25/before-jquery.html