改变<li>背景

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf8" />
        <style type="text/css"><!--
            *{ margin:0; padding:0; font-size:14px; }
        --></style>
        <script type="text/javascript">//<![CDATA[
            window.onload = function(){
                var obj = document.getElementById("aa");
                var cursor;
                for(var i=0;i<obj.length;i++){
                    obj[i].onclick=function(){
                        if(cursor)cursor.style.backgroundColor = '#fff';
                        this.style.backgroundColor = 'red';
                        cursor=this;
                    }
                }
            }
        //]]></script>
    </head>
    <body>
        <ul id="brandLiId">
            <li id="aa" >笔记本</li>
            <li id="aa">手机</li>
            <li id="aa">鞋子</li>
            <li id="aa">运动</li>
        </ul>
    </body>
</html>
这段代码怎么才能通过getelementById 来改变背景？？