javascript - 我在 javascript 上出现了效果问题。它说 getboundingclientrect() 不是函数

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);

我检查了开发，它说“getboundingclientrect() 不是一个函数”。

当我更改“document.querySelectorAll(".art");” 进入“document.querySelector(".art");”，它可以工作，但只有文章的第一个孩子有艺术类。

<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>