JavaScript すべてのオブジェクトを対象 querySelectorAll

Question

全てのオブジェクトを対象にbackground-colorにredを設定が設定されていたら青にしたいです
対象となるのは、
divやspanや色々なタグです(特定のタグが存在しているわけではなく不特定なタグです)
この場合どうすればいいのでしょうか

<div style="background-color:red">a</div>
<button style="background-color:red">a</button>


<script>
window.onload=function(){
Array.from(document.querySelectorAll("* backgroundColor='red'"), i => {
//↑このようなことがやりたい
i.style.background="blue";
});
}
</script>

思いついた方法
これだとすべてのオブジェクトを判定し、無駄が多い

他に書き方があれば教えてください
<div style="background-color:red">a</div>
<button style="background-color:red">a</button>


<script>
window.onload=function(){
Array.from(document.querySelectorAll("*"), i => {
if(i.style.backgroundColor=="red"){
i.style.backgroundColor="blue";
}
});
}
</script>

Answer 1

querySelectorAll('[style="background-color:red"]')で、style属性が"background-color:red"の要素に限定して取得することができます。

例

<div style="background-color:red">red</div>
<p style="background-color:red">red</p>
<h3>---</h3>

const targetElems = document.querySelectorAll('[style="background-color:red"]');
console.log(targetElems); // [div, p]

targetElems.forEach(elem => elem.style.backgroundColor = 'blue');