JavaScript - 查找所有具有类的元素，查找重复项并显示它们

Question

我需要找到当前页面上的所有重复项，计算它们并列出有多少重复项。 到目前为止，我有这段代码，但它只显示页面上有多少元素。 我究竟做错了什么？

我正在获取 div 元素，我正在尝试列出哪些 div 元素被复制、重复了多少次并显示整个代码结构<div>text<span>text</span></div>

重复元素可以是这样的：

<div>this is the <span>text</span> with <strong>something</strong></div>

我需要找到整个div 元素是否不止一次出现在页面上，并像这样制作列表：

<div>this is the <span>text</span> with <strong>something</strong></div> - count(2)

到目前为止的代码：

let htmlCollectionArray = document.getElementsByClassName('sql-hl-main')
let  count = {}

Array.prototype.forEach.call(htmlCollectionArray, function(el, i) { 
    count[el] = (count[el]||0) + 1;
});

Answer 1

您可以使用document.querySelectorAll()获取类名 ( .sql-hl-main div ) 下的所有 div 元素，并返回静态NodeList 。 使用NodeList.forEach()迭代 NodeList 并使用元素的outerHTML字符串作为键：

 const count = {}; document.querySelectorAll('.sql-hl-main div') .forEach(el => { const key = el.outerHTML; // or innerHTML if you don't want the container div count[key] = (count[key] || 0) + 1; }); console.log(count)

 <div class="sql-hl-main"> <div>this is the <span>text</span> with <strong>something</strong></div> <div>text<span>text</span></div> <div>this is the <span>text</span> with <strong>something</strong></div> <div>this is the <span>text</span> with <strong>something</strong></div> </div>

Answer 2

为什么不直接使用 length 属性？

 console.log(document.getElementsByClassName('sql-hl-main').length); console.log(document.getElementsByClassName('sql-h3-main').length);

 <div class="sql-hl-main"></div> <div class="sql-hl-main"></div> <div class="sql-hl-main"></div> <div class="sql-hl-main"></div> <div class="sql-hl-main"></div> <div class="sql-hl-main"></div> <div class="sql-hl-main"></div> <div class="sql-hl-main"></div> <div class="sql-hl-main"></div> <div class="sql-h3-main"></div> <div class="sql-h3-main"></div>