2.3 通过name和id访问表单元素

在JavaScript中，可以通过表单元素的name属性和id属性来访问该控件。对于name属性需要使用getElementsByName()方法，而对于id属性则需要使用getElementById()方法，这两种方法在使用上是有所区别的。

关于【代码2-3】的说明：

● 第15～16代码通过标签<input>定义一组文本框，而且同时增加了name属性和id属性的定义。

● 第22行代码通过getElementsByName("fname")方法，实现了对第15行代码定义标签<input name="fname">的访问。不过，需要注意的是该方法返回的是一个控件对象的数组集合，所以第24行代码中需要先使用数组下标格式，再通过value属性获取用户输入的数据信息。

● 第23行代码是通过getElementById("id-lname")方法，实现对第16行代码定义标签<input id="id-lname">的访问。该方法直接返回了该控件对象，所以第25行代码可以直接通过value属性获取用户输入的数据信息。

下面使用Firefox浏览器运行测试该HTML网页，具体效果如图2.2所示。

图2.2 JavaScript通过name和id访问控件