Select Node Bookmarklet

Description

This bookmarklet lets you navigate the hierarchical structure (known as the DOM tree) of a web page to select the contents of a specific branch (or node) of the tree.

Installation

Note: Github doesn't allow embedded javscript in README files, so I can't share the bookmarklet here as a draggable link.

1. Create a bookmark of any web page.
2. Copy the raw bookmarklet code to your clipboard.
3. Edit the bookmark you created in step 1, delete the text in the URL field, and paste the bookmarklet code instead.
4. Rename the bookmark title as desired.

Usage

Start from a specific node

1. Select a small portion (a single letter, word, image, etc will do) of the web page to begin navigating from that area.
2. Click/tap the saved bookmarklet.
3. Navigate.

Tapping the saved bookmarklet on mobile without losing the pre-selected area can be tricky. On Safari on iOS, for example, you need to ignore the iOS popup that selecting text produces, and instead swipe the page so that the menu bar with the bookmarks icon appears. Once it does, open bookmarks, find the bookmarklet, and tap it.

Start from the entire document

1. Click the saved bookmarklet without anything on the web page already selected.
2. Navigate.

Drag and drop popup

The popup can be moved around on when clicked/tapped along its top area, and dragged.