gpt4 book ai didi

javascript - 选择节点和求和值

转载 作者:行者123 更新时间:2023-11-28 20:21:34 24 4
gpt4 key购买 nike

问题

如何选择用特定属性(背景颜色#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);

最佳答案

除非您尝试抓取另一个网站的内容并且无法控制 HTML 结构,否则我建议向其中添加一个额外的类或属性,以简化这些节点的选择。

但是,您可以这样做:

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

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

关于javascript - 选择节点和求和值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18212695/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com