Quiero que al presionar el boton cambie este su color y también el  body y el  div, pero solo cambia el body los otros dos(div,button) se mantienen con el mismo color. no se que puede estar mal en el código javascript.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

    <!DOCTYPE html>
    <html>
    <head>
    	
    	<title>Color</title>
    	<style type="text/css">
    	
    	body{background-color: yellow;}
    	div{background-color: red; height: 50px;}
    	button{color: white; background-color:blue;padding: 4px; }
    		
    	</style>


    	<script type="text/javascript">
    		
    	function cambiarColor(){
    		document.body.style.background = "blue";
    		document.div.style.background = "yellow";
    		document.button.style.background = "red";
    	}

    </script>
    </head>

    <body>

    	<div></div>	
    	<button type="button"  onclick="cambiarColor()">Colorear</button>
    	
    </body>
    </html>

<!-- end snippet -->