Javascript 为什么不能使用纯javasctipt向元素添加ID？setattribute不是一个函数

我正在尝试向一个特定元素添加一个ID，所有元素都具有相同的类名。这是一个示例，但它对示例不起作用。这是我正在尝试的

  <div class = "ABC">
  <p> child </p>
  </div>

 <div class = "ABC">
 <p> child </p>
 </div>

 <div class = "ABC">
 <p> child </p>
 </div>


 <div class = "ABC">
 <p> child </p>
 </div>


 var ref = document.getElementsByClassName("ABC")[3];
 var ref2child = ref.childNodes
 var addID = ref2child.setAttribute("id", "HOV")

当我在控制台中查看时，它显示Uncaught TypeError:ref2child.setAttribute不是一个函数…

ref.childNodes为您提供了一个节点列表，因此您需要通过添加索引来判断哪个节点，如此ref.childNodes[0]

由于ref.childNodes也返回文本节点，因此更好的方法可能是ref.children

注意：setAttribute方法没有返回值

注意2：在代码上运行脚本时，请确保脚本在主体末尾或onload/domready事件中执行，否则您将收到该错误，因为元素尚不可用

var ref=document.getElementsByClassNameABC[3]； var ref2child=ref.children[0]； ref2child.setAttributeid，HOV； /*这一行仅用于演示，显示此方法的工作原理*/ ref2child.innerHTML+=ref2child.getAttributeid； 孩子

孩子

孩子

孩子

---

Yes setAttribute不是子节点集合的函数

试试这个：

 var refs = document.getElementsByClassName("ABC");
 var ref2child = refs[0];
 ref2child.setAttribute("id", "HOV")

 // Now this should give you a reference to the item
 var itemWithId = document.getElementById('Hov')

---

首先查看ref2child的值。这不是一个元素。然后您应该查找childNodes的文档。我知道它不是一个元素，但该变量引用了我要针对的子元素。当我在控制台中键入ref2child时，它返回了我想要的元素，即缺少行终止符；也在实际代码中？我的解决方案对您有效吗？我尝试了您所说的，它显示以下未捕获的类型错误：无法读取的属性“children”undefined@Jake我更新了我的答案，所以它显示了它的工作。顺便说一句，setAttribute方法没有返回值value@Jake当您在代码上运行它时，请确保脚本在正文末尾或在onload/domready事件中执行，否则您将收到该错误，因为元素还不可用。不需要InnerF2Child.innerHTML来设置element@KhaledObaid不它只是在那里显示它确实更改了这个设置父元素的id，而不是它的子元素，这是被要求的。我认为div项是他正在寻找的，否则添加。firstChild解决了这个问题。显然不是。。。问题中的代码是一样的，孩子是目标