javascript - 提取多个同名的div标签

Question

如何使用“评级”标签从此 HTML 中提取所有 3 个值。

我已经尝试过:

document.getElementsbyTagName("rating")  
 var ratings = ratingPage.querySelector("div.rating").innerText;

这个有效，但仅适用于第一次出现“评级”的情况。

<div class="rating-slider">
          <div class="label">First</div>
          <div class="rating">4.2</div>
          <div class="slider">
            <div class="rate-slider" data-rating="good">
              <div class="ui-slider-range" style="width:83.99999618530273%"></div>
              <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 83.99999618530273%;"></a>
            </div>
          </div>
        </div>
        <div class="rating-slider">
          <div class="label">Second</div>
          <div class="rating">3.4</div>
          <div class="slider">
            <div class="rate-slider"  data-rating="average">
              <div class="ui-slider-range" style="width:68.00000190734863%"></div>
              <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 68.00000190734863%;"></a>
            </div>
          </div>
        </div>
        <div class="rating-slider">
          <div class="label">Third</div>
          <div class="rating">1.9</div>
          <div class="slider">
            <div class="rate-slider" data-rating="poor">
              <div class="ui-slider-range" style="width:37.99999952316284%"></div>
              <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 37.99999952316284%;"></a>
            </div>
          </div>
        </div>
      </div

我试图获取它们中的每一个并将它们存储在它们自己的变量中。

Answer 1

这是因为您需要使用 getElementsByClassName()功能就像您针对实际的类而不是标签一样:

var ratings = document.getElementsByClassName('rating');

如果您只想存储值，您可以显式迭代此集合并为每个值提取必要的 HTML:

for(var r = 0; r < ratings.length; r++){
    // Set each value using ratings[r].innerHTML;
} 

或者你可以使用一些奇特的东西，比如 Array.map()函数将每个元素映射到其值的解析版本:

// This will yield [4.2, 3.4, 1.9]
var actualRatings = Array.prototype.map.call(ratings, function(elem){ 
                       return parseFloat(elem.innerHTML);
                    });