9-3 getElementsByTagName()方法
本节编程练习不计算学习进度，请电脑登录imooc.com操作

getElementsByTagName()方法

返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。

语法:

document.getElementsByTagName(Tagname)

说明:

1. Tagname是标签的名称，如p、a、img等标签名。

2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。

看看下面代码，通过getElementsByTagName()获取节点。

 

任务

试一试，使用三种获取节点的方法，完成下面的任务:

在第73行补充代码，通过ID获取标题H1。

在第78行补充代码，通过name获取值为sex的元素。

在第84行补充代码，通过标签名获取input元素。

index.html 
  1. <!DOCTYPE HTML>
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  5. <title>JavaScript</title>  
  6. </head>  
  7. <body>  
  8.  
  9.         <form name="Input">
  10.             <table align="center" width="500px" height="50%" border="1">
  11.                 <tr>
  12.                     <td align="center" width="100px">
  13.                         学号:
  14.                     </td>
  15.                     <td align="center" width="300px">
  16.                         <input type="text" id=userid name="user" onblur="validate();">
  17.                         <div id=usermsg></div>
  18.                     </td>
  19.                 </tr>
  20.                 <tr>
  21.                     <td align="center" width="100px">
  22.                         姓名:
  23.                     </td>
  24.                         <td align="center">
  25.                         <input type="text" name="name">
  26.                     </td>
  27.                 </tr>
  28.                 <tr>
  29.                     <td align="center" width="%45">
  30.                         性别:
  31.                     </td>
  32.                     <td align="center">
  33.                         <input type="radio" name="sex" value="男">
  34.                         男
  35.                         <input type="radio" name="sex" value="女">
  36.                         女
  37.                     </td>
  38.                 </tr>
  39.                 <tr>
  40.                     <td align="center" width="30%">
  41.                         年龄:
  42.                     </td>
  43.                     <td align="center" width="300px">
  44.                         <input type="text" name="age">
  45.                     </td>
  46.                 </tr>
  47.                 <tr>
  48.                     <td align="center" width="100px">
  49.                         地址:
  50.                     </td>
  51.                     <td align="center" width="300px">
  52.                         <input type="text" name="addr">
  53.                     </td>
  54.                 </tr>
  55.  
  56.             </table>
  57.         </form>
  58.         <h1 id="myHead" onclick="getValue()">
  59.             看看三种获取节点的方法?
  60.         </h1>
  61.         <p>
  62.             点击标题弹出它的值。
  63.         </p>
  64.         <input type="button" onclick="getElements()"
  65.             value="看看name为sex的节点有几个?" />
  66.         <Br>
  67.         <input type="button" onclick="getTagElements()"
  68.             value="看看标签名为input的节点有几个?" />
  69.  
  70.      <script type="text/javascript">
  71.          function getValue()
  72.           {
  73.  
  74.               alert(myH.innerHTML)
  75.           }
  76.           function getElements()
  77.           {
  78.  
  79.               alert(myS.length);
  80.           }
  81.  
  82.           function getTagElements()
  83.           {
  84.  
  85.               alert(myI.length);
  86.           }
  87.  
  88.      </script>        
  89.  
  90.     </body>
  91. </html>
下一节