Jquery 在输入框更改时停止使用getElementById和target by class更新文本内容

我正在尝试将我的代码段更新为：

1-如果输入有一个值，则在事件侦听器更新span标记之前，将该值输出到span.Permalink

2-以类而不是ID作为跨度的目标。我必须添加多个跨度标记，这样我就不能再使用ID了

如果span标记有一个ID，我就让代码段工作，但是现在我需要输入值，用一个.Permalink类更新所有span标记

我尝试了getElementsByClassName、getElementByClassName和$（.span.Permalink）以及其他一些方法

window.onload=function（）{
const nameField=document.querySelector（'[name=“accsc\u设置[accsc\u get\u start\u home\u page\u title]”）；
nameField.addEventListener（'input'，function（）{
document.getElementById（'Permalink'）.textContent=this.value.toLowerCase（）.replace（//g，“-”）；
})  
}；

//关于我们/
//接触/
//products/

文档。GetElementsByCassName

对我来说工作正常。我刚刚添加了

数组。from

将

HTMLCollection

转换为数组，这样我就可以使用

数组。forEach

来迭代集合

window.onload=function（）{
const nameField=document.querySelector（'[name=“accsc\u设置[accsc\u get\u start\u home\u page\u title]”）；
nameField.addEventListener（'input'，function（）{
const nameFieldVal=此.value；
//使用Array.from将HTMLCollection转换为Array
//Array.forEach迭代每个跨度
//使用类名称“Permalink”设置每个跨度的textContent属性
数组.from（document.getElementsByClassName（'Permalink'））.forEach（（el）=>el.textContent=nameFieldVal.toLowerCase（）.replace（//g，“-”）；
})  
}；

//关于我们/
//接触/
//products/

不确定您的问题是什么。您是如何使用getElementsByClassName的？为什么您将此列为jQuery，但您没有使用jQuery？@epascarello为什么不开明一点？我乐于发现以不同方式处理同一问题的方法。您有更好的解决方案使用jQuery吗？@epascarello演示似乎毫无意义我发现如何使用getElementsByClassName的所有方法都不起作用。尽管如此，Ryan Wilson帮助我理解了如何处理getElementsByClassName返回的内容的数组方面。谢谢，Ryan，我知道返回数组，但我不知道如何处理它，或者我是否必须这样做。学习javascript。我找到了一个添加输入值的方法是，在事件侦听器之前，它不是空的，只是简单地将其作为html添加到span标记中，但我想知道是否有更雄辩的方法。@JonathanQuePública不客气。请注意，

document.getElementsByClassName

返回一个

HtmlementCollection

，这与数组。它有一些相似之处，但它没有公开数组的方法，这就是为什么我将它包装在

数组中。从
。这将集合转换为数组。然后我可以使用
数组。forEach
迭代元素。span只包含文本或其他html元素，因此我认为没有更优雅的解决方案