純粋なjavasctiptを使用して要素にIDを追加できないのはなぜですか？ 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") 

それがキャッチされない例外TypeErrorは言う：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')