点击切换帐号登陆
帐号密码登陆

通过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>
```


任务

?不会了怎么办
无数据提示暂无评论哟...我要评论
网站导航
标签地图
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ官方交流群
微信公众号
微信公众号