是否有任何替代GetElementById？

-3

好吧，我是JavaScript新手，所以我真的需要幫助。我有一個腳本，它看起來像這樣：是否有任何替代GetElementById？

var p = new Ping(); 

    p.ping("http://bf3.in", function(data) { 
    document.getElementById("ping").innerHTML = data; 
    }); 

............. some code goes here ........ 

<td id = 'ping'>line 1</td> 
<td id = 'ping'>line 2</td>

我的問題是，有想要使用此功能多的標籤，但我只能在一個標籤使用ID =「平」的，所以我需要getElementById的另一種選擇，它允許我使用多個標籤。

---------------- UPDATE -----------------------

這是我的完整代碼http://bf3.in/ping.txt 其實iam託管一些遊戲服務器，所以需要ping serevr ip。這裏是客戶端登錄http://bf3.in/launcher/login.php 用戶名：JUNO 密碼：JUNO 謝謝:)

來源

2017-04-16 Sk Rafeeq

是的，使用類和'getElementsByClassName' –

有'getElementById（）'的替代方法，是的;但不要嘗試和解決你的破損和無效的HTML：修復HTML。文檔中的'id' ***必須是唯一的。 –

一個ID只應該用來指一個獨特的元素。如果你想將元素分組在一起，然後使用class - 那麼你可以做document.getElementsByClassName('ping');這將返回一個元素數組。

所以：

<table> 
    <td class = 'ping'>line 1</td> 
    <td class = 'ping'>line 2</td> 
</table>

然後 document.getElementsByClassName('ping');將返回含有td元素的數組。可以使用常規數組索引來訪問它。

但是除非你的表格要顯示錶格數據 - 你最好使用類似div而不是表格。這不是90年代了。

來源

2017-04-16 20:26:27 Carlo

它是'document.getElementsByClassName'，實際返回一個*數組*對象。 –

是的，我試過但不工作是這個如何使用？ –

https://developer.mozilla.org/en/docs/Web/API/Document/getElementsByClassName – Carlo

是的，您可以使用document.querySelectorAll函數來查詢任何CSS選擇器，或者您可以使用document.getElementsByClassName來根據類進行查詢。沒有辦法基於多個ID查詢，因爲元素不能有多個ID。

對於將結果轉換爲數組而不是類似數組的對象（Array.from），請謹慎使用，以便可以使用擴展方法（如filter和map）。

來源

2017-04-16 20:35:27 furkle

你可以使用getElementsByTagName，querySelectorAll() 或者你可以使用getElementsByClassName

注意，所有這些都將返回一個節點列表。所以如果你用任何這些替換getElementById將不起作用。你必須這樣做

p.ping("http://bf3.in", function(data) { 
    document.querySelectorAll(".ping").forEach(function(element){ 
     element.innerHTML = data; 
}) 
}); 
<td class='ping'>line 1</td> 
<td class='ping'>line 2</td>

假設你正試圖達到這樣的東西。

來源

2017-04-16 20:38:38 azs06

由於id在文檔中必須是唯一的，所以請使用類。

讓假設你有下面的標記：你想要做什麼

<table> 
    <tr> 
    <th>Ping</th> 
    <th>Ping</th> 
    <th>Ping</th> 
    </tr> 
    <tr> 
    <td class="ping">{{ ping }}</td> 
    <td class="ping">{{ ping }}</td> 
    <td class="ping">{{ ping }}</td> 
    </tr> 
</table>

是讓所有與.ping類的元素。

使用document.querySelectorAll()其中包含一個字符串，其中包含一個或多個由逗號分隔的CSS選擇器。這將返回一個NodeList，它基本上只是您可以迭代的一組節點。

(function() { 
 

 
    let pings = document.querySelectorAll('.ping'); 
 

 
    function fetchPing(i) { 
 
    return `ping ${i} data`; //..fetch ping data. 
 
    } 
 

 
    pings.forEach((p, i) => { 
 
    p.textContent = fetchPing(i); 
 
    }); 
 

 
})();

<table> 
 
    <tr> 
 
    <th>Ping</th> 
 
    <th>Ping</th> 
 
    <th>Ping</th> 
 
    </tr> 
 
    <tr> 
 
    <td class="ping">{{ ping }}</td> 
 
    <td class="ping">{{ ping }}</td> 
 
    <td class="ping">{{ ping }}</td> 
 
    </tr> 
 
</table>

注：

如果您獲取的數據只是純文本，請使用textContent代替innerHTML的性能和安全性的原因。

來源

2017-04-16 20:42:33 Ricky

是否有任何替代GetElementById？

回答

相關問題