如何找到给定片段标识符所针对的元素？

Question

当浏览器导航到像

http://example.com/#foo

这样的 URL 时，它会滚动到由

#foo

标识的元素； URI 的这个元素称为片段标识符。 假设我有当前页面上某个元素的片段标识符，但我还没有导航到该元素。 我如何找出它的目标是哪个 DOM 节点？

仅使用

document.getElementById
• 是不够的，因为片段标识符

  #foo

  还可以定位旧式锚点

  <a name="foo">

  ，而此方法错过了。使用
document.getElementsByName
• 也是不正确的，因为这会找到像

  <input>

  或

  <textarea>

  节点这样的非锚点，

  和

  会丢失由id=属性标识的元素。由于我还没有导航到该片段，所以我也无法使用
document.querySelector(':target')
• 。
是否有可靠的方法来查找捕获所有情况的片段标识符所针对的 DOM 节点？ 如果解决方案使用

querySelector

，我当然希望它能够对标识符中发现的异常字符具有鲁棒性，无论它们如何被弃用。

Answer 1

a

元素”的最简单方式。

CSS.escape

将为您处理特殊字符。

const fragment_id = `fdfd""fewf"`; // The test string I used for this
const escaped_fragment_id = CSS.escape(fragment_id);
const element = document.querySelector(`#${escaped_fragment_id}, a[name="${escaped_fragment_id}"`)

请注意，如果 

decodeURIComponent

的源已被转义，您可能还需要使用

fragment_id

。