getElementById、 getElementsByName 和getElementsByTagName的用法

1、getElementById() (:Return an object reference to the identified element)
 方法返回对拥有指定 ID 个对象的引用。

 如果您需要查找文档中的一个特定的元素，最有效的方法是 getElementById()。

 在操作文档的一个特定的元素时，最好给该元素一个 id 属性，为它指定一个（在文档中）唯

一的名称，然后就可以用该 ID 查找想要的元素。

2、Document:getElementsByName()(:Return a list of elements with the given name
            Return value is a Nodelist of elements
    )
getElementsByName() 方法可返回带有指定名称的对象的集合。

document.getElementsByName(name)该方法与 getElementById() 方法相似，但是它查询元素的 name

属性，而不是 id 属性。

另外，因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属

性），所以 getElementsByName() 方法返回的是元素的数组，而不是一个元素。

3、getElementsByTagName() (:Return a list of elements with the given tag name)

方法可返回带有指定标签名的对象的集合。

getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。

如果把特殊字符串 "*" 传递给 getElementsByTagName() 方法，它将返回文档中所有元素的列表，元素

排列的顺序就是它们在文档中的顺序。
下面是我写的一个小例子：

 

< html >
     < head >
         < title > 插入 </ title >
     </ head >
     < script  type ="text/javascript" > ...
         function getValue()
          ...{
              var x=document.getElementById("myHeader")
              alert(x.innerHTML)
          }
          function getElements()
          ...{
             var x=document.getElementsByName("sex");
              alert(x.length);
          }
  
          function getTagElements()
          ...{
              var x = document.getElementsByTagName("input");
              alert(x.length);
          }
         
      </ script >
     < body >
         < form  name ="Input" >
             < table  align ="center"  width ="50%"  height ="50%"  border ="1" >
                 < tr >
                     < td  align ="center"  width ="45%" >
                        学号
                     </ td >
                     < td  align ="center"  width ="55%" >
                         < input  type ="text"  id =userid  name ="user"  onblur ="validate();" >
                         < div  id =usermsg ></ div >
                     </ td >
                 </ tr >
                 < tr >
                     < td  align ="center"  width ="45%" >
                        姓名
                     </ td >
                         < td  align ="center" >
                         < input  type ="text"  name ="name" >
                     </ td >
                 </ tr >
                 < tr >
                     < td  align ="center"  width ="%45" >
                        性别
                     </ td >
                     < td  align ="center" >
                         < input  type ="radio"  name ="sex"  value ="男" >
                        男
                         < input  type ="radio"  name ="sex"  value ="女" >
                        女
                     </ td >
                 </ tr >
                 < tr >
                     < td  align ="center"  width ="45%" >
                        年龄
                     </ td >
                     < td  align ="center"  width ="55%" >
                         < input  type ="text"  name ="age" >
                     </ td >
                 </ tr >
                 < tr >
                     < td  align ="center"  width ="45%" >
                        籍贯
                     </ td >
                     < td  align ="center"  width ="55%" >
                         < input  type ="text"  name ="addr" >
                     </ td >
                 </ tr >

             </ table >
         </ form >
         < h1  id ="myHeader"  onclick ="getValue()" >
            This is a header
         </ h1 >
         < p >
            Click on the header to alert its value
         </ p >
         < input  type ="button"  onclick ="getElements()"
            value ="How many elements named 'sex'?"   />
         < Br >
         < input  type ="button"  onclick ="getTagElements()"
            value ="How many tags named 'input'?"   />

     </ body >
</ html >