<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form id="frm_login" action="" method="GET">
Username: <input type="text" id="username" /> <br>
Password: <input type="password" id="pass" /> <br>
<button type="button" onclick="check()" >Login</button>
</form>
<script>
function check(){
var form = document.querySelector("#frm_login");
console.dir(form)
//1. In ra các thuộc tính của thẻ frm_login
// sử dụng thuộc tính attributes
console.log(form.attributes)
//2. Thông qua thẻ frm_login hãy kiểm tra giá trị của username, pass
// nếu đúng là admin và pass là 123 thì thông báo OK
//Bước 1: In ra childnodes của phần tử frm_login
console.log(form.childNodes)
//Bước 2: Lấy thông tin của thẻ username.
var list_child = form.childNodes;
console.log( list_child[1])
// var _u = list_child[1].value;
// var _p = list_child[5].value;
// Tình huống: nếu dùng theo cách thứ tự phần tử mảng như ở trên thì khi xóa
// một thẻ br ở trong form hoặc thêm thẻ vào sẽ bị sai thứ tự chỉ số phần tử mảng
// ==> cần cải tiến như sau:
var _u = list_child.getElementById("username").value;
var _p = list_child.getElementById("pass").value;
if(_u == 'admin' && _p =='123')
alert("OK");
else
alert("sai thông tin");
}
</script>
</body>
</html>