ObjectリテラルでgetElementByIDを複数回使用する効率的な方法はありますか？

Question

私はjavascriptの初心者で、DOMを使って作業を始めます。いくつかの異なる場所で異なるID名のスパンを集め、オブジェクトリテラルからデータを取得した後、それは冗長になるように見えました。これを書くより良い方法はありませんか？私はまた、機能を学んでいるが、本当にそれをどのように関連付けるのかは分かりません。簡単に見るためのJSfiddleがあります。 https://jsfiddle.net/q5366wzb/

HTML：

<fieldset id="candidates"> 
    <legend>Candidates</legend> 
    <div> 
    <label for="cand1">Candidate 1</label> 
    <span class="candidate" id="cand1"></span> 
    <span class="party" id="party1"></span> 
</div> 

<div> 
    <label for="cand2">Candidate 2</label> 
    <span class="candidate" id="cand2"></span> 
    <span class="party" id="party2"></span> 
</div> 

<div> 
    <label for="cand3">Candidate 3</label> 
    <span class="candidate" id="cand3"></span> 
    <span class="party" id="party3"></span> 
</div> 
</fieldset> 

    <fieldset id="statistics"> 
    <div> 
    <h2>Results for Candidate 1</h2> 
    <div id="candidateName1"></div> 
    <label for="cand1pct">Percentage</label> 
    <output id="cand1pct"></output> 
    </div> 
    <div> 
    <h2>Results for Candidate 2</h2> 
    <div id="candidateName2"></div> 
    <label for="cand2pct">Percentage</label> 
    <output id="cand2pct"></output> 
    </div> 
    <div> 
    <h2>Results for Candidate 3</h2> 
    <div id="candidateName3"></div> 
    <label for="cand3pct">Percentage</label> 
    <output id="cand3pct"></output> 
    </div> 
    </fieldset> 

JS

var votingData = { 
    candidates: [{ 
    name: "Harry S. Truman", 
    party: "Democratic" 
}, 
{ 
    name: "Thomas E. Dewey", 
    party: "Republican" 
}, 
{ 
    name: "Strom Thurmond", 
    party: "Dixiecrat" 
}] 
}; 


document.getElementById("cand1").innerHTML = 
votingData.candidates[0].name; 
document.getElementById("candidateName1").innerHTML = 
votingData.candidates[0].name; 
document.getElementById("party1").innerHTML = 
votingData.candidates[0].party; 

document.getElementById("cand2").innerHTML = 
votingData.candidates[1].name; 
document.getElementById("candidateName2").innerHTML = 
votingData.candidates[1].name; 
document.getElementById("party2").innerHTML = 
votingData.candidates[1].party; 

document.getElementById("cand3").innerHTML = 
votingData.candidates[2].name; 
document.getElementById("candidateName3").innerHTML = 
votingData.candidates[2].name; 
document.getElementById("party3").innerHTML = 
votingData.candidates[2].party; 

Answer 1

あなたはvotingData オブジェクトの内部candidates 配列をループしているので、あなたは、配列を反復ループを持っているし、量を減らすことができます重複の

var votingData = { 
 
    candidates: [{ 
 
    name: "Harry S. Truman", 
 
    party: "Democratic" 
 
    }, { 
 
    name: "Thomas E. Dewey", 
 
    party: "Republican" 
 
    }, { 
 
    name: "Strom Thurmond", 
 
    party: "Dixiecrat" 
 
    }] 
 
}; 
 

 
var candidates = votingData.candidates; 
 

 
for (var i = 0; i < candidates.length; i++) { 
 
    var currentId = i + 1; 
 
    document.getElementById("cand" + currentId).innerHTML = candidates[i].name; 
 
    document.getElementById("candidateName" + currentId).innerHTML = candidates[i].name; 
 
    document.getElementById("party" + currentId).innerHTML = candidates[i].party; 
 
}

<fieldset id="candidates"> 
 
    <legend>Candidates</legend> 
 
    <div> 
 
<label for="cand1">Candidate 1</label> 
 
<span class="candidate" id="cand1"></span> 
 
<span class="party" id="party1"></span> 
 
    </div> 
 

 
    <div> 
 
<label for="cand2">Candidate 2</label> 
 
<span class="candidate" id="cand2"></span> 
 
<span class="party" id="party2"></span> 
 
    </div> 
 

 
    <div> 
 
<label for="cand3">Candidate 3</label> 
 
<span class="candidate" id="cand3"></span> 
 
<span class="party" id="party3"></span> 
 
    </div> 
 
</fieldset> 
 

 
<fieldset id="statistics"> 
 
    <div> 
 
<h2>Results for Candidate 1</h2> 
 
<div id="candidateName1"></div> 
 
<label for="cand1pct">Percentage</label> 
 
<output id="cand1pct"></output> 
 
    </div> 
 
    <div> 
 
<h2>Results for Candidate 2</h2> 
 
<div id="candidateName2"></div> 
 
<label for="cand2pct">Percentage</label> 
 
<output id="cand2pct"></output> 
 
    </div> 
 
    <div> 
 
<h2>Results for Candidate 3</h2> 
 
<div id="candidateName3"></div> 
 
<label for="cand3pct">Percentage</label> 
 
<output id="cand3pct"></output> 
 
    </div> 
 
</fieldset>

Answer 2

candidateName1、candidateName2とcandidateName3などの追加番号でID名を使用しない方がよいが、候補（簡略化した例）のように、あなたが再利用できるクラスで置き換えます：

<fieldset id="statistics"> 
    <div> 
    <h2>Results for Candidate 1</h2> 
    <div class="candidate"></div> 
    </div> 
    <div> 
    <div class="candidate"></div> 
    </div> 
    <div> 
    <div class="candidate"></div> 
    </div> 
    </fieldset> 

次に、あなたが一度にそれを選択することができます

var candidates = document.getElementsByClassName('candidate'); 

その後、あなたは（あなたがここにも他の要素を適用することができます）forループを経由して反復：

for (var i = 0, n = votingData.candidates.length; i < n; i++) { 
    candidates.innerHTML = votingData.candidates[i]; 
}