时间戳

首页 > 解决方案 > querySelectorAll 获得的项目少于页面上的项目

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

问题描述

我正在从头开始学习 JavaScript，并将我今天学到的东西付诸实践来自浏览器控制台的代码（在 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，因为类与其他不同的按钮共享，所以我的选择器是唯一部分工作的选择器。

有什么建议么？谢谢！

标签： javascripttwitter

解决方案

都是“喜欢按钮”div元素吗？否则，您将选择限制为同样是divs 的按钮。

如果它们不是所有div元素，并且所有“喜欢按钮”都具有该data-testid="like"属性，那么下面应该选择所有元素。

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

推荐阅读