<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--//獲取表單對象的3種方式-->
<!--//1.通過document.getelementbyid（）;-->
<!--//2.document.forms[x];-->
<!--//3.document.form["表單的name的value值"]-->
<script>
//獲取表單對象
var ele05=function () {
//第一種：
var ele02=document.getElementById("ele01");
console.log(ele02.action)
//第二種
var ele03=document.forms[0];
console.log(ele03.method)
//第三種
var ele04=document.forms["ele02"]
console.log(ele04.name);
console.log(ele04.length);
//返回表單中所有的表單域(input button select textarea)對象的一個數組
console.log(ele04.elements)
//以下為測試為獲取和修改元素節點的操作
// 常見標簽適用直接獲取和修改！!
// 不常見如div只能setattribute/getattribute來操作！！
var ele40= document.getElementsByTagName("button");
console.log(ele40[0].value)//普通標簽不能直接這樣獲取屬性的value
console.log(ele40[0].name)
console.log("==========================")
ele40[0].name="xxxxxxxxxxxxxxxxxxxxxx";
console.log(ele40[0].name)
var ele41=document.getElementById("xx");//input標簽
console.log(ele41.type)
console.log(ele41.name)
console.log(ele41.id)
console.log("****************************************************************************")
var ele42=document.getElementById("xxx");//div標簽
console.log(ele42.id)
console.log(ele42.name)
console.log(ele42.value)
console.log(ele42.getAttribute("value"))
name.value="***********";
console.log(ele42.getAttribute("value"))
}
// <!--//獲取表單域（表單里的標簽元素）的3種方法-->
// <!--// 1.documnet.getElementsbyid("x") x為id的value-->
// <!--//2.表單對象.elements[x]; x為下標-->
// <!--/3.表單對象.elements["x"]; x為name的value值-->
//獲取表單里的表單域對象
var ele55=function () {
//第一種
var ele01=document.getElementById("qwer");
//第二種+第三種
//獲取表單對象
var ele02=document.forms[0];
var ele03= ele02.elements[1];
var ele04=ele02.elements["asdf"];
//驗證2，3種方法
console.log("驗證獲取表單域對象")
console.log(ele03.type)
console.log(ele04.type)
}
</script>
</head>
<body>
<form action="javaScript:"void(0) method="post" id="ele01" name="ele02">
用戶名：<input type="text" value="" id="qwer" name="asdf"><br>
密 碼：<input id="text" value=""><br>
<input type="submit" value="提交"><br>
<input type="reset" value="重置">
</form>
<button onclick="ele05()" value="測試表單屬性按鈕" name="xxxx">測試表單屬性按鈕</button>
<button onclick="ele55()" value="測試表單域按鈕" name="xxxx">測試表單域按鈕</button>
<input type="text" name="xx" value="xx" id="xx">
<div id="xxx" name="xxxx" value="xxxxxx">
</div>
</body>
</html>
