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

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主从架构的复制原理及配置

    1. 复制概述 1.1 mysql支持的复制类型 1.2 复制解决的问题 1.3 复制如何工作 2. 2 复制配置 2.1创建复制帐号 2.2拷贝数据 2.3配置master 2.4配置slave 2 ...

  2. django单表操作 增 删 改 查

    一.实现:增.删.改.查 1.获取所有数据显示在页面上 model.Classes.object.all(),拿到数据后,渲染给前端;前端通过for循环的方式,取出数据. 目的:通过classes(班 ...

  3. Unity3d笔试题大全

    1.       [C#语言基础]请简述拆箱和装箱. 答: 装箱操作: 值类型隐式转换为object类型或由此值类型实现的任何接口类型的过程. 1.在堆中开辟内存空间. 2.将值类型的数据复制到堆中. ...

  4. hdu5297 Y sequence(容斥原理+迭代)

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=5297 题意:给定整数n和整数r,在1.2.3.4.5.......的序列中删掉能够开2次方的数,3次方的数 ...

  5. 近200篇机器学习&深度学习资料分享（含各种文档，视频，源码等）(1)

    原文:http://developer.51cto.com/art/201501/464174.htm 编者按:本文收集了百来篇关于机器学习和深度学习的资料,含各种文档,视频,源码等.而且原文也会不定 ...

  6. 用CSS下划线距离

    但在我在CSS中新加了TEXT-DECORATION: underline; 后发现下划线离文本太近了,很难看. 代码一: a { text-decoration: none; background: ...

  7. eclipse因为js validator无法通过导致build workspace失败

    eclipse编译工程时时会validator js的errors和warnings,对于一些小型的项目,这当然没任何问题. 但是对于那些拥有大量js文件的web工程,js warnings通常会达到 ...

  8. Android高手进阶篇4-实现侧滑菜单框架，一分钟集成到项目中

    先来看下面的这张效果图: 上面这张效果图是百度影音的,现在在Android上很流行,最初是由facebook自己实现的,而后各大应用有跟风之势,那么这种侧滑效果是如何实现的呢? 网上现在这种侧滑菜单的 ...

  9. JAVA学习目录

    开发环境以及IDE准备相关: 1.JAVA环境搭建 2.初次使用IntelliJ IDEA 3.IntelliJ IDEA界面设置 4.IntelliJ IDEA快捷键介绍 SprintBoot系列: ...

  10. Unity3D 多人协作开发 环境搭建 笔记(场景合并)

    http://www.cnblogs.com/zhaoqingqing/p/3371120.html 说到多人协作开发,大家都会想到要使用版本控制工具来管理项目,当然最常用的要数SVN和Git了,但是 ...