Return Top Level Elements in HTML

An npx tool that extracts and displays the top-level DOM structure of HTML documents in a beautifully styled web page. Supports both local HTML files and remote URLs.

🚀 Usage

Run the tool in any directory that contains an HTML file, or provide a URL:

# Using npx (recommended - no installation needed)
npx return-top-level-elements-in-html [depth] [url]

# Or install globally and run
npm install -g return-top-level-elements-in-html
return-top-level-elements-in-html [depth] [url]

Parameters

• depth (optional): Number of DOM levels to extract
  • Range: 1-20 levels
  • Default: 3 levels
• url (optional): URL to fetch HTML from
  • If not provided, looks for local HTML files
  • Supports both http:// and https:// URLs

Examples

# Extract 3 levels from local file (default)
npx return-top-level-elements-in-html

# Extract 5 levels from local file
npx return-top-level-elements-in-html 5

# Extract 3 levels from a URL
npx return-top-level-elements-in-html 3 https://example.com

# Extract from URL with default depth (3 levels)
npx return-top-level-elements-in-html https://github.com

# Extract 1 level from a complex website
npx return-top-level-elements-in-html 1 https://stackoverflow.com

# Extract only 2 levels
npx return-top-level-elements-in-html 2

📋 Prerequisites

For local files: The tool looks for HTML files in the current directory in this order:

• index.html
• index.htm
• main.html
• home.html

For URLs: No prerequisites needed - just provide a valid HTTP or HTTPS URL.

✨ Features

• Dual Input Support: Analyze local HTML files or fetch from remote URLs
• Beautiful Bootstrap UI: Uses Bootstrap 5 via CDN for modern styling
• Collapsible Accordion Interface: Each DOM level can be expanded/collapsed for easy navigation
• Color-coded levels: Each DOM level has a different color for easy visualization
• Interactive hover effects: Smooth animations when hovering over elements
• Source Display: Shows whether analyzing a local file or URL source
• Expand/Collapse Controls: Buttons to expand or collapse all levels at once
• Keyboard Shortcuts: Ctrl/Cmd + E to expand all, Ctrl/Cmd + C to collapse all
• Responsive design: Works on all screen sizes
• Automatic browser opening: Opens the result page automatically
• Detailed information: Shows element attributes and child counts
• Scrollable tree view: Large DOM structures are easily navigable
• Error handling: Proper error messages for network issues or invalid URLs

🎨 Output Features

The generated web page includes:

• Collapsible Accordion Structure: Click any element to expand/collapse its children
• Expand/Collapse All Buttons: Quick controls to expand or collapse the entire tree
• Keyboard Shortcuts: Ctrl/Cmd + E (expand all), Ctrl/Cmd + C (collapse all)
• Gradient background design
• Color-coded DOM levels (6 different colors)
• Element attributes display
• Child element count badges
• Legend for level colors
• Statistics about the analysis
• Smooth hover animations
• Professional typography

🛠️ Technical Details

• Built with Node.js
• Uses JSDOM for HTML parsing
• Automatically opens results in default browser
• Generates self-contained HTML with inline CSS
• Uses Bootstrap 5 CDN for styling

📄 License

MIT