`

getElementById,getElementsByName,getElementsByTagName用法

阅读更多
  getElementById(), getElementsByName(), and getElementsByTagName()访问DOCUMENT中的任一个标签:
1、getElementById()
  getElementById()可以访问DOCUMENT中的某一特定元素,顾名思义,就是通过ID来取得元素,所以只能访问设置了ID的元素。
     比如说有一个DIV的ID为docid:
程序代码
<div id="docid"></div>

那么就可以用getElementById("docid")来获得这个元素。

2、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("docname")[1]访问第二个DIV。

3、getElementsByTagName()
这个呢就是通过TAGNAME(标签名称)来获得元素,一个DOCUMENT中当然会有相同的标签,所以这个方法也是取得一个数组。
下面这个例子有两个DIV,可以用getElementsByTagName("div")来访问它们,用getElementsByTagName("div")[0]访问第一个DIV,用
getElementsByTagName("div")[1]访问第二个DIV。
总结一下标准DOM,访问某一特定元素尽量用标准的getElementById(),访问标签用标准的getElementByTagName(),但IE不支持getElementsByName(),所以就要避免使用
getElementsByName(),但getElementsByName()和不符合标准的document.all[]也不是全无是处,它们有自己的方便之处,用不用那就看网站的用户使用什么浏览器,由你自己
决定了。
2
4
分享到:
评论

相关推荐

    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文档中所有的元素,...

    javascript getElementsByName()的用法说明

    使用此方法的可访问性比getElementsByTagName()更窄,但比getElementsByName()更宽。 最后,必须注意的是,随着HTML5的出现,name属性已经不再是获取表单元素的主要方式。现在更推荐使用具有唯一性的ID属性,并用...

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

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

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

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

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

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

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

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

    JavaScript的DOM查询.pdf

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

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

    2、getElementsByName()方法:通过name取得元素,是一个数组。 3、getElementsByTagName()方法:通过HTML标签取得元素,是一个数组。 如果要取得值可以使用value,如:var x=document.getElementById(“id”).value;...

    js获取节点方法1

    1. **通过ID获取元素**:这是最直接的方法,`getElementById()`函数接受一个字符串参数,这个字符串是元素的ID。例如: ```javascript var city = document.getElementById("city"); ``` 这将返回页面中ID为...

    常见的原始JS选择器使用方法总结

    在这些方法中,最为人们熟悉且常用的选择器包括:getElementById、getElementsByName、getElementsByTagName 和 getElementsByClassName。这些方法能够帮助开发者以不同的属性或标签名来获取页面元素。 ...

    javascript获取指定节点父节点、子节点的方法

    5. parentObj.getElementsByTagName(tagName):使用方法不再赘述,它返回已知节点的所有子节点中类型为指定值的子节点数组。 通过临近节点获取 1. neighbourNode.previousSibling:获取已知节点(neighbourNode)...

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

    删除元素则可以使用`removeChild`方法,这通常需要先获取到该元素的父节点,再通过父节点的`removeChild`方法来移除。 ### 代码示例 以获取元素为例,使用`getElementById`获取具有特定ID的元素,然后可以修改这个...

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

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

    Javascript基础知识

    **使用方法:** ```javascript var element = document.getElementById("domId"); ``` **注意事项:** - 在IE8及以下版本的浏览器中,`getElementById`方法不区分大小写,并且可能会返回匹配`name`属性的元素。 -...

Global site tag (gtag.js) - Google Analytics