getElementByIdを使用してページに要素を設定する

Question

Ajaxで新機能ですが、getelementbyidを使用してそのIDを持つページの要素を更新できることがわかりました。私が知りたいことは、それらがすべて同じIDを持つ場合、どのようにページの特定の要素をターゲットにするかということです。

<li class="a">something</li><li class="a">something b</li> 

第2世代のターゲットを設定するにはどうすればよいですか？彼らは両方が同じidを使用しているので、getelementbyid（ 'a'）を使用することはできません。これは、そのidで最初の要素のみを更新するためです。

これは

function loadurl(dest) { 
var XMLHttpRequestObject = false; 
if (window.XMLHttpRequest) { 
     XMLHttpRequestObject = new XMLHttpRequest(); 
    } else if (window.ActiveXObject) { 
     XMLHttpRequestObject = new 
     ActiveXObject("Microsoft.XMLHttp"); 
} if(XMLHttpRequestObject) { 
     XMLHttpRequestObject.open("GET", dest); 
     XMLHttpRequestObject.onreadystatechange = function() { 

    if (XMLHttpRequestObject.readyState == 4 && 
     XMLHttpRequestObject.status == 200) { 
     document.getElementById("a").innerHTML = 
     XMLHttpRequestObject.responseText; 
     delete XMLHttpRequestObject; 
     XMLHttpRequestObject = null; 
     } 
    } 
    XMLHttpRequestObject.send(null); 
} 

}

私のAjaxのスクリプトであり、これは代わりにクラス名を使用して、IDを繰り返さないでくださいリンク

<a onclick="loadurl('page.php?p=1&id=2')"> 

Answer 1

HTMLページで同じIDを複数回使用すると、HTMLが無効になります。あなたの代わりにクラス名を使用していた場合：

<li class="a">something</li><li class="a">something b</li> 

を、あなたはそのクラスを持つすべての要素を含む配列を取得するために）（document.getElementsByClassNameを使用することもできました。

このようなものを使用、第二の要素にあなたの応答を置くために：

document.getElementsByClassName("a")[1].innerHTML = XMLHttpRequestObject.responseText; 

または、このようなものを使用し、そのクラス名を持つ要素のすべてのあなたの応答を置くために：

var els = document.getElementsByClassName("a"); 
for (var i = 0; i < els.length; ++i) 
    els[i].innerHTML = XMLHttpRequestObject.responseText; 

を

Answer 2

です。 IDは一意であることを意味します。

<li class="a">something</li><li class="a">something b</li> 

次に、jQueryなどを使用して選択できます。

$(".a")