Question

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

阻止自身：

<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>

Answer 1

您可以使用querySelector的组合器。查询.deal-label--text > tspan表示tspan个元素，它们是具有deal-label类的元素的子元素。 document.querySelectorAll返回具有与查询匹配的每个HTML元素对象的伪数组。您可以使用Array.from方法将伪数组转换为真实数组，并可以使用.forEach方法处理数组中的每个值。

Array.from(document.querySelectorAll('.deal-label--text > tspan')).forEach(element => element.innerText = 'p');

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

1 个答案: