zoukankan      html  css  js  c++  java
  • 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值的。 

  • 相关阅读:
    26 转义符 re模块 方法 random模块 collection模块的Counter方法
    25 正则表达式
    24 from 模块 import 名字
    24 from 模块 import 名字
    24 from 模块 import 名字
    23 析构方法 items系列 hash方法 eq方法
    21 isinstance issubclass 反射 _str_ _new_ _len_ _call_
    20 属性, 类方法, 静态方法. python2与python3的区别.
    python(1)
    python之字符串格式化
  • 原文地址:https://www.cnblogs.com/jinjiangongzuoshi/p/3913728.html
Copyright © 2011-2022 走看看