GetElementById是否有其他选择？

Question

Okay, I am new to JavaScript, so I really need help with this. I have a script, which looks like this:

  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>

My problem is that there are multiple tags that want to use this function on, but I can only use id="ping" on one tag, so I need an alternative for getElementById, one that would allow me to use multiple tags.

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

this is my full code http://bf3.in/ping.txt actually iam hosting some game servers so need to ping serevr ip. here is where client login http://bf3.in/launcher/login.php user name : juno password : juno thanks :)

Answer 1

An ID should only be used to refer to a single unique element. If you want to group elements together then use class - then you could do document.getElementsByClassName('ping'); which will return an array of elements.

So:

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

then document.getElementsByClassName('ping'); will return an array containing both td elements. Which can be accessed using regular array indices.

But unless your table is going to display tabular data - you'd be better off using something like div instead of a table. It's not the 90's anymore.

Answer 2

You could use getElementsByTagName , querySelectorAll() or you could use getElementsByClassName

Note, all of these will return a node list. So if you replace getElementById with any of these will just not work. You have to do something like this

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>

Assuming that you are trying to achieve something like this.

Answer 3

Yes, you can use the document.querySelectorAll function to query any CSS selector, or you can use document.getElementsByClassName to query based on class. There's no way to query based on multiple ids, because elements can't have multiple IDs.

Be careful with either one that you convert its result to an array rather than an array-like object with Array.from , so that you can use extension methods like filter and map .

Answer 4

Due to the reason that an id must be unique within the document, use classes instead.

---

Lets suppose you have the following markup:

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

---

What you want to do is get all the elements with class .ping .

Use document.querySelectorAll() which expects a string containing one or more CSS selectors separated by commas. This will return a NodeList which is basically just a collection of nodes which you can iterate.

 (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> 

---

Notes:

• If the data you are fetching is just plain text, please use textContent instead of innerHTML for performance and security reasons.