JavaScript iframe内の操作

Question

iframeで埋め込んだ自ドメインサイトのdivに設定されてるbackground-imageを変えたいのですが、操作がうまくいかず困っています
どのようにしたら操作できますでしょうか

※divにidは設定しません

親から実行するスクリプト
<script>
window.onload=function(){
iframe=document.createElement('iframe');
iframe.src="child.php";
iframe.id="iframe";
iframe.style.width='100%';
iframe.style.height='100%';
iframe.style.border="none";
iframe.addEventListener('load', function(){

Array.from(document.getElementById('iframe').contentWindow.document.querySelectorAll('div'), i => {
document.getElementById('iframe').contentWindow.i.style.backgroundImage="url(https://画像ファイル)";//これではアクセス不可能なようです
});

}
</script>

iframe child.phpの中身

<style>
div{
width:30px;
height:30px;
background-image: url('https://画像ファイル');
background-repeat:no-repeat;
background-size:contain;
background-position:left;
}
</style>

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

Answer 1

Array.from(document.getElementById('iframe').contentWindow.document.querySelectorAll('div'), i => {
  // iは（値が取れているのであれば）div要素
  i.style.backgroundImage="url(https://画像ファイル)";
});

Comments

[aaaza]

見事にできました
しかしなぜiframe内の要素を書き換えるのに
i.style.backgroundImage="url(https://画像ファイル)";で変わるのでしょうか

document.getElementById('iframe').contentWindow.を付けなければ内部の変更はできないものと思っていました

[miyabi_pudding]

横槍失礼します。
回答ソースコードのコメントアウトに答えが記載されています。

document.getElementById('iframe').contentWindow.document.querySelectorAll('div')
はすでに実行されており、
それによって取得されたdiv要素一個一個が、
関数内のiに格納されるからです。

よって、関数内で、改めて、
document.getElementById('iframe').contentWindow.document.querySelectorAll('div')を実行する必要はありません。