首页 > 代码库 > javaScript-------------Dom操作(二)

javaScript-------------Dom操作(二)

javaScript-------------Dom操作(二)

<!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>


本文出自 “@coder” 博客,请务必保留此出处http://smallcoder.blog.51cto.com/11941149/1856034

javaScript-------------Dom操作(二)