JavaScript中获取元素使用的getElementByID()、getElementsByName()、getElementsByTagName()三者的用法和区别

秒速五厘米 2021-10-29 16:34 332阅读 0赞

在JavaScript中，我们可以通过使用getElementByID()、getElementsByName()、getElementsByTagName()这三者来分别获取document中的元素。那么，这三个东西的用法和区别分别是什么呢？

*  getElementById()：根据标签的ID属性来获取网页中的单个元素
 *  getElementsByName()：根据标签的name属性获取网页中的多个元素(表单控件)
 *  getElementsByTagName()：根据标签的名称获取网页中的多个元素

**以上三者，要特别注意大小写的区分**  
下面，我们通过举例详细说明一下各自的用法：

1.  getElementById(" ID")：通过根据标签的ID，来获取网页的元素。其中ID这个属性就相当于一个人的身份证号码，是唯一的，所以通过getElementById()获取的是一个指定的元素，相当于一个“人”。  
    **document.getElementById():可以根据元素的ID获取一个元素对象。**
2.  getElementsByName():根据标签的name属性获取网页中的多个元素。不知道大家是否注意了没有，这儿这个Element是加了s的，说明获取的不只是一个元素，那么这是为什么呢？  
    **ID是唯一的，但是name属性不是唯一的**，name属性可以重复使用，就打个比方，每一个人的身份证号是唯一的，但是可以跟他同名的人却可以很多。如果在一个文档中，有多个标签name属性相同，那么getElementsByName()就可以取得这些元素组成一个数组。  
    通过在浏览器中验证：**document.getElementsByName()：他可以根据元素的name属性返回一个名为\[object NodeList\]这样一个集合对象。**
3.  getElementsByTagName()：通过名字，我们不难猜测，这个的含义就是根据标签的名称来获取网页中的元素。在一个document中当然会有很多相同的标签名称，所以通过getElementsByTagName()得到的也会是一个数组。  
    通过在浏览器中验证：**document.getElementsByTagName()：他可以根据元素的标签名称属性返回一个名为:\[object HTMLCollection\]这样一个集合对象。**

最后我们总结一下：访问某一特定元素尽量用标准的getElementById()，访问标签用标准的getElementByTagName(),但IE不支持getElementsByName()，所以就要避免使用getElementsByName()，当然还得取决于用户的浏览器。