div的InnerHTML

Question

If you want to retrieve the innerHTML of a div (seen beneath) without using getElementByID (considering this website has several div's with 'quote' as an id), but by referring to the 'field name' (field="bid"). How would you do that?

<div nowrap="nowrap" id="quote" class="realtimeDetailLayer" source="lightstreamer" 
style="display:inline" table="LS_ProductDetails_TabID" item="X0000010600NL0010379129"
field="bid">0,28</div>

I want to retrieve the information from an existing website. See beneath. Here you can see that several div's have the same ID

<tbody>
  <tr>
    <td style="text-align:right;width:auto;padding:8px 0px;"><nobr>Ref.</nobr>:</td>
    <td class="ext04" style="white-space:nowrap;width:12%;font-weight:bold;">
    EUR
      <strong><div nowrap=nowrap id="quote" class="realtimeDetailLayer" source="lightstreamer" style="display:inline" table="LS_ProductDetails_TabID" item="X0000010600NL0010379129" field="reference">350,85
      </div></strong>
    </td>
    <td style="text-align:right;width:auto;padding:8px 0px;"><nobr>Bied</nobr>:</td>
    <td class="ext04" style="white-space:nowrap;width:12%;font-weight:bold;">
    EUR 
      <div nowrap=nowrap id="quote" class="realtimeDetailLayer" source="lightstreamer" style="display:inline" table="LS_ProductDetails_TabID" item="X0000010600NL0010379129" field="bid">0,28</div>
    </td>
    <td style="text-align:right;width:auto;padding:8px 0px;">
      <nobr>Laat</nobr>:
    </td>
    <td class="ext04" style="white-space:nowrap;width:12%;font-weight:bold;">
    EUR
      <div nowrap=nowrap id="quote" class="realtimeDetailLayer" source="lightstreamer" style="display:inline" table="LS_ProductDetails_TabID" item="X0000010600NL0010379129" field="ask">0,29
      </div>
    </td>
    <td style="text-align:right;width:auto;padding:8px 0px;"><nobr>%</nobr>:</td>
    <td class="ext04" style="white-space:nowrap;width:12%;font-weight:bold;">
      <div nowrap=nowrap id="quote" class="realtimeDetailLayer" source="lightstreamerGeneratedValues" style="display:inline" table="LS_ProductDetails_TabID" item="X0000010600NL0010379129" field="midchangepercent"><span class="extNegative"><nobr>-50,88 %</nobr></span>
      </div>
    </td>
  </tr>
</tbody>

Answer 1

您可以通过简单地解析通过获取父元素和子元素的DOM来实现。

Answer 2

Try the following:

els = document.getElementsByTagName('div');
for (i=0; i<els.length; i++) {
  if (els[i].field == 'bid') {
    //do whatever with the bid element here.
  }
}

This gets all the divs and checks the field attribute.

Answer 3

This solution is for the worst case scenario where you don't have any way to have unique ids for the elements

var divs = document.getElementsByTagName('div');
function getQuoteHtml(key){
    var i;
    for(i =0 ; i < divs.length; i++){
        if(divs[i].getAttribute('field') == key){
            return divs[i].innerHTML;
        }
    }
}

Demo: Fiddle

Answer 4

您可以使用CSS选择器来执行此操作

document.querySelectorAll('[field="bid"]');