我如何獲得span內部html值？

Question

在這裏我需要得到「<div class="set-title">Operations</div>」在主div有這麼多的div是否都有相同的類名如何獲得跨度值？

<div id="page_x002e_data-form_x002e_task-edit_x0023_default-form-fields" class="form-fields"> 
<div class="set"> 
<div class="set-title">Operations</div> 
<div class="alf-gb"> 
<div class="alf-u first"> 
<div class="form-field"> 
<div class="viewmode-field"> 
<span class="viewmode-label">Request date:</span> 
<span class="viewmode-value" data-datatype="date">16 Jul, 2016</span> 
</div> 
</div> 
</div> 
<div class="alf-u"> 
<div class="form-field"> 
<div class="viewmode-field"> 
<span class="viewmode-label">Requestor company:</span> 
<span class="viewmode-value" data-datatype="text">UST</span> 
</div> 
</div> 
</div> 
<div class="alf-u"> 
<div class="form-field"> 
<div class="viewmode-field"> 
<span class="viewmode-label">Requestor Name:</span> 
<span class="viewmode-value" data-datatype="text">ewe</span> 
</div> 
</div> 
</div> 
</div> 
<div class="alf-gb"> 
<div class="alf-u first"> 
<div class="form-field"> 
<div class="viewmode-field"> 
<span class="viewmode-label">Requestor Email:</span> 
<span class="viewmode-value" data-datatype="text">ewe</span> 
</div> 
</div> 
</div> 
<div class="alf-u"> 
<div class="form-field"> 
<div class="viewmode-field"> 
<span class="viewmode-label">Training topic:</span> 
<span class="viewmode-value" data-datatype="text">ewe</span> 
</div> 
</div> 
</div> 
<div class="alf-u"> 
<div class="form-field"> 
<div class="viewmode-field"> 
<span class="viewmode-label">Mode of Training:</span> 
<span class="viewmode-value" data-datatype="text">ILT</span> 
</div> 
</div> 
</div> 
</div> 
<div class="alf-gb"> 
<div class="alf-gb"> 
<div class="alf-gb"> 
</div> 
<div class="set"> 
<div class="set-title">Operations Requirements</div> 
<div class="alf-gb"> 
<div class="alf-u first"> 
<div class="form-field"> 
<div class="viewmode-field"> 
<span class="viewmode-label">Need to cover prerequisites:</span> 
<span class="viewmode-value" data-datatype="text">w</span> 
</div> 
</div> 
</div> 
<div class="alf-u"> 
<div class="form-field"> 
<div class="viewmode-field"> 
<span class="viewmode-label">Desired outcomes for students:</span> 
<span class="viewmode-value" data-datatype="text">w</span> 
</div> 
</div> 
</div> 
<div class="alf-u"> 
<div class="form-field"> 
<div class="viewmode-field"> 
<span class="viewmode-label">ML POC:</span> 
<span class="viewmode-value" data-datatype="text">1</span> 
</div> 
</div> 
</div> 
</div> 
<div class="alf-gb"> 
<div class="alf-u first"> 
<div class="form-field"> 
<div class="viewmode-field"> 
<span class="viewmode-label">Training budget:</span> 
<span class="viewmode-value" data-datatype="double">1</span> 
</div> 
</div> 
</div> 
<div class="alf-u"> 
<div class="alf-u"> 
</div> 
<div class="alf-gb"> 
<div class="alf-gb"> 
</div> 
<div class="set"> 
<div class="set-title">Trainer Details</div> 
<div class="alf-gb"> 
<div class="alf-u first"> 
<div class="form-field"> 
<label for="page_x002e_data-form_x002e_task-edit_x0023_default_prop_mentoratraining_trainername"> 
Trainer Name: 
<span class="mandatory-indicator">*</span> 
</label> 
<input id="page_x002e_data-form_x002e_task-edit_x0023_default_prop_mentoratraining_trainername" class="mandatory" type="text" maxlength="1024" value="" tabindex="0" name="prop_mentoratraining_trainername" title="The value cannot be empty." alf-validation-msg="The value cannot be empty."> 
</div> 
</div> 

請幫我..

Answer 1

試試這個，

window.onload = function() { 
console.log(document.querySelector('.viewmode-value').innerHTML); 
}; 

OR

window.onload = function() { 
console.log(document.getElementsByClassName("viewmode-value")[0].innerHTML); 
console.log(document.getElementsByClassName("viewmode-value")[1].innerHTML); 

}; 

Answer 2

試試這個

var labels = document.querySelectorAll(".viewmode-label"); 
var values = document.querySelectorAll(".viewmode-value"); 

var map = {}; 
for(var counter = 0; counter < labels.length; counter++) 
{ 
    map[ labels[ counter ].innerHTML ] = values[ counter ].innerHTML 
} 

//now the map has all the labels against values 
console.log(map[ "Request date:" ]); 

Answer 3

如果你正在使用jQuery這是很常見的這些天：

jQuery("span").each(funtion(){ 
    var spanHtml = jQuery(this).html(); 
    // your code 
    // .... 
});