JS DOM对象 getElementsByName()方法 返回带有指定名称的节点对象的集合。 语法： document.getElementsByName(name) 与getElementB

最新推荐文章于 2022-12-28 10:53:25 发布
最新推荐文章于 2022-12-28 10:53:25 发布
阅读量2.4k 收藏 3
点赞数
分类专栏： JavaScript进阶篇 文章标签： javascript web前端 对象 dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yongbin668/article/details/51689783
版权

getElementsByName()方法

返回带有指定名称的节点对象的集合。

语法：

document.getElementsByName(name)

与getElementById() 方法不同的是，通过元素的 name 属性查询元素，而不是通过 id 属性。

注意:

1. 因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。

2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。

看看下面的代码:

运行结果:

 

任务

试一试，通过name属性来查询元素:

补充第6行代码，获取 name 为 myt 的元素，同时输出获取的元素节点的长度。


<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function getnum(){
  var mynode= document.getElementsByName("myt")        ;  
  alert(mynode.length);
}
</script>
</head>
<body>
<input name="myt" type="text" value="1">
<input name="myt" type="text" value="2">
<input name="myt" type="text" value="3">
<input name="myt" type="text" value="4">
<input name="myt" type="text" value="5">
<input name="myt" type="text" value="6">

<br />
<input type="button" οnclick="getnum()" value="看看有几项？" />
</body>
</html>




四哥-云上
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS-DOM/getElementsByName()方法/getElementsByTagName()方法/区别getElementByID,getElementsByName,getEleme......
Jennyni1122的博客
06-14 1632
DOM 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。 image.png 将HTML代码分解为DOM节点层次图: image.png HTML文档可以说由节点构成的集合，三种常见的DOM节点: 元素节...
Document:getElementsByName()使用方法及示例
12-11
定义和用法 getElementsByName() 方法可返回带有指定名称的对象的集合。 语法document.getElementsByName(name) 该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。 另外，因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。 实例 代码如下: <html> <head> [removed] function
html中document.getElementsByName返回值问题
杨宇
08-01 7125
getElementsByName返回值虽然有length属性，但并非数组，在本质上它是一种集合，其类型为[object NodeList]；而真正的数组类型是[object Array]，我是用function isArr(o) { return Object.prototype.toString.apply(o) === '[object Array]'; } document.getEle...
JavaScript学习笔记--getElementById,getElementsByTagName,getElementsByClassName获取元素区分
m0_46977769的博客
07-29 2082
注意，JavaScript语言区分大小写 有3种DOM方法可获取节点元素，分别是通过元素Id，标签名和类名字来获取 getElementById 这个方法将返回一个与那个有着给定id属性值的元素节点对应的对象。只有一个参数：元素的id值，id值必须写在单引号或双引号里。 document. getElementById(id) 例子：typeof操作符可以验证操作数是字符串，数值，函数。布尔值还是对象 getElementsByTagName 这个方法返回一个对象数组，每个对象分别对应着文档的标签元素。
DOM获取页面元素getElementById()；getElementTagName()；getElementsByClassName()；querySelector()；
m0_45884629的博客
03-30 316
1.API与WebAPI API是给成员提供的一种工具，以便能更轻松的完成想要的功能。本质就是一些功能的结构即是预定义函数。 WebAPI是主要针对浏览器提供的借口主要对于浏览器做交互效果。 2.DOM文档对象模型 2.1获取元素的方法 1》根据ID名获取getElementById()； 基本语法 : var element=document.getElementById(id); id为HTML中某个元素名 返回值:我们获取id之后其返回值是element类型 举例var element=documen
关于IE浏览器使用documnet.getElementsByName 获取标签不能使用innerHTML 赋值问题解决
guapi_poe的博客
06-12 884
关于IE浏览器使用documnet.getElementsByName 获取标签不能使用innerHTML 赋值问题解决 我使用的是IE8的浏览器 页面 < span id=“spanId” name=“spanName”> 文本内容1 < /span> < span id=“spanId” name=“spanName”> 文本内容2 < /span&g...
js中通过getElementsByName访问name集合对象的方法
11-29
1、查找给定name属性的所有元素，这个方法将返回一个节点集合，也可以称为对象集合。 2、这个集合可以作为数组来对待，length属性的值表示集合的个数。 3、因为在html页面中，name不能唯一确定一个元素，所以方法的...
document.all与getElementById、getElementsByName、getElementsByTagName用法区别-getElementById
09-06
在HTML文档对象模型（DOM）中，有三种主要方法用于查找HTML元素：`document.all`，`getElementById()`，`getElementsByName()` 和 `getElementsByTagName()`。这些方法各有其特性和适用场景，理解它们的区别对于编写...
document.all与getElementById、getElementsByName、getElementsByTagName用法区别-document.all第1/2页
09-06
本文将深入探讨`document.all`与`getElementById`、`getElementsByName`、`getElementsByTagName`这四个方法的区别和用法。 1. `document.all` `document.all` 是一个数组集合，它包含了HTML文档中所有的元素，...
JavaScript——DOM操作——Window.document对象详解
11-28
 docunment.getElementsByName(“name”)；根据name找，找出来的是数组；  docunment.getElementsByTagName(“name”)；根据标签名找，找出来的是数组；  docunment.getElementsByClassName(“name”) 根据...
