以人来举例说明，人有能标识身份的身份证，有姓名，有类别(大人、小孩、老人)等。

1. ID 是一个人的身份证号码，是唯一的。所以通过getElementById获取的是指定的一个人。

2. Name 是他的名字，可以重复。所以通过getElementsByName获取名字相同的人集合。

3. TagName可看似某类，getElementsByTagName获取相同类的人集合。如获取小孩这类人，getElementsByTagName("小孩")。

把上面的例子转换到HTML中，如下:

<input type="checkbox" name="hobby" id="hobby1">  音乐

input标签就像人的类别。

name属性就像人的姓名。

id属性就像人的身份证。

getElementById   通过指定ID 获取元素。  是一个

getElementsByName   通过元素名称 name 属性 获取元素， 一组

getElementsByTayName  通过标签名 获取元素， 一组

注意： 区别大小写。

<!DOCTYPE HTML>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

    <title>无标题文档</title>

</head>

<body>

<form>

    请选择你爱好:<br>

    <input type="checkbox" name="hobby" id="hobby1"> 音乐

    <input type="checkbox" name="hobby" id="hobby2"> 登山

    <input type="checkbox" name="hobby" id="hobby3"> 游泳

    <input type="checkbox" name="hobby" id="hobby4"> 阅读

    <input type="checkbox" name="hobby" id="hobby5"> 打球

    <input type="checkbox" name="hobby" id="hobby6"> 跑步 <br>

    <input type="button" value="全选" onclick="checkall();">

    <input type="button" value="全不选" onclick="clearall();">

    <p>请输入您要选择爱好的序号，序号为1-6:</p>

    <input id="wb" name="wb" type="text">

    <input name="ok" type="button" value="确定" onclick="checkone();">

</form>

<script type="text/javascript">

    function checkall() {

        var hobby = document.getElementsByTagName("input");

        for (var i = 0; i < hobby.length; i++) {

            hobby[i].checked = true;

        }

    }

    function clearall() {

        var hobby = document.getElementsByName("hobby");

        for (var i = 0; i < hobby.length; i++) {

            hobby[i].checked = false;

        }

    }

    function checkone() {

        clearall();

        var j = document.getElementById("wb").value;

        var hody=document.getElementsByName("hobby");

        if(parseInt(j)<1|| parseInt(j)>6){

            alert("请输入1到6之前的数字");

        }else{

            var a=parseInt(j);

            hody[a-1].checked=true;

        }

    }

</script>

</body>

</html>

转:https://www.cnblogs.com/yjhua/p/4588917.html

区别getElementByID,getElementsByName,getElementsByTagName的更多相关文章

  1. JS中getElementByID,getElementsByName,getElementsByTagName的区别

    <input type="text" name="mynumber" id="mynum1" value="" / ...

  2. (6个name="hobby"的复选项，两个按钮)来区分三种方法的不同---区别getElementByID,getElementsByName,getElem

    <form>          请选择你爱好:<br>          <input type="checkbox" name="hobb ...

  3. getElementByID,getElementsByName,getElementsByTagName

    <input type="checkbox" name="hobby" id="hobby1"> 音乐 <input ty ...

  4. document.getElementById(), getElementsByname(),getElementsByClassName(),getElementsByTagName()方法表示什么以及其意义

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  5. 玩转DOM遍历——用NodeIterator实现getElementById，getElementsByTagName方法

    先声明一下DOM2中NodeIterator和TreeWalker这两类型真的只是用来玩玩的,因为性能不行遍历起来超级慢,在JS中基本用不到它们,除了<高程>上有两三页对它的讲解外,谷歌的 ...

  6. getElementById getElementsByName 赋值

      <script type="text/javascript">                            window.onload=function ...

  7. js82:CSS的Style，image的重定位，getElementById，getElementsByTagName，location.href

    原文发布时间为:2008-11-10 -- 来源于本人的百度文章 [由搬家工具导入] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...

  8. 认识DOM和一些方法

    认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...

  9. 二、JavaScript语言--JS基础--JavaScript进阶篇--DOM对象 控制HTML元素

    1.认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面 ...

随机推荐

  1. hdu 1272 小希的迷宫（java实现）

    小希的迷宫 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Subm ...

  2. c#面试3（选择题）

    1.下列有关基本类的大小不正确的是 A.int类型是4个字节 B.bool类型是1个字节 C.long类型是8个字节 D.char类型是一个字节 3.有关数组说法不正确的是 A.数组的内存是分配在栈中 ...

  3. serverbash漏洞修补日记——2014/09/30

    近期bash漏洞在网上闹得沸沸扬扬的,我也修补一下.以防万一. 须要用到的命令: 查看操作系统版本号:cat /etc/issue 查看bash版本号:bash -version 查看操作系统是64位 ...

  4. JNI字段描述符

    “([Ljava/lang/String;)V” 它是一种对函数返回值和参数的编码.这种编码叫做JNI字段描述符(JavaNative Interface FieldDescriptors).一个数组 ...

  5. js执行eval()抛出异常SyntaxError

    try{ eval("("+data+")"); }catch(err) { location.href = window.location.href; }

  6. GDALOpen 代码分析

    先来一句话,看了这么多GDAL的源代码,并不喜欢其C风格的烙印太重,还是更喜欢boost风格的简洁的现代C++风格.不过为了更好地应用GDAL,更深的定制它,还是需要将源代码看到底.因为GDAL毕竟是 ...

  7. [CF 295A]Grag and Array[差分数列]

    题意: 有数列a[ ]; 操作op[ ] = { l, r, d }; 询问q[ ] = { x, y }; 操作表示对a的[ l, r ] 区间上每个数增加d; 询问表示执行[ x, y ]之间的o ...

  8. 转：修改Android签名证书keystore的密码、别名alias以及别名密码

    转自:http://blog.k-res.net/archives/1671.html 二月 5, 2014  |  Posted by K-Res   之前在测试Eclipse ADT的Custom ...

  9. Cognos TM1_10.1.1服务端安装

    出于对bi行业的强大热爱,出于对cognos tm1的强大兴趣,于是就想研究一下Cognos TM1(table manager one),今天就分享一下自己微不足道研究成果,真可谓是tm1的九牛一毛 ...

  10. Hidden Markov Model Toolbox for Matlab

    官网:http://www.cs.ubc.ca/~murphyk/Software/HMM/hmm.html Download Click here. Unziping creates a direc ...