日期:2014-05-16  浏览次数:20365 次

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()就可以取得这些元素组成一个数组。 例如:

?
?

那么可以用getElementsByName("docname")获得这两个DIV元素,用getElementsByName("docname")[0]访问第一个DIV,用getElementsByName("docname")[1]访问第二个DIV。 (3)getElementsByTagName() getElementsByTagName()是通过TAGNAME(标签名称)来获得元素,一个DOCUMENT中当然会有相同的标签,所以这个方法也是取得一个数组。 例如:

Byname,tag

?
?

<script type="text/JavaScript" language="JavaScript">// <![CDATA[ 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; 那么如何取得

?

以及之间的值呢?如

aaa

中的aaa,bbb中的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 type="text/javascript">// <![CDATA[ function fnGetId(){ // Returns the first DIV element in the collection. var oVDiv=document.getElementById("oDiv1"); } // ]]></script>

Div #1
Div #2
Div #3

getElementById 方法 返回具有指定 ID 属性值的第一个比如说有个网页中有个text框的id叫text1 getElementById(text1)就能得到这个text1框的对象,并使用text框的所有属性和方法 这个是JS的一个方法,意思是通过控件ID取得元素的值,如一个form里包函text、label等,他们都是FORM的元素,有一个分配的ID,getElementById()是取得这些元素的text值的。