[JavaScript] 요소 접근하여 가져오기 - 선택자 활용

내가 원하는 요소 자유자재로 가져오기(선택자 활용)

document.querySelector("선택자"); -> 선택된 요소 하나만 반환
document.querySelectorAll("선택자"); -> 선택된 요소 객체들을 배열에 담아서 반환

</script>

<h3>5) 내가 원하는 요소 자유자재로 가져오기(선택자 활용)</h3>

<div id="test1">테스트입니다.</div>
<div class="test">
    <h2>하이</h2>
    <h2>바이</h2>
</div>
<span>Hello</span>
<h2>Byebye</h2>

<button onclick="accessSelector();">클릭</button>
<script>
    function accessSelector(){
        var divEl = document.querySelector("#test1"); // div요소객체
        var h2El = document.querySelectorAll(".test>h2"); // [h2요소객체, h2요소객체]
        var spanEl = document.querySelector(".test+span"); // span 요소객체

        console.log(divEl);
        console.log(h2El);
        console.log(spanEl);
    }
</script>