2.2 获取表单元素数组，存入对象，并遍历输出 p55

来源：互联网发布：2016淘宝装修模板代码编辑：程序博客网时间：2024/04/30 13:10

<!doctype html><html><head>    <meta charset="utf-8">    <title>Associative Array</title>    <style>    </style></head><body><form id="picker">    <label>Value 1:</label> <input type="text" id="first" /><br />    <label>Value 2:</label> <input type="text" id="second" /><br />    <label>Value 3:</label> <input type="text" id="third" /><br />    <label>Value 4:</label> <input type="text" id="four" /><br />    <button id="validate">Validate</button></form><div id="result"></div><script type="text/javascript">    var btn=document.getElementById("validate");    btn.addEventListener("click",validate,false);    function validate(event){        event.preventDefault();        var obj=new Object();        //取得form中的表单元素的数组。var arr=document.getElementById("picker").elements;        alert(arr.length);        //遍历elements得到的数组，将值传入对象    for(var i=0;i<arr.length;i++){        if(arr[i].type=="text"){            obj[arr[i].id]=arr[i].value;        }    }        var str="";        //对象的遍历       for(var key in obj){         str+=key + '->' + obj[key] + '<br />';       }

/*上面对对象的遍历，还可以使用Object.keys()方法:

 Object.keys(obj).forEach(function(key){         str+=key + '->' + obj[key] + '<br />';       });

Object.keys() 方法会返回一个由给定对象的所有可枚举自身属性的属性名组成的数组，数组中属性名的排列顺序和使用for-in循环遍历该对象时返回的顺序一致（两者的主要区别是 for-in 还会遍历出一个对象从其原型链上继承到的可枚举属性）。

*/        document.getElementById("result").innerHTML=str;    }</script></body></html>

0 0