javascript 如何正确使用getElementById,getElementsByName(), and getElementsByTagName()

WEB标准下可以通过getElementById(), getElementsByName(), and getElementsByTagName()访问DOCUMENT中的任一个标签。

(1)getElementById():

getElementById()可以访问DOCUMENT中的某一特定元素,顾名思义,就是通过ID来取得元素,所以只能访问设置了ID的元素。

(2)getElementsByName():

该方法是通过NAME属性来获得元素,但注意区别:getElementById()中是element,而getElementsByName()是elements。显而易见,getElementsByName()返回值有很多,这是因为DOCUMENT中每一个元素的ID是唯一的,但NAME却可以重复。如果一个文档中有两个以上的标签NAME相同,那么getElementsByName()就可以取得这些元素组成一个数组。

例如:

<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()
                      getElementsByTagName()是通过TAGNAME(标签名称)来获得元素,一个DOCUMENT中当然会有相同的标签,所以这个方法也是取得一个数组。

例如:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Byname,tag</title>
<style type="text/css">
<!--
#docid1,#docid2{
margin:10px;
height:400px;
width:400px;
}
-->
</style>
</head>
<body>
<div name="docname" id="docid1" onClick="bgcolor()"></div>
<div name="docname" id="docid2" onClick="bgcolor()"></div>
</body>
</html>
<script language="JavaScript" type="text/JavaScript">
<!--
function bgcolor(){
var docnObj=document.getElementsByTagName("div");
docnObj[0].style.backgroundColor = "black";
docnObj[1].style.backgroundColor = "black";
}
-->
</script>

总结一下标准DOM,访问某一特定元素尽量用标准的getElementById(),访问标签用标准的getElementByTagName(),但IE不支持getElementsByName(),所以就要避免使用getElementsByName(),但getElementsByName()和不符合标准的document.all[]也不是全无是处,它们有自己的方便之处,用不用那就看网站的用户使用什么浏览器,由你自己决定了。

  Javascript中的getElementById十分常用,但在标准的页面中,一个id只能出现一次,如果我想同时控制多个元素,例如点一个链接, 让多个层隐藏,该怎么做?用class,当然,同一个class是可以允许在页面中重复出现的,那么有没有getElementByClass呢?没有, 但是可以解决:

//Create an array

var allPageTags = new Array();

function hideDivWithClasses(theClass) {
//Populate the array with all the page tags

var allPageTags=document.getElementsByTagName("div");
//Cycle through the tags using a for loop

for (i=0; i<allPageTags.length;i++)

{

if (allPageTags[i].className==theClass) {
//Manipulate this in whatever way you want
allPageTags[i].style.display=‘none‘;
}
}
}

鉴于getElementById()方法使用比较频繁,我在网上搜集了一下关于此方法的一些用法。

document.getElementById("link").href; 
document.getElementById("link").target; 
document.getElementById("img").src; 
document.getElementById("img").width; 
document.getElementById("img").height; 
document.getElementById("input").value; 
那么如何取得<div></div>以及<a></a>之间的值呢?如<div id="div">aaa</div>中的aaa,<a href="#" id="link">bbb</a>中的bbb,也很简单,利用innerHTML就可以了: 
document.getElementById("div").innerHTML; 
document.getElementById("link").innerHTML;

getElementById 方法 
返回具有指定 ID 属性值的第一个对象的一个引用。 
语法 
oElement = document.getElementById(sIDValue) 
参数 
sIDValue 必选项。指明 ID 属性值的字符串 
返回值 
返回 ID 属性值与指定值相同的第一个对象。    //返回值是一个对象
注释 
如果 ID 属于一个集合,getElementById 方法返回集合中的第一个对象。 
getElementById 方法与使用 all 集合上的 item 方法等同。例如,以下代码样本表示如何从 document 对象中取回 ID 为 oDiv 的第一个要素。 
使用 DHTML 对象模型: 
var oVDiv = document.body.all.item("oDiv"); 
使用文档对象模型(DOM): 
var oVDiv = document.getElementById("oDiv"); 
示例

