Javascript getElementsByName失败，但getElementById可以使用Chrome扩展

使用

document.getElementsByName（'spanName'）

或

jQuery（'[name=“spanName”]'）

失败（返回[]） 从Chrome扩展（或控制台）中调用。但是，

document.getElementById（'spanId'）

和类名上的CCS选择器一样有效

在扩展进行任何干预之前，跨度已经是DOM的一部分。但是，扩展添加了name属性，修改了style属性，并添加了类名：

原件：

<div id="parentDiv">
    <span style="background-color:Yellow">Some highlighted text</span>
</div>

<div id="parentDiv">
    <span id"spanId" name="spanName" class="highlighted" style="">Some highlighted text</span>
</div>

在添加name属性之前，我正在执行此传输。这种内部HTML替换可能是我的痛苦的根源吗

顺便说一下…

我正在使用以下内容更新跨度：

let spans = document.getElementsByTagName('span')
spans[Symbol.Iterator] = [][Symbol.Iterator]

for (let span of spans) {
   if (!/yellow/i.test(span.style.CSSText) continue;
   span.style.CSSText = ''
   span.id = <uniqueSpanId>
   span.name = 'spanName'
   span.className = "highlighted'
}

let span=document.getElementsByTagName（'span'））
跨度[Symbol.Iterator]=[[Symbol.Iterator]
对于（让跨距中的跨距）{
如果（！/yellow/i.test（span.style.CSSText）继续；
span.style.CSSText=“”
span.id=
span.name='spanName'
span.className=“突出显示”
}

根据规范，

document.getElementsByName（）

返回一个元素数组。您必须循环遍历结果，或者执行

document.getElementsByName（'spanName'）[0]

---

你说的“失败”是什么意思"尝试添加一个类来代替它们。名字通常不使用表单元素。在添加name属性之前，你可能不是MeToDIF的一部分。我认为问题非常明显。你可以考虑发布一个演示这个问题的最小例子，或者复制DOM修改。按钮或类似功能。为什么要使用outerHTML“传输”节点？为什么不使用insertBefore或类似功能将节点分配给其新的父节点？您错过了

=

之后

span id

的更新以澄清问题。我得到了

[]

返回。我明白了。也许Chrome扩展没有这种方法？我想没有JS错误？你可以打开另一个Chrome开发者工具来检查你的扩展，就像打开网站一样。

let spans = document.getElementsByTagName('span')
spans[Symbol.Iterator] = [][Symbol.Iterator]

for (let span of spans) {
   if (!/yellow/i.test(span.style.CSSText) continue;
   span.style.CSSText = ''
   span.id = <uniqueSpanId>
   span.name = 'spanName'
   span.className = "highlighted'
}