zoukankan      html  css  js  c++  java
  • (转)Javascript如何正确使用getElementById,getElementsByName() and getElementsByTagName()

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

    (1)getElementById():

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

    (2)getElementsByName():

    getElementsByName()是通过Name属性来获得元素。但注意区别:getElementById()中是element,而getElementsByName是elements。显而易见,geteElementsByName()返回值有很多,这是因为Document中每一个元素的唯一的,但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;
    background-color:#999;}
    -->
    </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值的。

    转子:http://blog.csdn.net/lixuyuan/article/details/6617490

     

  • 相关阅读:
    Fedora13下真正能用的源(2015-5-16亲测)
    Shellcoding教程:介绍ASM(译)
    Shellcoding教程:介绍ASM
    ubuntu解决pppoeconf和network-manager冲突时,可能问题的解决方法
    vue_router-link传参
    js_window.postMessage往不同窗口里面发送数据
    iframe_iframe引入其它页面
    css_去掉默认样式
    vue_常用组件install
    js_正则表达式
  • 原文地址:https://www.cnblogs.com/hongjiumu/p/2669751.html
Copyright © 2011-2022 走看看