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

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. mysql_fetch_assoc 跟mysql_fetch_array 有什么区别？

    mysql_fetch_assoc 得到的是关联数组. Array ( [0] => Array ( [title] => 特价9.9包邮 EFOLAR/依芙拉 BB粉润腮红粉 饼 蘑菇 ...

  2. setTimeOut传參数

    function blink(e_Id, second) {var soccer = document.getElementById(e_Id); soccer.style.visibility = ...

  3. 解决用户自生成meta导入kylin后报错问题Can not deserialize instance of java.lang.String[] out of VALUE_STRING token

    报错栈: -- ::, ERROR [http-bio--exec-] cube.CubeManager: : Error during load cube instance, skipping : ...

  4. [转]Oracle dblink调用函数报ORA-00904 标识符无效

    新建oracle的database link时,提示错误“ORA-12169: TNS: 指定为连接标识符的 Net 服务名太长”, 网上查了下,是因为目标oracle是集群,连接字符串过长,超过25 ...

  5. openssl https 单向认证连接成功示例

    研究这个玩意也有几天的时间了,刚学C 因为不熟悉编译折腾了不少时间,终于弄通了,发个随笔给研究openssl https的同学一点提示吧. 环境: ========================== ...

  6. Log4j使用指南

    1         概述 本文档是针对Log4j日志工具的使用指南.包括:日志介绍.日志工具介绍.Log4j基本使用.Log4j的高级使用.Spring与log4j的集成等.并进行了举例说明. 本文档 ...

  7. TestNG的组測试和组中组測试

    在编写測试的过程中,我们常常遇到仅仅想运行个别或者某一部分/某一类型的測试用例,这时我们能够使用TestNG的分组測试方法 分组測试在配置时.TestNG运行的原则是:仅仅保留最小集合进行运行 看代码 ...

  8. 【Linux】shell字符串分割、数组访问、条件判断

    参考资料: shell字符串分割再循环:http://www.shangxueba.com/jingyan/1633455.html linux shell中 if else以及大于.小于.等于逻辑表 ...

  9. HDU 1710 Binary Tree Traversals(二叉树）

    题目地址:HDU 1710 已知二叉树先序和中序求后序. #include <stdio.h> #include <string.h> int a[1001], cnt; ty ...

  10. ansi 控制码表及颜色代码

    颜色代码: QUOTE: 字背景颜色范围: 40--49                  字颜色: 30--39         40: 黑                          30: ...