美文网首页
JavaScript区别getElementByID,getEl

JavaScript区别getElementByID,getEl

作者: 单纯的土豆 | 来源:发表于2016-02-25 16:45 被阅读106次

区别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"的元素,只有一个,"跑步"这个复选项。

相关文章

网友评论

      本文标题:JavaScript区别getElementByID,getEl

      本文链接:https://www.haomeiwen.com/subject/tpnikttx.html