querySelector 와 getElementById의 차이

우리는 자바스크립트 코드를 짜면서 querySelector와 getElementById를 자주 사용합니다. 저 역시 자주 사용하는 querySelector와 getElementById의 정확한 차이점을 알고싶어서 공부해봤습니다.

querySelector란?

element = document.querySelector(selectors);

selector의 구체적인 그룹과 일치하는 document안 첫번째 엘리먼트를 반환한다. 일치하는게 없으면 null반환한다.

코드

querySelector

    <div id="parent">
        <div class="child"> // id="child"로 한 후 querySelector 부분을 #child로 
        						바꿔도 가능
            안녕하세요
        </div>
    </div>
    <script>
        var child = document.querySelector("#parent .child");
        child.style.color="red";

    </script>

결과

getElementById란?

element = document.getElementById(selectors);

id를 통해 엘리먼트를 반환한다. 만약 document에 구체적인 ID의 엘리먼트가 없다면 null을 반환한다.

코드

<div id="parent">
    <div id="child">
        안녕하세요
    </div>
</div>
<script>
    var child = document.getElementById("child");
    child.style.color="blue";
</script>

결과

위 코드에서 알 수 있듯이 getElementById는 id값으로만 element를 가져 올 수 있고 querySelector는 id, class를 비롯해 다양한 선택자를 사용할 수 있습니다. 그렇다면 생산성이 좋은 querySelector가 더 좋은 방법일까요?? 그렇지는 않습니다. 그 이유는 밑에서 자세히 알아보겠습니다.

getElementsByClassName

코드

"

    <div id="child" class="hi">
        안녕하세요
    </div>
    <div id="child" class="hi">
        안녕하세요
    </div>
    <div id="child" class="hi">
        안녕하세요
    </div>
    <div id="child" class="hi">
        안녕하세요
    </div>
</div>
<script>
    var hi = document.getElementsByClassName("hi");
    hi[0].style.color="blue";

</script>"

    <div id="child" class="hi">
        안녕하세요
    </div>
    <div id="child" class="hi">
        안녕하세요
    </div>
    <div id="child" class="hi">
        안녕하세요
    </div>
    <div id="child" class="hi">
        안녕하세요
    </div>
</div>
<script>
    var hi = document.querySelectorAll(".hi");
    hi[0].style.color="blue";

</script>"