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>