I've got appear effect issue on javascript . It says getboundingclientrect() is not a function

Question

function scrollAppear(){

     var art = document.querySelectorAll(".art");
     var artPos = art.getBoundingClientRect().top;
     var screenPos = window.innerHeight /1.3;

     if (artPos<screenPos) {
     art.classList.add('appear');
     }
}
window.addEventListener('scroll',scrollAppear);

I checked dev and It said "getboundingclientrect() is not a function".

when I changed "document.querySelectorAll(".art");" into "document.querySelector(".art");", It works but only first child of article has art class.

<main class="main_cont">
        <article class="art container matt_glow">
            ...
        </article>
        <article class="art flow foundation">
            ...
        </article>
        <article class="art container new_arrival">
            ...
        </article>
        <article class="art flow pro_tip">
            ...
        </article>
        <article class="art container on_sns">
            ...
        </article>
    </main>