JavaScript：DOM访问

getElementById：通过id属性，获得元素节点对象

　　案例：当帐号为空时，阻止表单提交

<body>
    <form action="xxx" onsubmit="return login()">
        <p>帐号：<input id="username"/></p>
        <p>电话：<input id="phone"/></p>
        <p><button>登录</button></p>
    </form>

    <script>
        function login() {
            var name = document.getElementById("username").value ;
            if(name == ""){
                alert("帐号不能为空！");
                return false; // 阻止表单的提交
            }
            return true; // 放行，让表单提交
        }
    </script>
</body>

getElementsByName：通过name属性获得元素节点对象集

　　案例：购物车全选效果

<body>
    <h2>我的购物车</h2>
    <table border="1" cellspacing="0">
    <tr>
        <td><input type="checkbox" onchange="quan(this)" /> 全选</td>
       <td>名称</td>
       <td>单价</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="one" />1</td>
        <td>功能性饮料-尖叫</td>
       <td>4.0</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="one" />2</td>
        <td>火腿肠</td>
        <td>2.0</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="one" />3</td>
        <td>包子</td>
        <td>1.5</td>
    </tr>
</table>

　　<p>
    　　<button>提交订单</button>
　　</p>

　　<script>
    　　function quan(all) {
     　　   var arr = document.getElementsByName("one");
     　　   for (var i = 0; i < arr.length; i++) {
     　　       arr[i].checked = all.checked; // 将全选框的状态，赋值给每一个复选框
     　　   }
   　　 }
    </script>
</body>

getElementsByTagName：通过标签名称获得元素节点对象集

　　案例：表格隔行变色

<body>
    <table border="1" cellspacing="0">
        <tr>
            <td><input type="checkbox" onchange="quan(this)" /> 全选</td>
            <td>名称</td>
           <td>单价</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="one" />1</td>
            <td>功能性饮料-尖叫</td>
            <td>4.0</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="one" />2</td>
            <td>火腿肠</td>
            <td>2.0</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="one" />3</td>
            <td>包子</td>
            <td>1.5</td>
        </tr>
    </table>


    <script>
        var rows = document.getElementsByTagName("tr"); //通过标签名获得元素对象
集合
        for (var i = 0; i < rows.length; i++) {
        if(i % 2 == 1){ // 奇数
           rows[i].style.backgroundColor = "pink";
        }
    </script>
</body>