javascript - Javascript: ID なしで値を取得する

Question

<div class="CurrencyQuote">


<div class="column">
    <div class="form-label">Pair: </div><div>BUX/TIX</div>
    <div class="form-label padding-top">Spread: </div><div>113</div>
</div>
<div class="column">
    <div class="form-label">Rate: </div><div>10.159/10.272</div>
    <div class="form-label padding-top">High/Low: </div><div>115</div>
</div>

</div>

値 113 と値 115 を取得したいのですが、javascript で ID なしでそれを行うにはどうすればよいですか? HTML を変更することはできず、これら 2 つの値を別々に取得する必要があります。ありがとうございます。

Answer 1

次のような CSS セレクターを使用して、要素への一意のパスを使用querySelectorAll()および構築できます。

var els = document.querySelectorAll( '.column .form-label.padding-top ~ div' );

for( var i=els.length; i--; ) {
  console.log( els[i].innerHTML );
}

---

すべての jQuery ファンも満足させるには:

$( '.column .form-label.padding-top ~ div' ).each( function() { console.log( this.text() ); } );

Answer 2

var query = document.querySelectorAll('.column > .form-label');
for(var i=0,l=query.length;i<l;++i){
    if(query[i].innerHTML == 'Spread: '
    || query[i].innerHTML == 'High/Low: '
    ) console.log(query[i].nextElementSibling.innerHTML)
}