divの子コンテンツを変更するにはどうすればよいですか？

Question

は、私が問題に走ったと私はこのdiv要素の子に「到達」することができません：

<style type="text/css"> 
div#memory_board{ 
    background:#CCC; 
    border:#999 1px solid; 
    width:800px; 
    height:540px; 
    padding:24px; 
    margin:0px auto; 
} 
div#memory_board > div{ 
    background: url(http://image.png) no-repeat center; 
    border:#000 1px solid; 
    width:71px; 
    height:71px; 
    float:left; 
    margin:10px; 
    padding:20px; 
    font-size:64px; 
    cursor:pointer; 
    text-align:center; 
} 
</style> 

は、私は何をしようとしていることはボタンですべてdiv#board > divの背景を変更です。

私はこの試みた：

function imageChange(){ 
document.getElementsByTag("memory_board").style.background="url(http://image.png)"; 
} 

をしかし、もちろん、それは動作しません。私は様々な組み合わせを試みたが、何も動作していないようだ。任意のヒント？ （！Iそれは間違いなく問題ではないので、後で関数を呼び出すボタンを持っている）

これは完全なコードです： https://jsfiddle.net/o72z8dqv/

UPDATE： が解決、ありがとう！ Hereは更新された作業コードです。

Answer 1

あなたはquerySelectorAllを使用することができ、それはあなたがまたArray.from()またはArray.prototype.slice.call()を使用することができ、その後のことができます。NodeList

function imageChange() { 
 
    var divs = document.querySelectorAll("#board > div"); 
 
    for (var i = 0; i < divs.length; i++) { 
 
    divs[i].style.backgroundImage = "url('http://placehold.it/350x150/333333')"; 
 
    } 
 
}

div#board > div { 
 
    background: url('http://placehold.it/350x150/ffffff') no-repeat center; 
 
    border: #000 1px solid; 
 
    width: 71px; 
 
    height: 71px; 
 
    float: left; 
 
    margin: 10px; 
 
    padding: 20px; 
 
    font-size: 50px; 
 
    text-align: center; 
 
}

<button onclick="imageChange()">BUtton</button> 
 
<div id="board"> 
 
    <div>Div</div> 
 
    <div>Div</div> 
 
</div>

を返すので、あなたはそれぞれの子divのスタイルを変更するためにループを使用する必要がありますforEachループ

Answer 2

あなたのCSSに基づいて、私は "ボード"はあなたのIDだと思います。だからちょうどgetElementsByTag("board")をgetElementById("board")