JavaScript：DOM訪問
阿新 • • 發佈：2021-08-12
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>