https://www.brocksi.net/blog/how-to-find-dom-elements-with-a-lot-of-childs?utterances=2a796f848c3803de360bb814A4ys1EOlE1HiwD1KjB0%2FgEaWWoHOcoyPOYdUMpEqncBH65Mv1W6fWVOqEAdUIJpkepxR7DwDXixxzubDsQADOIRPUDN1HG8ya%2FejQemI36wAHjFzKUnF9gjfNSI%3D

[utterances-bot]

How to find DOM elements with a lot of childs? | BrocksiNet

When you think about the core web vitals then you will find this claim "Avoid an excessive DOM size". This is easy to say, but sometimes hard to achieve. Also the page about dom-size at web.dev gives you only some general advices. When you once had a page that is really slow, just because someone created a quantity select element with over 500 options for every product on a category page with 48 products. And then Lighthouse tells you that the DOM size should be below 12.000 elements.

https://www.brocksi.net/blog/how-to-find-dom-elements-with-a-lot-of-childs?utterances=2a796f848c3803de360bb814A4ys1EOlE1HiwD1KjB0%2FgEaWWoHOcoyPOYdUMpEqncBH65Mv1W6fWVOqEAdUIJpkepxR7DwDXixxzubDsQADOIRPUDN1HG8ya%2FejQemI36wAHjFzKUnF9gjfNSI%3D

[CoderXXL]

thanks very useful, small note: i find it helpful to add html:node to the output[] to make the element easier to find and parse

{className:node.className, count: node.childElementCount, name: node.nodeName, html:node}

[CoderXXL]

P.S. you can use the script as a bookmark for quick access javascript:(function()%7Blet output %3D %5B%5D%3Bdocument.body.querySelectorAll('*').forEach(function(node) %7Boutput.push(%7BclassName%3Anode.className%2C count%3A node.childElementCount%2C name%3A node.nodeName%2C html%3Anode%7D)%3B%7D)%3Bconst sortBy %3D (key) %3D> %7Breturn (a%2C b) %3D> (a%5Bkey%5D > b%5Bkey%5D) %3F -1 %3A ((b%5Bkey%5D > a%5Bkey%5D) %3F 1 %3A 0)%3B%7D%3Bconsole.log(output.sort(sortBy("count")))%7D)()