2d:null 2e:["$","title",null,{"children":"Disambiguating DOM element selection | Toph Tucker | Observable"}] 33:T5ec,// This could be any HTML; this is just scrounged together to get a little variety in the nesting. node = htl.html`

${Inputs.table(penguins)}

${Plot.dot(penguins, {x: "culmen_length_mm", y: "flipper_length_mm", fill: "species"}) .plot({title: "Flippers vs. culmens", caption: "Do you know what a penguin “culmen” is?", height: 240})}

These are just some nonsense form elements for testing. Here, for instance, I have put a link.

${Inputs.form({ option1: Inputs.checkbox(["A", "B"], {label: "Select some"}), option2: Inputs.range([0, 100], {label: "Amount", step: 1}), option3: Inputs.select(new Set(penguins.map(d => d.island)), {label: "Island"}), option4: Inputs.checkbox(new Set(penguins.map(d => d.species)), {label: "Species"}), option5: Inputs.date() })}

${Plot.plot({ height: 300, y: {grid: true, label: "↑ Annual revenue (billions, adj.)", transform: (d) => d / 1000}, marks: [Plot.areaY(riaa, {x: "year", y: "revenue", z: "format", fill: "group", offset: "wiggle"})] })}

`34:T618,function inspect(node) { // Get elements from el up to node, inclusive function collectParents(el) { const elements = []; while (el && el !== node.parentNode) { elements.push(el); el = el.parentNode; } return elements; } // Create the menu function onPointerDown(e) { const [x, y] = d3.pointer(e, node); d3 .select(node) .selectAll(".menu") .data([null]) .join((enter) => enter.append("div").attr("class", "menu")) .style("top", `${y}px`) .style("left", `${x}px`) .selectAll(".item") .data(collectParents(e.target)) .join((enter) => enter.append("div").attr("class", "item")) .on("pointerenter", (event, d) => renderGlow(d)) .append(elToSelector) } // Remove the menu function onPointerUp(e) { node.querySelector(".menu").remove(); } // Render the selection grow with a little animation function renderGlow(target) { const bb0 = node.getBoundingClientRect(); const bb = target.getBoundingClientRect(); let glow = node.querySelector(".glow"); if (!glow) glow = node.appendChild(htl.html`

`); d3.select(glow) .transition() .style("left", `${bb.left - bb0.left}px`) .style("top", `${bb.top - bb0.top}px`) .style("width", `${bb.width}px`) .style("height", `${bb.height}px`); } // Mutate node to add event listeners node.onpointerdown = onPointerDown; node.onpointerup = onPointerUp; node.style.position = "relative"; node.classList.add("inspected"); }35:[] 31:{"id":"521112b702f45917","slug":"disambiguating-dom-element-selection","title":"Disambiguating DOM element selection","thumbnail":"14b362921f2f9baadd0f0bc030f50b02dc51e6babecae85cc00131c011c746ed","access_level":"public","create_time":"$D2025-11-24T05:18:46.319Z","update_time":"$D2025-12-18T17:38:52.040Z","view_time":null,"first_public_time":"$D2025-11-24T06:53:50.285Z","has_unpublished_edits":null,"fork":{"id":"6f024cf0cf01c26e","slug":"disambiguating-selection-in-a-2d-tree","title":"Disambiguating selection in a 2D tree","owner":{"id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker"}},"stars":1,"starred":false,"owner":{"type":"team","id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":"pro_2026"},"version":324,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null}],"members":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null,"role":"editor"},{"type":"team","id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":"pro_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"ee48d2d87f751f74","slug":"sketches","title":"Sketches","owner":{"id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker"}},"type":"notebook","body":{"title":"Disambiguating DOM element selection","cells":[{"id":100,"value":"# Disambiguating DOM element selection\nWhen you click on a web page, your pointer could be hitting any number of elements. I’ve always wanted a quick little scrubber to pop up where you can drill up or down to your desired specificity, _e.g._ for something like Chrome DevTools. Pointer down, you get the menu, you can drag down to go up the tree, then release. If you just click quickly you select the most specific element. \n\n_Previously: [table row/column scrubber](https://observablehq.com/@tophtucker/disambiguating-selection-in-a-2d-tree); subsequently: [nearest common ancestor](https://observablehq.com/@tophtucker/disambiguating-dom-element-nearest-common-ancestor)._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":124,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":136,"value":"// Mutates an arbitrary DOM node to add event listeners; here, it’s the grid above\ninspect(node)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"// Gets the little purple/red selector indicator, like div#my-thing.active\nfunction elToSelector(el) {\n const id = el.id;\n const classes = [...el.classList];\n return htl.html`${el.tagName.toLowerCase()}${id ? `#${id}` : \"\"}${classes.length ? `.${classes.join(\".\")}` : \"\"}`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":281,"value":"// Just for sample data for area chart\nimport {riaa} from \"@observablehq/plot-stack-offset\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"