• 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;
    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值的。 

  • 相关阅读:
    ISAG协议中彩信支持的几种附件格式(河南电信)
    河南电信ISAG短信下行数据格式
    SQL中varchar和nvarchar有什么区别?
    通过一个很实用的例子让你学会TSQL编程的基本语法和思想
    在读取或者保存word时,程序捕获到word异常“word无法启动转换器mswrd632 wpc”
    工作基本搞定等待周五入职
    ClickOnce发布时,资源文件添加问题
    访问IIS元数据库失败
    一个随机产生中文简体字的一个类
    QQ抢车位外挂(续)
  • 原文地址:https://www.cnblogs.com/jinjiangongzuoshi/p/3913728.html
Copyright © 2020-2023  润新知