<!DOCTYPE html>
<html lang="en">
<!--通过JavaScript访问HTML元素-->
<head>
<meta charset="UTF-8">
<title>alterHtmlElem</title>
<!--
如果在这个地方定义JavaScript代码，则输出0了，因为浏览器执行文档是从上到下顺序执行的
<script>
/*输出0*/
/*首先alert()是window下的一个方法，forms返回文档（document）的表单集合，再输出表单集合的length(长度)*/
window.alert("The amount of this HTML file is = " + window.document.forms.length);
</script>
-->
</head>
<body>
<!--表单1-->
<form action="form1action.php" method="get">
<input type="text" name="field1"/>
</form>
<br>
<br>
<!--表单2-->
<form action="form2action.php" method="get">
<input type="text" name="field2"/>
<br>
<input type="text" name="field3"/>
</form>
<script>
/*输出2*/
/*首先alert()是window下的一个方法，forms返回文档（document）的表单集合，再输出表单集合的length(长度)*/
window.alert("The amount of this HTML file is = " + window.document.forms.length);
/* 访问第一个form的action*/
var form1 = window.document.forms[0];
window.alert("The form1 action is = " +form1.action);
/*等价于下面的语句*/
window.alert("The form1 action is = " +window.document.forms[0].action);
/*获取类型*/
window.document.write(window.document.forms[0].encoding + "<br>");
/*获取表单提交方法*/
window.document.write(window.document.forms[0].method + "<br>");
/*还有其他form属性，可以参照API文档 地址：http://html5index.org/ */
/* 访问第二个form的action*/
var form2 = window.document.forms[1];
window.alert("The form1 action is = " +form2.action);
/*等价于下面的语句*/
window.alert("The form1 action is = " +window.document.forms[0].action);
/*获取类型*/
window.document.write(window.document.forms[1].encoding + "<br>");
/*获取表单提交方法*/
window.document.write(window.document.forms[1].method + "<br>");
/*还有其他form属性，可以参照API文档 地址：http://html5index.org/ */
/**
* 这种基于数组的访问方式很直观，但是就像上面程序锁展示的，如果表单标签的位置换了
* 或者JavaScript代码移动了，则代码可能会不起作用，最好的方法是通过各种标签的名称来访问各种标签
*/
</script>
</body>
</html>
时间： 2024-10-29 10:23:58