How can I find the element that would have been targeted by a given fragment identifier?

When a browser navigates to an URL like http://example.com/#foo, it scrolls to the element identified by #foo; this element of the URI is called a fragment identifier. Suppose I have a fragment identifier for an element on the current page, which I have not yet navigated to. How can I find out which DOM node would have been targeted by it?

  • It’s not enough to use document.getElementById, because a fragment identifier #foo can also target an old-style anchor, <a name="foo">, which this method misses.
  • It’s not correct to use document.getElementsByName either, because that would find non-anchors like <input> or <textarea> nodes, and miss elements identified by the id= attribute.
  • Since I have not navigated at the fragment, I cannot use document.querySelector(':target') either.

Is there a reliable way to find which DOM node would have been targeted by fragment identifier that catches all cases? If the solution uses querySelector, I would of course like it to be robust against unusual characters found within identifiers, however deprecated they may be.