Question

假设我有一个包含此内容的网页：

<a href="https://www.youtube.com/analytics?vmv=2#fi=v-FLp5ViIYS7s" class="yt-uix-tooltip" title="View stats"> 
    <span class="vm-video-metric video-view-count">
        <span> 
            <span class="vm-video-metric-icon"> 
                <img src="//s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif" alt=""> 
            </span> 
            <span class="vm-video-metric-value">
                1,644
            </span> 
        </span> 
    </span> 
    <span class="vm-video-metric video-likes-count"> 
        <span> 
            <span class="vm-video-metric-icon"> 
                <img src="//s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif" alt=""> 
            </span> 
            <span class="vm-video-metric-value">
                13
            </span> 
        </span> 
    </span> 
    <span class="vm-video-metric video-dislikes-count">
        <span> 
            <span class="vm-video-metric-icon"> 
                <img src="//s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif" alt=""> 
            </span> 
            <span class="vm-video-metric-value">
                3
            </span> 
        </span> 
    </span>

我想捕获<span class="vm-video-metric-value"></span>标记封装的三个值。

在Javascript中，通常使用id标记来完成。但由于没有id标记，如何捕获这些值？

Answer 1

使用getElementsByClassName方法，如此。

var elements = document.getElementsByClassName("vm-video-metric-value");
for (var i = 0; i < elements.length; i++) {
    console.log(elements[i].innerHTML);
}

Answer 2

var qsa = document.querySelectorAll("span.vm-video-metric-value"), l = qsa.length, i;
var vals = [];
for( i=0; i<l; i++)
    vals.push(parseInt(qsa[i].firstChild.nodeValue.replace(/[^0-9]/g,''),10));

vals现在是一个包含您想要提取的数字的数组。需要一个能够使用querySelectorAll的浏览器，它几乎都是（IE7和down都没有）。

Answer 3

如果您正在使用jQuery，那么您应该这样做！它的学习非常简单，并且需要一周的时间才能开始使用它：

$('span.vm-video-metric-value').each(function() {
    console.log($(this).text());
});

“对于具有类vm-video-metric-value的每个范围，将文本内部打印到控制台。”

简单就是馅饼！

请给jQuery一个镜头，它是一个很棒的库。

Javascript如何捕获这些值？

3 个答案: