querySelectorAll获得的项目少于页面上的项目

Question

我正在从头开始学习JavaScript，并将今天学到的东西付诸实践，我正在做一个小脚本，以自动喜欢页面的所有tweet，无论是来自主供稿，搜索，主题标签还是我的任何地方。从浏览器控制台（在Google Chrome上）运行代码。

问题？当执行代码时，它起作用了，但是它只能拾取7个类似的按钮，而实际上我执行它的页面上有50条以上的推文（所以50个类似的按钮）。

我已经尝试了一百万种东西，但我无法弄清任何东西。

这是我到目前为止的代码：

var likes = document.querySelectorAll('div[data-testid=like]');
var index = 0;
var timer = setInterval(function(){
    console.log(`Te han gustado ${index} de un total de ${likes.length} tweets encontrados!`);
    likes[index].click();
    index++;

    if(index == likes.length){
        clearInterval(timer);
    }
}, 10000);

我想不出另一种获得类似按钮的方法。新的Twitter设计的HTML结构很疯狂。

编辑：我想这是类似按钮的HTML代码？

<div class="css-1dbjc4n r-1iusvr4 r-18u37iz r-16y2uox r-1h0z5md">
    <div aria-label="52 Me gusta. Me gusta" role="button" data-focusable="true" tabindex="0" class="css-18t94o4 css-1dbjc4n r-1777fci r-11cpok1 r-1ny4l3l r-bztko3 r-lrvibr" data-testid="like">
        <div dir="ltr" class="css-901oao r-1awozwy r-1re7ezh r-6koalj r-1qd0xha r-a023e6 r-16dba41 r-1h0z5md r-ad9z0x r-bcqeeo r-o7ynqc r-clp7b1 r-3s2u2q r-qvutc0">
            <div class="css-1dbjc4n r-xoduu5">
                <div class="css-1dbjc4n r-sdzlij r-1p0dtai r-xoduu5 r-1d2f490 r-xf4iuw r-u8s1d r-zchlnj r-ipm5af r-o7ynqc r-6416eg"/>
                <svg viewBox="0 0 24 24" class="r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1hdv0qi">
                    <g>
                        <path d="M12 21.638h-.014C9.403 21.59 1.95 14.856 1.95 8.478c0-3.064 2.525-5.754 5.403-5.754 2.29 0 3.83 1.58 4.646 2.73.814-1.148 2.354-2.73 4.645-2.73 2.88 0 5.404 2.69 5.404 5.755 0 6.376-7.454 13.11-10.037 13.157H12zM7.354 4.225c-2.08 0-3.903 1.988-3.903 4.255 0 5.74 7.034 11.596 8.55 11.658 1.518-.062 8.55-5.917 8.55-11.658 0-2.267-1.823-4.255-3.903-4.255-2.528 0-3.94 2.936-3.952 2.965-.23.562-1.156.562-1.387 0-.014-.03-1.425-2.965-3.954-2.965z"/>
                    </g>
                </svg>
            </div>
            <div class="css-1dbjc4n r-xoduu5 r-1udh08x">
                <span class="css-901oao css-16my406 r-1qd0xha r-ad9z0x r-1n0xq6e r-bcqeeo r-d3hbe1 r-1wgg2b2 r-axxi2z r-qvutc0">
                    <span class="css-901oao css-16my406 r-1qd0xha r-ad9z0x r-bcqeeo r-qvutc0">52</span>
                </span>
            </div>
        </div>
    </div>
</div>

所以我不能使用getElementsByClassName，因为类是与其他类似的按钮共享的，所以我的选择器是唯一部分起作用的按钮。

¿有什么建议吗？谢谢！

Answer 1

是否所有“喜欢的按钮” div元素？否则，您只能将选择限制为也为div的按钮。

如果它们不是全部div元素，并且所有“类似按钮”都具有data-testid="like"属性，则下面应选择所有这些元素。

var likes = document.querySelectorAll('[data-testid=like]');