我怎样才能找到给定片段标识符所定位的元素？

Question

当浏览器导航到 URL（如 http://example.com/#foo）时，它会滚动到由 #foo 标识的元素； URI 的这个元素称为片段标识符。假设我在当前页面上有一个元素的片段标识符，我 not 尚未导航到该页面。我如何找出哪个 DOM 节点会成为它的目标？

使用 document.getElementById 是不够的，因为片段标识符 #foo 也可以定位旧式锚点 <a name="foo">，此方法遗漏了这一点。
使用document.getElementsByName也是不正确的，因为那样会找到像<input>或<textarea>这样的非锚节点，和会错过由 id= 属性标识的元素。
由于我没有在片段中导航，所以我也不能使用 document.querySelector(':target')。

有没有一种可靠的方法可以找到哪个 DOM 节点会被捕获所有情况的片段标识符作为目标？如果该解决方案使用 querySelector，我当然希望它能够抵抗标识符中发现的异常字符，但它们可能已被弃用。

Answer 1

选择器是表达“具有 ID 的元素或具有名称的 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}"`)

请注意，如果 fragment_id 的来源已被转义，您可能还需要使用 decodeURIComponent。

我怎样才能找到给定片段标识符所定位的元素？

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

javascript

dom

queryselector

fragment-identifier