Document 对象常用方法(getElementById、getElementsByName、getElementsByTagName....)
heitu_的博客
12-28 1万+
document对象常用的六种方法用法及注意点
5个常用DOM方法
暖心~的博客
11-18 2536
1、getElementById:   返回一个与给定id属性值的元素节点对应的对象。   是document对象特有的函数。     只有一个参数：要获得的元素的id属性的值，id值必须放在单引号或双引号。 2、getElementsByTagName:   获取没有id属性的对象.   返回一个对象数组。   只有一个参数：参数是标签的名字。   getElem
获取HTML元素3个方法：document.getElementsByName()、document.getElementById()、document.getElementsByTagName()
热门推荐
小哥骑单车
11-24 6万+
获取HTML元素3个方法比较：document.getElementsByName()、document.getElementById()、document.getElementsByTagName() document.getElementsByName() 是根据控件名称获取这个控件对象，因为控件名称可以相同，返回的是一个对象数组。 document.getElementBy...
js中document节点获取页面元素的六种方式
不甜呐的博客
05-16 1万+
1.querySelector()方法 描述：本方法用于根据给定的选择器选中页面元素 如果有多个元素满足条件，则返回第一个满足条件的元素节点 语法：document.querySelector('选择器名'); 注意：如果查找失败，返回null 2.querySelectAll()方法 描述：本方法用于根据给定的选择器选中页面元素 如果有多个元素满足条件，则返回这些元素构成的集合 语法：document.querySelectAll('选择器名')...
JS DOM对象 getElementsByTagName()方法 返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。
云上
06-17 1699
getElementsByTagName()方法 返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。 语法: getElementsByTagName(Tagname) 说明: 1. Tagname是标签的名称，如p、a、img等标签名。 2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。
JavaScript getElementsByName()方法介绍
路虽远，行则必至！
06-25 3万+
getElementsByName() 根据 name 属性获取一组元素节点对象 getElementsByName()可以根据 name 属性获取一组元素节点对象，该方法所有浏览器均可使用 注意：这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中，如下图： 我们若要查找具体元素，就必须使用索引，如下图： 我们可以通过 length 属性，获取其长度，如下图： 我们可以...
JavaScript中通过getElementsByName访问name集合对象
08-25 1万+
1、查找给定name属性的所有元素，这个方法将返回一个节点集合，也可以称为对象集合。   2、这个集合可以作为数组来对待，length属性的值表示集合的个数。   3、因为在html页面中，name不能唯一确定一个元素，所以方法的名称为getElementsByName而不是getElementByName 无标题文档
document.getElementsByName("name")获取元素的value值失败
weixin_30361753的博客
10-31 2554
document.getElementsByName("name").value;像这样是获取不到值的，弹出的消息是 underfined： 原因getElementById是element单数，getElementsByName是elements复数。 正确方法：var x=document.getElementsByName("name")[0].value;或者：var x=docume...
封装函数：使用document.getElementsByTagName模拟document.getElementsByName
最新发布
07-20
它首先使用 `document.getElementsByTagName("*")` 获取页面上所有的元素，然后通过遍历这些元素，判断它们的 `name` 属性是否与指定的 `name` 相匹配，如果匹配，则将其添加到结果数组中。最后返回结果数组。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值