0

質問

特定の属性 (背景色 #00FF00) で識別されるテキスト ノード値をどのように選択しますか?

私はJavaScriptが初めてなので、最初のステップをどのように行うかわかりません：

  1. js dom を使用して 00FF00 のノードを選択します
  2. " " をセパレータとして文字列を分割します
  3. ループして各 split[2] を += で追加します
  4. 合計 (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);
4

2 に答える 2

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
    }
}
于 2013-08-13T15:22:28.773 に答える