DOM Element Counter

WHAT IT DOES

DOM Element Counter is a browser extension that counts all DOM elements on any webpage and displays a breakdown by tag type. It shows the total element count, the count of each tag type (div, span, p, a, img, etc.), and highlights the most common elements with percentage indicators. The tool helps developers, QA engineers, and performance analysts understand page complexity, identify excessive use of certain element types, and optimize page structure. You can copy the report as plain text or JSON for further analysis. The tool is ideal for web developers, accessibility testers, performance auditors, and anyone who wants to analyze the composition of a webpage.

WHERE IT RUNS

DOM Element Counter runs on any webpage, overlaying a floating panel that does not interfere with page content. It operates entirely in your browser as a lightweight userscript, scanning the DOM for all elements. It works on any page, whether static or dynamic, with no external dependencies. All settings are stored locally using GM_setValue—no data is ever sent to any server.

HOW TO USE

After installation, open the floating panel by clicking the extension icon. The panel shows the current status (Enabled or Disabled) and a toggle button to enable or disable the counter. The panel displays the total element count prominently, followed by the top 5 most common tags with their counts and percentages. A full list shows all tag types found on the page with counts and percentages. Click the "Count" button to manually trigger a count, or "Text" to copy the report as plain text, or "JSON" to copy it as a JSON object. The tool automatically re-counts when the page content changes. All settings are saved per website.

REAL MECHANISM — WHY THIS WORKS

Most DOM analysis tools require browser developer tools or external auditing software that may not provide a quick overview of element distribution. DOM Element Counter uses a DOM-scanning approach that directly reads all elements from the page. The tool queries the page using document.querySelectorAll("*") to get all elements, then iterates through them, extracting the tagName of each element and counting occurrences in a map. The results are sorted by count in descending order, and the top 5 elements are displayed as color-coded badges with percentages. The total element count is shown prominently. The tool also calculates the percentage of each tag relative to the total, helping identify the most dominant element types. A MutationObserver detects dynamically added elements and recounts automatically. This approach ensures accurate, real-time, and fully private DOM analysis without requiring any external services or network access.

THE PANEL

The floating panel is fully draggable and remembers its position per site, snapping to the edges of the viewport when dragged near them. You can collapse the panel to a small icon to minimize screen distraction and expand it back with a single click. The panel is resizable from the bottom-right corner, giving you more space to view the results. Press the Escape key to close the panel instantly. The panel remains open across page navigation within the same domain, maintaining your current view state. All preferences—panel position and enabled state—are saved per domain for a seamless experience.

PLEASE NOTE

DOM Element Counter requires the free BotGentz extension to be installed and enabled, as it relies on the cross-extension messaging API provided by BotGentz for DOM access permissions. The tool counts all DOM elements including those that may not be visible or are generated by JavaScript. The tool does not modify page content; it only reads and displays element data. The report includes tag names but not IDs, classes, or other attributes. All settings are stored locally in your browser using GM_setValue. No page content, element data, or usage information is ever sent to any server. The extension does not read, store, or transmit any personal information. It only scans and displays DOM element data at your request.