javascript - 选择节点＆amp;总和值 - Thinbug

选择节点＆amp;总和值

时间：2013-08-13 15:05:19

标签： javascript

问题

如何选择使用特定属性标识的文本节点值（背景颜色＃00FF00）？

由于我是javascript的新手，我不知道如何做第一步：

使用js dom选择00FF00
将字符串拆分为“”作为分隔符
循环并使用+ =
将总和（240 + 80 + 600）写入html

代码

<!DOCTYPE html>
<html>
<head>

<script>
window.onload = function() {
    var data  = document.getElementsByTagName('span');
    document.write(data);
};
</script>

</head>
<body>
<div class="box">
<span class="highlight">Dave collected 700 items.</span>
</div>
<div class="box">
<span class="highlight" style="background-color:#00FF00;">Bob collected 240 items.</span>
</div>
<div class="box">
<span class="highlight" style="background-color:#00FF00;">Bob collected 80 items.</span>
</div>
<div class="box">
<span class="highlight" style="background-color:#00FF00;">Bob collected 600 items.</span>
</div>
</body>
</html>

var els = document.querySelectorAll('span.highlight');
var len = els.length;
//console.log(len); //returns 4
var total = 0;
for (var i=0; i < len; i++) {
    if (els[i].style.backgroundColor.toLowerCase() === 'rgb(0, 255, 0)') {
    var txt = els[i].innerHTML;

    //split txt into array
    split = txt.split(" ");
    total += parseInt(split[2]);
    }
}
console.log(total);

2 个答案:

答案 0 :(得分：2)

除非您试图抓取其他网站的内容并且无法控制HTML结构，否则我建议您添加一个额外的类或属性，以便于选择这些节点。

但是，你可以这样做：

var els = document.querySelectorAll('span.highlight'),
    i = 0,
    len = els.length;

for (; i < len; i++) {
    if (els[i].style.backgroundColor.toLowerCase() === '#00ff00') {
        //code
    }
}

答案 1 :(得分：1)

如前所述，最好使用类定义。但是如果你必须按颜色选择，下面的代码应该为你做。

var data = document.getElementsByTagName('span');
var len = data.length;
for(var i = 0; i < len; ++i){
    var styles = data[i].getAttribute('style');
    if(styles.indexOf('background-color:#00FF00') != -1){
        //Do something
    }
}