通过name属性来获取元素
# 通过`name`选取元素
## 1. name 的前世今生
* HTML设计者最初只想把`name`属性分配给表单元素,让服务器能根据它识别用户提交的数据
* `name`属性是用业给元素命名的,与`id`是完全不同
* `id`如同人的身份证号,应该是唯一的, 而`name`如同人的姓名, 是允许重名,所以不唯一
* 最典型就是表单中的单选按钮`radio`和复选按钮`checkbox`,多个元素具有同一个`name`值
* 任何元素都可以添加`id`,但使用`name`生效的元素是极少的
* 例如: 表单`<form>`, 表单元素`<input...>`, 框架`<iframe>`,图片`<img>`
----------------------------------------------------------------------
## 2. `name`属性对应的方法
* `document.getElementsByName('elementName')`
* 该方法定义在`HTMLDocument`中,而非`Docuement`,所以`XML`文档不可用
----------------------------------------------------------------------
## 3. `name`属性与`windows对象属性`转换
* 部分HTML元素的`name`属性会自动成为`window`对象的属性
* 例如`<form>`, `<img>`,`<iframe>`
----------------------------------------------------------------------
## 4. 示例源码
> code/demo02.html
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>getElementsByName()</title>
</head>
<body>
<form action="" method="post" name="form1">
<div>
<input type="radio" name="agree" value="0">No
<input type="radio" name="agree" value="1" checked>Yes
</div>
<div>
<input type="checkbox" name="lang" value="html" checked>HTML
<input type="checkbox" name="lang" value="css">CSS
<input type="checkbox" name="lang" value="javascript">JavaScript
</div>
</form>
<script>
//<form>标签中的'name'属性值,在页面中只有一个,会自动成为'window'对象中的属性
//可以用window访问, 也可以用document, 即文档属性方式访问
console.log( window.form1 );
console.log( document.form1);
// 文档属性document.forms访问,返回:HTMLCollection
console.log( document.forms);
// 可以使用索引
console.log( document.forms[0]);
// 也可以传入name值
console.log( document.forms['form1']);
// item()方法
console.log( document.forms.item(0));
// namedItem()使用name值,而不是索引访问
console.log( document.forms.namedItem('form1'));
// 单选按钮与复选按钮的name属性值不唯一,会返回一个类数组的NodeList对象
console.log( document.getElementsByName('agree'));
console.log( document.getElementsByName('agree')[0]);
console.log( document.getElementsByName('agree')[1]);
console.log( document.getElementsByName('lang'));
console.log( document.getElementsByName('lang')[0]);
//除了可以用索引访问外, 还可以用item()方法
console.log( document.getElementsByName('lang').item(1));
console.log( document.getElementsByName('lang')[2]);
</script>
</body>
</html>
```
