`
chengyu2099
  • 浏览: 471160 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

getElementById()、getElementsByName、getElementsByTagName区别

 
阅读更多
1、getElementById()
getElementById()可以访问DOCUMENT中的某一特定元素,顾名思义,就是通过ID来取得元素,所以只能访问设置了ID的元素。
比如说有一个DIV的ID为docid:
<div id="docid"></div>
那么就可以用getElementById("docid")来获得这个元素。

getElementsByName()
这个是通过NAME来获得元素,但不知大家注意没有,这个是GET ELEMENTS,复数ELEMENTS代表获得的不是一个元素,为什么呢?
因为DOCUMENT中每一个元素的ID是唯一的,但NAME却可以重复。打个比喻就像人的身份证号是唯一的(理论上,虽然现实中有重复),但名字

重复的却很多。如果一个文档中有两个以上的标签NAME相同,那么getElementsByName()就可以取得这些元素组成一个数组。

比如有两个DIV:
<div name="docname" id="docid1"></div>
<div name="docname" id="docid2"></div>
那么可以用getElementsByName("docname")获得这两个DIV,用getElementsByName("docname")[0]访问第一个DIV,用getElementsByName


3、getElementsByTagName()
这个呢就是通过TAGNAME(标签名称)来获得元素,一个DOCUMENT中当然会有相同的标签,所以这个方法也是取得一个数组。
下面这个例子有两个DIV,可以用getElementsByTagName("div")来访问它们,用getElementsByTagName("div")[0]访问第一个DIV,用

getElementsByTagName("div")[1]访问第二个DIV。
分享到:
评论

相关推荐

    document.all与getElementById、getElementsByName、getElementsByTagName用法区别-getElementById

    在HTML文档对象模型(DOM)中,有三种主要方法用于查找HTML元素:`document.all`,`getElementById()`,`getElementsByName()` 和 `getElementsByTagName()`。这些方法各有其特性和适用场景,理解它们的区别对于编写...

    document.all与getElementById、getElementsByName、getElementsByTagName用法区别-document.all第1/2页

    本文将深入探讨`document.all`与`getElementById`、`getElementsByName`、`getElementsByTagName`这四个方法的区别和用法。 1. `document.all` `document.all` 是一个数组集合,它包含了HTML文档中所有的元素,...

    a.-DOM:实践GetElementsById-GetElementsByTagName-GetElementsByName

    本篇将详细讲解DOM中的三个核心方法:`getElementById`、`getElementsByTagName`以及`getElementsByName`,这些都是JavaScript与网页元素交互时常用的方法。 首先,`getElementById`是DOM中查找特定ID元素的最直接...

    javascript getElementsByName()的用法说明

    getElementsByName() 方法与getElementById()方法不同,后者是用于获取具有特定ID的单个元素。请注意,尽管它们听起来相似,但它们的行为是不同的。getElementById()只返回一个元素,因为它假定ID是唯一的标识符,而...

    getElementByID、createElement、appendChild几个DHTML元素第1/2页

    在DOM中,有几种重要的方法用于操作和访问页面元素,其中`getElementById()`、`getElementsByName()`和`getElementsByTagName()`是JavaScript中常见的三种。下面我们将详细探讨这些方法以及它们在DHTML(Dynamic ...

    Document:getElementsByName()使用方法及示例

    与 `getElementById()` 方法不同,后者通过元素的唯一 `id` 查找单个元素,而 `getElementsByName()` 返回的是一个包含所有匹配 `name` 的元素的 **NodeList 集合**,而不是单个元素。由于在 HTML 中,多个元素可以...

    JS获取网页中HTML元素的几种方法分析

    以上介绍了几种常见的 JavaScript 获取 HTML 元素的方法:`getElementById`、`getElementsByName`、`getElementsByTagName` 和 `document.all`。每种方法都有其适用场景和特点,在实际开发中应根据具体需求选择合适...

    JavaScript的DOM查询.pdf

    1. 使用getElementById()方法进行通过Id查询: getElementById()方法用于通过元素的ID来获取对应元素。每个HTML元素可以设置一个唯一的ID标识,通过这个ID可以准确地定位到特定的元素。例如: ```javascript var btn...

    js获取节点方法1

    1. **获取元素节点**:获取元素的属性通常需要先获取到元素本身,如上面的`getElementById()`或`getElementsByTagName()`等。例如,获取ID为"name"的元素: ```javascript var name = document.getElementById(...

    DOM方法总结

    注意:`getElementsByTagName()` 和 `getElementsByName()` 的区别在于前者是基于标签名进行搜索,而后者则是基于元素的`name`属性。 ##### 4. `hasChildNodes()` 此方法用于检测一个元素是否包含子节点。如果存在...

    JavaScript DOM元素常见操作详解【添加、删除、修改等】

    4. `getElementsByName`:根据name属性获取一组元素。 注意,`document`对象支持以上四种方法,而`element`对象只支持`getElementsByTagName`和`getElementsByClassName`。 ### 修改DOM元素 - 修改内容:可以使用...

    javascript学习笔记

    var liNodes = document.getElementById("parentElement").getElementsByTagName("li"); ``` ### 4. 获取文本节点 #### 基本操作: - **获取文本节点**:文本节点可以通过`firstChild`或`textContent`属性来获取...

    JavaScript中获取HTML元素值的三种方法

    本文将详细介绍三种常用的方法:getElementById()、getElementsByName() 和 getElementsByTagName(),并提供示例代码帮助理解。 1. **getElementById() 方法** `getElementById()` 是JavaScript中最直接且常用的...

    火狐和IE支持javaScript脚本的一些区别

    IE中`parentNode`和`childNodes`的使用与Firefox基本一致,但在处理子节点集合时,Firefox提供了更强大的`getElementsByTagName`方法,而IE中的`childNodes`可能包含文本节点和其他非元素节点,这在处理时需额外注意...

    js选择器全面解析

    在JavaScript中,有四个原生的选择器方法,它们分别是getElementById、getElementsByName、getElementsByTagName和getElementsByClassName。接下来,我们将深入探讨这四个方法的使用及其特点。 1. **getElementById...

    JavaScript获取HTML DOM节点元素的方法的总结

    例如,先通过`getElementById`找到一个父节点,然后使用`getElementsByTagName`或`children`来筛选出特定类型的子元素,最后利用`previousSibling`或`nextSibling`找到目标元素。 了解并熟练掌握这些DOM操作方法,...

Global site tag (gtag.js) - Google Analytics