Domを使用してliタグにclass属性を追加する方法

Question

DOMを使用してliタグにclass属性を追加する必要があります。そして、私はとても迷っています。 これは私がやったことです、それは正しいですか？

var d = document; 
 
var ul = d.getElementsByTagName('ul'); 
 
var li = ul.getElementsByTagName('li'); 
 

 
for (var i = 0; i < li.length; i++) 
 
{ 
 
    var clases = d.createElement('class'); 
 
    clases.class = 'Bebida'; 
 
    li.appendChild(clases); 
 
}

<ul> 
 
    <li>Café</li> 
 
    <li>Mate</li> 
 
    <li>Té</li> 
 
</ul>

感謝。

Answer 1

あなたのJavascriptからいくつか問題があります。

まずオフ

var ul = d.getElementsByTagName('ul'); 

したがって、これは、あなたが、アレイ上で直接var li = ul.getElementsByTagName('li')を呼び出すことはできませんul要素の配列を返します。

配列内でそれぞれulを繰り返す必要があります。liのような配列項目から取得してください。

var ul = d.getElementsByTagName('ul'); 
for (var u = 0; u < ul.length; u++) { 
    var li = ul[u].getElementsByTagName('li') 
} 

は今だけul変数としてliはまた、あなたが、アレイ内の各li項目を反復処理する必要がありますので、配列です。

var ul = d.getElementsByTagName('ul'); 
for (var u = 0; u < ul.length; u++) { 
    var li = ul[u].getElementsByTagName('li') 
    for (var i = 0; i < li.length; i++) { 

    } 
} 

次の問題は、class要素を作成しないことです。 classはli要素の属性です。これは、各要素のclassNameプロパティを介してアクセスできます。

この作業を行うには、すべてをまとめて入れることができます。

var ul = d.getElementsByTagName('ul'); 
for (var u = 0; u < ul.length; u++) { 
    var li = ul[u].getElementsByTagName('li') 
    for (var i = 0; i < li.length; i++) { 
    li[i].className = 'Bebida'; 
    } 
} 

ここにはJSFiddleがあります。

ポイントをもう1つ追加する必要があります。 ul要素をキャプチャする最初のループは無関係です。これを直接スキップして、すべてのli要素を取得することができます。これにより、必要なループの量が減ります。

は、すべてのulの要素をキャプチャして、あなたは、単にドキュメントからすべてのliの要素を取得することができますulそのため、すべてのliをキャプチャしていることを考えます。これは、liの子がulで、他の要素（例えばol）でない場合にのみ当てはまります。

これを〜に減らすことができます。

var liArray = d.getElementsByTagName('li'); 
for(var i=0; i<liArray.length;i++) 
    liArray[i].className = 'Bebida';