javascript - 如何通过文本内容找到 DOM 元素？

Question

我尝试向某些节点添加新的 SVG 元素。为此，要添加元素的节点必须通过文本内容中包含的字符串找到，例如找到任何具有 "id0" 的节点在<text>里面标签。

这是我的 HTML 层次结构的示例:

<pre>
 <svg>
  <g>
   <g>
    <text> id3 </text>
    <text> 73% </text>
    <svg> ... </svg>
   </g>
   <g>
    <svg> ... </svg>
   </g>
   <g>
    <text> id0 </text>
    <text> 11% </text>
    <svg> ... </svg>
   </g>
   <g>
    <text> id1 </text>
    <text> 66% </text>
    <svg> ... </svg>
   </g>
   <g>
    <svg> ... </svg>
   </g>
  </g>
 </svg>
</pre>

我绝对不知道正确的解决方案，但我认为它是这样的:

d3.select('svg').select('g').selectAll('g').each(function (d, i) {})
                .select('g').select('text').filter(function () {
                  return (d3.select(this).text() === 'id0')
                })
                .select(function () {
                  return this.parentElement;
                })
                .append('svg')
                .attr('width', 400)
                .attr('height', 400)

如果标签<text>包含 "id0" ，然后返回到父节点并向其添加一个 SVG 元素。但是线上return this.parentElement;发生错误:

Property 'parentElement' does not exist on type 'Window'.

当我使用 parentElement 时出现类似的错误或 parent .

Answer 1

另一种方法是 xpath，它允许通过文本进行搜索:

// if you know there's only one...
const singleResult = document.evaluate(`//*[name()="text" and contains(text(), "id0")]`, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
console.log(singleResult.nodeName, singleResult.textContent)

// if there might be multiple results
const multipleResults = document.evaluate(`//*[name()="text" and contains(text(), "id_multiple")]`, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null)

for (let i=0; i < multipleResults.snapshotLength; i++) {
  console.log(multipleResults.snapshotItem(i).nodeName, multipleResults.snapshotItem(i).textContent)
}

<svg>
    <g>
        <g>
            <text> id_multiple </text>
            <text> 73% </text>
            <svg></svg>
        </g>
        <g>
            <svg></svg>
        </g>
        <g>
            <text> id0 </text>
            <text> 11% </text>
            <svg></svg>
        </g>
        <g>
            <text> id_multiple </text>
            <text> 66% </text>
            <svg></svg>
        </g>
        <g>
            <svg></svg>
        </g>
    </g>
</svg>

返回的迭代器 (/snaphhots) 对我来说是出乎意料的 - 一定要阅读这个优秀的答案:https://stackoverflow.com/a/32468320/2586761和文档:MDN: document.evaluate .

请注意，因为“common HTML nodes and svg nodes belong to different namespaces”，您需要选择 SVG 节点，如 *[name()="svg"]。

关于查找文本，我建议使用 contains(text(),'needle') 而不是更明确的 text()='needle' 因为needle 周围的任何空格都会导致选择器返回 null。

有趣的 xpath 与 CSS 评论: What is the difference between cssSelector & Xpath and which is better with respect to performance for cross browser testing?

请注意，IE 不支持 document.evaluate