时间戳

首页 > 解决方案 > 如何在没有class和id的情况下通过JS更改文本？

javascript - 如何在没有class和id的情况下通过JS更改文本？

问题描述

代码中有几个<text>块具有相同的类名。在这些块中，有<tspan>标签。我需要将每个块的<tspan>标签中的字母从“a”更改为“p” 。<text>

阻止自己：

<text class="deal-label--text" transform="translate(8, 17)" style="fill: rgb(255, 255, 255); font-family: &quot;Open Sans&quot;, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Oxygen-Sans, Ubuntu, Cantarell, &quot;Helvetica Neue&quot;, Helvetica, &quot;Liberation Sans&quot;, Arial, sans-serif; font-size: 13px; font-weight: 600;">
    <tspan style="font-family: symbol-olymp, &quot;Open Sans&quot;;">a</tspan>
    <tspan dx="1px">1000</tspan>
</text>
<text class="deal-label--text" transform="translate(8, 17)" style="fill: rgb(255, 255, 255); font-family: &quot;Open Sans&quot;, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Oxygen-Sans, Ubuntu, Cantarell, &quot;Helvetica Neue&quot;, Helvetica, &quot;Liberation Sans&quot;, Arial, sans-serif; font-size: 13px; font-weight: 600;">
    <tspan style="font-family: symbol-olymp, &quot;Open Sans&quot;;">a</tspan>
    <tspan dx="1px">2000</tspan>
</text>
</text>
<text class="deal-label--text" transform="translate(8, 17)" style="fill: rgb(255, 255, 255); font-family: &quot;Open Sans&quot;, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Oxygen-Sans, Ubuntu, Cantarell, &quot;Helvetica Neue&quot;, Helvetica, &quot;Liberation Sans&quot;, Arial, sans-serif; font-size: 13px; font-weight: 600;">
    <tspan style="font-family: symbol-olymp, &quot;Open Sans&quot;;">a</tspan>
    <tspan dx="1px">3000</tspan>
</text>

标签： javascripthtmlsvg

解决方案

您可以使用querySelector. 查询.deal-label--text:nth-child(1)表示元素是具有deal-label--text类的元素的第一个子元素。document.querySelectorAll返回伪数组具有与查询匹配的每个 HTML 元素对象。您可以使用方法将伪数组转换为真实数组，Array.from并且可以使用方法处理数组中的每个值.forEach。

Array.from(document.querySelectorAll('.deal-label--text:nth-child(1)')).forEach(element => element.innerText = 'p');

推荐阅读