GetElementByIdの代替手段はありますか？

Question

これはJavaScriptが初めてのので、本当に助けが必要です。私はこのようになりますスクリプトを、持っている：

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> 

私の問題はそこにこの機能を使用したい複数のタグがありますが、私は1個のタグだけにID =「ピング」を使用することができますので、私は必要だということですgetElementByIdの代わりに、複数のタグを使用することができます。

----------------更新-----------------------

これは私のフルコードhttp://bf3.in/ping.txt 実際にはいくつかのゲームサーバーをホストしているので、serevr ipにpingする必要があります。 JUNO パスワード：JUNO 感謝:)

Answer 1

IDは、単一のユニークな要素を参照するために使用されるべき は、ここでは、クライアントのログインhttp://bf3.in/launcher/login.php ユーザー名がどこです。要素をまとめてグループ化する場合は、classを使用します。document.getElementsByClassName('ping');を実行すると、要素の配列が返されます。

ので：そして

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

document.getElementsByClassName('ping');は両方tdの要素を含む配列を返します。これは、通常の配列インデックスを使用してアクセスできます。

テーブルが表形式のデータを表示しない限り、テーブルの代わりにdivのようなものを使用する方がよいでしょう。もはや90年代ではない。

Answer 2

はい、document.querySelectorAll関数を使用してCSSセレクタにクエリを実行するか、document.getElementsByClassNameを使用してクラスに基づいてクエリを実行できます。要素には複数のIDを持つことができないため、複数のIDに基づいてクエリを実行する方法はありません。 の配列のようなオブジェクトではなく配列に結果を変換することに注意してください。filterとmapのような拡張メソッドを使用できるように注意してください。

Answer 3

あなたは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> 

このようなことを達成しようとしているとします。

Answer 4

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()には、1つ以上の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を使用してください。