以下例子表示如何使用 getElementById 方法返回 ID 属性值 oDiv 的第一次出现。 
<script> 
function fnGetId(){ 
// Returns the first DIV element in the collection. 
var oVDiv=document.getElementById("oDiv1"); 

</script> 
<DIV ID="oDiv1">Div #1</DIV> 
<DIV ID="oDiv2">Div #2</DIV> 
<DIV ID="oDiv3">Div #3</DIV> 
<INPUT TYPE="button" VALUE="Get Names" onclick="fnGetId()"> 
getElementById 方法 
返回具有指定 ID 属性值的第一个比如说有个网页中有个text框的id叫text1 
getElementById(text1)就能得到这个text1框的对象,并使用text框的所有属性和方法 
这个是JS的一个方法,意思是通过控件ID取得元素的值,如一个form里包函text、label等,他们都是FORM的元素,有一个分配的ID,getElementById()是取得这些元素的text值的。

javascript 如何正确使用getElementById,getElementsByName(), and getElementsByTagName(),布布扣,bubuko.com

时间: 2024-08-25 11:42:40

javascript 如何正确使用getElementById,getElementsByName(), and getElementsByTagName()的相关文章

getElementById,getElementsByName,getElementsByTagName的区别

1.getElementById 作用:一般页面里ID是唯一的,用于准备定为一个元素 语法: document.getElementById(id) 参数:id :必选项为字符串(String) 返回值:对象; 返回相同id对象中的第一个,按在页面中出现的次序,如果无符合条件的对象,则返回 null example:document.getElementById("id1").value; 2.getElementsByName 作用:按元素的名称查找,返回一个同名元素的数组语法: d

JavaScript中querySelector()和getElementById()(getXXXByXX)的区别

在日常开发中,使用JavaScript获取元素的时候,最常用的方法就是document.getElementById(getXXXByXX)方法.但是最近发现有很多地方使用的是querySelector方法而不是使用前面的方法.去官方文档查看是这么说的: 文档对象模型Document引用的querySelector()方法返回文档中与指定选择器或选择器组匹配的第一个 html元素Element. 如果找不到匹配项,则返回null. 这句话看意思和getElementById(getXXXByXX

(4.17)getElementByID,getElementsByName,getElementsByTagName的区别

<form> <input type="checkbox" name="hobby" id="hobby1"/>音乐 <input type="checkbox" name="hobby" id="hobby2"/>登山 <input type="checkbox" name="hobby" id=&quo

区别getElementByID,getElementsByName,getElementsByTagName

以人来举例说明,人有能标识身份的身份证,有姓名,有类别(大人.小孩.老人)等. 1. ID 是一个人的身份证号码,是唯一的.所以通过getElementById获取的是指定的一个人. 2. Name 是他的名字,可以重复.所以通过getElementsByName获取名字相同的人集合. 3. TagName可看似某类,getElementsByTagName获取相同类的人集合.如获取小孩这类人,getElementsByTagName("小孩"). 把上面的例子转换到HTML中,如下:

getElementByID,getElementsByName,getElementsByTagName

<input type="checkbox" name="hobby" id="hobby1"> 音乐 <input type="checkbox" name="hobby" id="hobby2"> 登山 <input type="checkbox" name="hobby" id="hobby3"

如何在JavaScript中正确引用某个方法(bind方法的应用)

在JavaScript中,方法往往涉及到上下文,也就是this,因此往往不能直接引用,就拿最常见的console.log("info…")来说,避免书写冗长的console,直接用log("info…")代替,不假思索的会想到如下语法: 1 var log = console.log; 2 log("info…"); 很遗憾,运行报错:TypeError: Illegal invocation. 为啥呢?对于console.log("i

优化:JavaScript的正确加载

减少 JavaScript 对性能的影响有以下几种方法: 将所有的<script>标签放到页面底部,也就是</body>闭合标签之前,这能确保在脚本执行前页面已经完成了渲染. 尽可能地合并脚本.页面中的<script>标签越少,加载也就越快,响应也越迅速.无论是外链脚本还是内嵌脚本都是如此. 采用无阻塞下载 JavaScript 脚本的方法: 使用<script>标签的 defer 属性(仅适用于 IE 和 Firefox 3.5 以上版本): 使用动态创建

Javascript 常用方法:document.getElementById(&quot; &quot;)

document.getElementById("") 返回对拥有指定id的第一个对象的引用. <tr><th>id</th><th>name</th><th>age</th><th>address</th></tr> <tr><th>1</th><th>zhangsan</th><th id=&quo

javascript使用for循环批量注册的事件不能正确获取索引值的解决方法

今天遇到一个问题,那就是当使用for循环批量注册事件处理函数,然后最后通过事件处理函数获取当前元素的索引值的时候会失败,先看一段代码实例: <script type="text/javascript"> window.onload=function(){ var oLis=document.getElementsByTagName("li"); var oshow=document.getElementById("show"); fo