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

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

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

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

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

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

input标签就像人的类别。

name属性就像人的姓名。

id属性就像人的身份证。

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

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

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

注意： 区别大小写。

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  5.     <title>无标题文档</title>
  6. </head>
  7.  
  8. <body>
  9. <form>
  10.     请选择你爱好:<br>
  11.     <input type="checkbox" name="hobby" id="hobby1"> 音乐
  12.     <input type="checkbox" name="hobby" id="hobby2"> 登山
  13.     <input type="checkbox" name="hobby" id="hobby3"> 游泳
  14.     <input type="checkbox" name="hobby" id="hobby4"> 阅读
  15.     <input type="checkbox" name="hobby" id="hobby5"> 打球
  16.     <input type="checkbox" name="hobby" id="hobby6"> 跑步 <br>
  17.     <input type="button" value="全选" onclick="checkall();">
  18.     <input type="button" value="全不选" onclick="clearall();">
  19.  
  20.     <p>请输入您要选择爱好的序号，序号为1-6:</p>
  21.     <input id="wb" name="wb" type="text">
  22.     <input name="ok" type="button" value="确定" onclick="checkone();">
  23. </form>
  24. <script type="text/javascript">
  25.     function checkall() {
  26.         var hobby = document.getElementsByTagName("input");
  27.         for (var i = 0; i < hobby.length; i++) {
  28.             hobby[i].checked = true;
  29.  
  30.         }
  31.  
  32.     }
  33.     function clearall() {
  34.         var hobby = document.getElementsByName("hobby");
  35.         for (var i = 0; i < hobby.length; i++) {
  36.             hobby[i].checked = false;
  37.         }
  38.     }
  39.     function checkone() {
  40.         clearall();
  41.         var j = document.getElementById("wb").value;
  42.         var hody=document.getElementsByName("hobby");
  43.         if(parseInt(j)<1|| parseInt(j)>6){
  44.             alert("请输入1到6之前的数字");
  45.         }else{
  46.             var a=parseInt(j);
  47.             hody[a-1].checked=true;
  48.         }
  49.     }
  50.  
  51. </script>
  52. </body>
  53. </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. [js插件]学习Highcharts

    引言 放了三天假,在家闲着没事,做了一个个人记账的web应用程序,其中一块就是数据统计的功能,也就学习了一下Highcharts. Highcharts Highcharts 是一个用纯JavaScr ...

  2. Java：泛型在编译时会被檫除，Eclipse 如何给出智能提示？

    背景 Java 的泛型是一种语法糖,编译时会被“檫除”,参考文章:http://docs.oracle.com/javase/tutorial/java/generics/,如果没有源代码,Eclip ...

  3. Go -- 调用dll库

    package main import ( "syscall" "unsafe" ) func main(){ h, err := syscall.LoadLi ...

  4. SVM初学

    一.            一点基础数学知识 如今硕士都快毕业了,反而将自己的很多数学知识忘的几乎相同了.所以.如今决心再捡起来.以补齐自己的数学短板.为以后的研究做好铺垫吧.如今结合自己学习SVM. ...

  5. 最新office2003密钥

    Microsoft Office Professional Edition 2003GWH28-DGCMP-P6RC4-6J4MT-3HFDY Office2003序列号注册码sn: WFDWY-XQ ...

  6. Qt 事件处理机制 （上篇）

    本篇来介绍Qt 事件处理机制 .深入了解事件处理系统对于每个学习Qt人来说非常重要,可以说,Qt是以事件驱动的UI工具集. 大家熟知Signals/Slots在多线程的实现也依赖于Qt的事件处理机制. ...

  7. 常见文本框提示css技巧

    很多时候会碰到那个的表单 一般我们做文字提醒功能时会在value处直接写上,现在总结一个比较好的方法直接上代码: html: <dl class="login_from"&g ...

  8. java.lang.IllegalArgumentException:Document base ……does not exist or is not a readable directory错误的解决方案

    关于Tomcat的 Document base ……does not exist or is not a readable directory错误 java.lang.IllegalArgumentE ...

  9. Easyui 判断某个Div 里的表单项是否验证通过.

    var isValid = $("#divId").Form("validate"); if( isValid ){ alert("验证通过" ...

  10. UNIX网络编程学习笔记：值-结果（value-result）参数

    前言 当把套接口地址结构传递给套接口函数时,总是通过指针来传递的,即传递的是一个指向结构的指针.结构的长度也作为参数来传递,其传递的方式取决于结构的传递方向:从进程到内核,还是从内核到进程. 1.从进 ...