JavaScript区别getElementByID,getElementsByName,getElementsByTagName

区别getElementByID,getElementsByName,getElementsByTagName

以人来举例说明,人有能标识身份的身份证,有姓名,有类别(大人、小孩、老人)等 ##。

  1. ID 是一个人的身份证号码,是唯一的。所以通过getElementById获取的是指定的一个人。

  2. Name是他的名字,可以重复。所以通过getElementsByName获取名字相同的人集合。

  3. TagName可看似某类,getElementsByTagName获取相同类的人集合。如获取小孩这类人,getElementsByTagName("小孩")

把上面的例子转换到HTML中,如下:

<input type="checkbox" name="hobby" id="hobby1">

input标签就像人的类别。

name属性就像人的姓名。

id属性就像人的身份证。

方法总结如下:

注意:方法区分大小写

通过下面的例子(6个name="hobby"的复选项,两个按钮)来区分三种方法的不同:

<input type="checkbox" name="hobby" id="hobby1">  音乐
<input type="checkbox" name="hobby" id="hobby2">  登山
<input type="checkbox" name="hobby" id="hobby3">  游泳
<input type="checkbox" name="hobby" id="hobby4">  阅读
<input type="checkbox" name="hobby" id="hobby5">  打球
<input type="checkbox" name="hobby" id="hobby6">  跑步 
<input type="button" value = "全选" id="button1">
<input type="button" value = "全不选" id="button1">`
  1. document.getElementsByTagName("input"),结果为获取所有标签为input的元素,共8个。

  2. document.getElementsByName("hobby"),结果为获取属性name="hobby"的元素,共6个。

  3. document.getElementById("hobby6"),结果为获取属性id="hobby6"的元素,只有一个,"跑步"这个复选项。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 7,763评论 0 8
  • 第1章 认识JS JavaScript能做什么?1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)2.实现...
    mo默22阅读 5,237评论 0 5
  • 我是一个喜欢懒的人!是不是很搞笑,好比做饭,因为自己吃饭很快,肠胃不好,所以都要熬煮的烂些,为什么呢!因为那样我就...
    坠叶无尘阅读 1,661评论 7 5
  • 大家好, 这是我人生中过得第二十一个光棍节。 我不记得之前是怎么过的,以往的朋友圈和空间似乎也没有发表相关状态。当...
    小向向阅读 3,008评论 5 4
  • I came back this afternoon, after having a meeting all da...
    老蛮腰阅读 1,022评论 0 0

友情链接更多精彩内容