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

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. mmap函数使用

    UNIX网络编程第二卷进程间通信对mmap函数进行了说明.该函数主要用途有三个:1.将一个普通文件映射到内存中,通常在需要对文件进行频繁读写时使用,这样用内存读写取代I/O读写,以获得较高的性能:2. ...

  2. 【spring boot】启动类启动 错误: 找不到或无法加载主类 com.codingapi.tm.TxManagerApplication 的解决方案

    导入的一个外部的spring boot项目,运行启动类,出现错误:找不到或无法加载主类 com.codingapi.tm.TxManagerApplication 解决方案: 将所有错误处理完成后,再 ...

  3. Silverlight：《Pro Silverlight5》读书笔记 之 Layout

    Layout The Layout Containers The Panel Background By default, the Background of a layout panel is se ...

  4. mysql -- 用索引应避免空值

    由于数据库的复杂性,以讹传讹的空间非常大,快赶上中医养生了.避免使用 NULL 的理由,在高性能MySQL里有提到一段.建议大家多读些书,少看网上的奇技淫巧.特意把书翻出来摘录了下以供参考: 要尽量避 ...

  5. C#调用API向外部程序发送数据

    C#调用API向外部程序发送数据 最近有可能要做一个项目.在项目中有这么一个功能,在A程序中调用B程序,同时在A程序中进行登陆后,要将A程序的登录名和密码自动填充到B程序的登陆对话框中,这样B程序就不 ...

  6. Latex中为作者添加多个单位属性（IEEE模板）

    \author{ \IEEEauthorblockN{name1 name1\IEEEauthorrefmark{1}\IEEEauthorrefmark{2},  name2 name2\IEEEa ...

  7. JAVA Selenium PHONCOMJS 获取js动态生成完整网页

    首先需要在maven的pom.xml中包含以下依赖 <dependency> <groupId>com.github.detro</groupId> <art ...

  8. 【转】svn 的开发目录结构和流程

    原文: https://blog.csdn.net/iteye_15570/article/details/82548132 ------------------------------------- ...

  9. IntelliJ IDEA 插件开发视频教程

    IntelliJ IDEA 插件开发视频教程 学习了:http://wiki.jikexueyuan.com/project/intellij-idea-tutorial/plugins-develo ...

  10. angularjs中ng-repeat的使用

    第一个例子:使用ng-repeat最简单的例子 <html ng-app="myApp"> <head> <title>angularjs-de ...