使用 Vanilla Javascript 从 CSS 类的字符串中获取所有字符

Question

我编写了一些代码，从类中字符串的所有字符中提取计数。

有没有一种使用 Vanilla JavaScript 的简单方法来获取字符串的所有字符而不调用类的每个元素？

let allNews = "";
    allNews = allNews + document.getElementsByClassName("news-link")[0].innerHTML;
    allNews = allNews + document.getElementsByClassName("news-link")[1].innerHTML;
    allNews = allNews + document.getElementsByClassName("news-link")[2].innerHTML;
    allNews = allNews + document.getElementsByClassName("news-link")[3].innerHTML;
    allNews = allNews + document.getElementsByClassName("news-link")[4].innerHTML;
    allNews = allNews + document.getElementsByClassName("news-link")[5].innerHTML;
    allNews = allNews + document.getElementsByClassName("news-link")[6].innerHTML;
const allChars = allNews.length;
console.log(allChars)

<div class="ticker">
    <div class="news">
        <span><a href="#" class="news-link">OTHER NEWS</a></span>
        <span><a href="#" class="news-link">OTHER NEWS</a></span>
        <span><a href="#" class="news-link">OTHER NEWS</a></span>
        <span><a href="#" class="news-link">OTHER NEWS</a></span>
        <span><a href="#" class="news-link">OTHER NEWS</a></span>
        <span><a href="#" class="news-link">OTHER NEWS</a></span>
        <span><a href="#" class="news-link">OTHER NEWS</a></span>
    </div>
</div>

Answer 1

是的：使用循环，计算你真正想要的东西 (allChars)。这还具有更健壮的优势——它可以处理更少的行或更多的行。

const elements = document.getElementsByClassName("news-link");
let allChars = 0;
for (const {innerHTML} of Array.from(elements)) {
    allChars += innerHTML.length;
}
console.log(allChars)

<div class="ticker">
    <div class="news">
        <span><a href="#" class="news-link">OTHER NEWS</a></span>
        <span><a href="#" class="news-link">OTHER NEWS</a></span>
        <span><a href="#" class="news-link">OTHER NEWS</a></span>
        <span><a href="#" class="news-link">OTHER NEWS</a></span>
        <span><a href="#" class="news-link">OTHER NEWS</a></span>
        <span><a href="#" class="news-link">OTHER NEWS</a></span>
        <span><a href="#" class="news-link">OTHER NEWS</a></span>
    </div>
</div>

我建议在一般情况下使用textContent 而不是innerHTML，但这取决于你在做什么。

Answer 2

先做两件事：

.getElementsByClassName() 返回一个“实时”节点列表（每次访问它时所有匹配元素都会保持更新的列表），因此具有比“静态”节点列表更高的性能开销（a在您执行搜索时找到匹配元素的列表），因此当您不需要时不要使用活动节点列表。此外，由于活动节点列表的工作方式，从循环中访问一个节点确实会损害性能。相反，使用.querySelectorAll()，它返回一个静态节点列表，您可以立即使用.forEach() 循环其结果。

另外，.getElementsByClassName()（与许多其他方法一样）返回一个集合，它当然可以被索引，但如果这是您的目标，只需执行一次搜索并获取与变量引用一起存储的集合，然后您就可以连续索引该收藏集随心所欲，无需一遍又一遍地创建收藏集。

接下来，尽可能避免使用.innerHTML，因为使用它会影响安全性和性能。在您的情况下，您想要查看的字符串中甚至没有任何 HTML，因此无需在此处调用 HTML 解析器。而是使用.textContent 来获取字符串数据。

将所有这些东西放在一起并使用现代代码，它实际上比您所做的要简单得多：

let allNews = "";
// Locate all the elements that use the news-link class and 
// loop over the collection of them
document.querySelectorAll(".news-link").forEach(function(link){
  allNews += link.textContent; // Add the character count to the total
});

console.log(allNews.length);

<div class="ticker">
    <div class="news">
        <span><a href="#" class="news-link">OTHER NEWS</a></span>
        <span><a href="#" class="news-link">OTHER NEWS</a></span>
        <span><a href="#" class="news-link">OTHER NEWS</a></span>
        <span><a href="#" class="news-link">OTHER NEWS</a></span>
        <span><a href="#" class="news-link">OTHER NEWS</a></span>
        <span><a href="#" class="news-link">OTHER NEWS</a></span>
        <span><a href="#" class="news-link">OTHER NEWS</a></span>
    </div>
</div>