慕课网

第1章系好安全带,准备启航
编程：1-1 让你认识JS
编程：1-2 编程练习

第10章编程挑战
编程：10-1 编程挑战

getElementsByTagName()方法

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

语法:

document.getElementsByTagName(Tagname)

说明:

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

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

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

任务

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

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

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

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

?不会了怎么办: 1. var myH=document.getElementById("myHead");

2. var myS=document.getElementsByName("sex");

3. var myI = document.getElementsByTagName("input");

index.html

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>JavaScript</title> </head> <body> <form name="Input"> <table align="center" width="500px" height="50%" border="1"> <tr> <td align="center" width="100px"> 学号: </td> <td align="center" width="300px"> <input type="text" id=userid name="user" onblur="validate();"> <div id=usermsg></div> </td> </tr> <tr> <td align="center" width="100px"> 姓名: </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="30%"> 年龄: </td> <td align="center" width="300px"> <input type="text" name="age"> </td> </tr> <tr> <td align="center" width="100px"> 地址: </td> <td align="center" width="300px"> <input type="text" name="addr"> </td> </tr> </table> </form> <h1 id="myHead" onclick="getValue()"> 看看三种获取节点的方法? </h1> <p> 点击标题弹出它的值。 </p> <input type="button" onclick="getElements()" value="看看name为sex的节点有几个?" /> <Br> <input type="button" onclick="getTagElements()" value="看看标签名为input的节点有几个?" /> <script type="text/javascript"> function getValue() { alert(myH.innerHTML) } function getElements() { alert(myS.length); } function getTagElements() { alert(myI.length); } </script> </body> </html>

写笔记

公开笔记

提交

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

9-3 getElementsByTagName()方法

getElementsByTagName()方法

任务

写笔记

收藏课程后，能更快找到我哦～