div的InnerHTML

时间:2013-04-26 10:25:59

标签: javascript html

如果你想在不使用getElementByID的情况下检索div的innerHTML(在下面看到)(考虑到这个网站有几个以'quote'作为id的div),但是通过引用'field name'(field =“bid) “)。你会怎么做?

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

我想从现有网站检索信息。见下面。在这里你可以看到几个div具有相同的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>

4 个答案:

答案 0 :(得分:0)

您只需通过获取父元素和子元素来解析DOM即可。

答案 1 :(得分:0)

尝试以下方法:

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

这将获取所有divs并检查field属性。

答案 2 :(得分:0)

此解决方案适用于最糟糕的情况,即您无法为元素提供唯一ID

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

演示:Fiddle

答案 3 :(得分:0)

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

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