zoukankan      html  css  js  c++  java
  • getElementById(), getElementsByName(), and getElementsByTagName()使用与区别

         WEB标准下可以通过getElementById(), getElementsByName(), and getElementsByTagName()访问DOCUMENT中的任一个标签:
    1、getElementById()
         getElementById()可以访问DOCUMENT中的某一特定元素,顾名思义,就是通过ID来取得元素,所以只能访问设置了ID的元素。
         比如说有一个DIV的ID为docid:

    1 <div id="docid"></div>

         那么就可以用getElementById("docid")来获得这个元素。

     1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     2 "http://www.w3.org/TR/html4/loose.dtd">
     3 <html>
     4     <head>
     5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
     6         <title>ById</title>
     7         <style type="text/css">
     8         <!--
     9             #docid{
    10             height:400px;
    11             400px;
    12             background-color:#999;}
    13         -->
    14         </style>
    15     </head>
    16     <body>
    17         <div id="docid" name="docname" onClick="bgcolor()"></div>
    18     </body>
    19 </html>
    20 <script language="JavaScript" type="text/JavaScript">
    21     <!--
    22         function bgcolor()
    23         {
    24             document.getElementById("docid").style.backgroundColor="#000"
    25         }
    26     -->
    27 </script>

    2、getElementsByName()
         这个是通过Name来获得元素,但不知大家注意没有,这个是Get Elements,复数Elements代表获得的不是一个元素,为什么呢?
    因为DOCUMENT中每一个元素的ID是唯一的,但NAME却可以重复。打个比喻就像人的身份证号是唯一的(理论上,虽然现实中有重复),但名字重复的却很多。如果一个文档中有两个以上的标签Name相同,那么getElementsByName()就可以取得这些元素组成一个数组。
         比如有两个DIV:

    1 <div name="docname" id="docid1"></div>
    2 <div name="docname" id="docid2"></div>

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

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3     <head>
     4         <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
     5         <title>Byname,tag</title>
     6         <style type="text/css">
     7         <!--
     8             #docid1,#docid2{
     9             margin:10px;
    10             height:400px;
    11             400px;
    12             background-color:#999;}
    13         -->
    14         </style>
    15     </head>
    16     <body>
    17         <div name="docname" id="docid1" onClick="bgcolor()"></div>
    18         <div name="docname" id="docid2" onClick="bgcolor()"></div>
    19     </body>
    20 </html>
    21 <script language="JavaScript" type="text/JavaScript">
    22     <!--
    23         function bgcolor()
    24         {
    25             var docnObj=document.getElementsByTagName("div");
    26             docnObj[0].style.backgroundColor = "black";
    27             docnObj[1].style.backgroundColor = "black";
    28         }
    29     -->
    30 </script>

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

  • 相关阅读:
    cinder支持nfs快照
    浏览器输入URL到返回页面的全过程
    按需制作最小的本地yum源
    创建可执行bin安装文件
    RPCVersionCapError: Requested message version, 4.17 is incompatible. It needs to be equal in major version and less than or equal in minor version as the specified version cap 4.11.
    惠普IPMI登陆不上
    Linux进程状态——top,ps中看到进程状态D,S,Z的含义
    openstack-neutron基本的网络类型以及分析
    openstack octavia的实现与分析(二)原理,架构与基本流程
    flask上下文流程图
  • 原文地址:https://www.cnblogs.com/qq278360339/p/2576438.html
Copyright © 2011-2022 走看看