使用getElementById填充頁面上的元素

新增了Ajax，但我知道您可以使用getelementbyid使用該ID更新頁面上的任何元素。我想知道的是，如果他們都具有相同的ID，那麼您如何定位頁面上的特定元素？使用getElementById填充頁面上的元素

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

如何定位第二個li？因爲它們都使用相同的ID，所以我不能使用getelementbyid（'a'），因爲這隻會更新具有該ID的第一個元素。

這是我的AJAX腳本

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); 
}

}

，這是鏈接

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

來源

2011-06-25 Jay

你不應該重用id的。這就是爲什麼你現在掙扎。要將元素分組，請使用類名稱。 Id唯一標識一個DOM元素。 – BonyT

作爲一個指針：'getElementById（）'有一個單獨的名字，例如'getElementsByClassName（）'的複數名稱，這是因爲它適用於並且應該找到/操作***只有一個***元素。 –

在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;

來源

2011-06-25 18:42:12 Gaurav

我現在將標籤更改爲類！那麼如何實現你的技術來處理上面的代碼呢？ – Jay

我編輯了答案以顯示一些示例實現。 – Gaurav

thanx G，但這是否意味着我必須手動輸入數字（1）？如果李是名單上的第20或第8名呢？你如何檢測這一點，並確保腳本選擇了這個？ – Jay

不要重複的ID，使用類名來代替。 ID意味着獨特。

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

然後，您可以使用類似jQuery的東西來選擇它們。

$(".a")

來源

2011-06-25 18:36:04 bevacqua

或者您可以使用'document.getElementsByClassName（'a'）;'然後'for'（或其他）循環來做同樣的事情。 jQuery對於所有東西都不是必需的（就像它真的一樣，真的是......）。 –

@David當然不是，但它存在，所以我建議使用它，因爲它提高了可讀性，使用起來非常簡單。 – bevacqua

的確如此，但我認爲vanilla-JS方法會更加適用（使用庫方法，jQuery，MooTools ...）作爲附錄，以顯示庫的差異和（可能）好處。 –

使用getElementById填充頁面上的元素

回答

相關問題