爲什麼我不能將ID添加到使用純javasctipt的元素？ setattribute是不是一個函數

Question

我想添加一個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") 

當我在控制檯看它說遺漏的類型錯誤：ref2child.setAttribute不是一個函數（...）

Answer 1

的ref.childNodes給你的節點列表，所以你需要告訴它通過添加索引，像這樣ref.childNodes[0]。

由於ref.childNodes也返回文本節點，一個更好的方法很可能是ref.children

注：setAttribute方法沒有一個返回值

注2：當你運行它你代碼，請確保腳本在主體的末尾或onload/domready事件中執行，否則由於元素尚不可用，您將得到該錯誤。

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

 
/* this line is only for demo purpose, showing this method works */ 
 
ref2child.innerHTML += ref2child.getAttribute("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>

Answer 2

的setAttribute是沒有功能的子節點的集合。通過查看ref2child`的`值

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