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

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 2896 病毒侵袭 【AC自动机】

    HDU 2222 仅仅求出了和文本串匹配的模式串个数,本题要求求出匹配的模式串的编号. 不同的部分在代码中的注释部分. #include <cstdio> #include <cst ...

  2. Go -- 调用dll库

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

  3. html端编码规范

    理想的方式是让HTML只用于定义内容呈现的结构,让CSS控制内容呈现的样式,而所有功能的实现定义在JavaScript中

  4. jquery动态创建表格

    1.代码实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  5. 如何修改容器内的/etc/resolv.conf

    源由不表,暂且略过. 直接说workaround. 因为openshift的模式,/etc/resolv.conf是在pod生成的时候插入的,写入的是宿主机的ip作为dns的寻址,如果需要修改的化,需 ...

  6. 运算符重载,浅拷贝(logical copy) ,vs, 深拷贝(physical copy)，三大件（bigthree problem）

    一般的我们喜欢这样对对象赋值: Person p1;Person p2=p1; classT object(another_object), or    A a(b); classT object = ...

  7. SQL Alias

    There are two types of aliases that are used most frequently in SQL command: which is column alias a ...

  8. 设计模式（一）简单工厂(创建型)(Java&&PHP)

    面向对象设计的基本原则 单一职责系统中的每一个对象应该只有一个单独的职责,所有对象关注的应该是自身职责的完成. 基本思想:高内聚,低耦合. 开闭原则一个对象对扩展开放,对修改关闭.基本思想:对类的改动 ...

  9. 步步为营_Android开发课[3]_Activity学习

    Focus on technology, enjoy life! -- QQ:804212028 浏览链接:http://blog.csdn.net/y18334702058/article/deta ...

  10. JAVA设计模式之 訪问者模式【Visitor Pattern】

    一.概述 訪问者模式是一种较为复杂的行为型设计模式,它包括訪问者和被訪问元素两个主要组成部分.这些被訪问的元素通常具有不同的类型,且不同的訪问者能够对它们进行不同的訪问操作.在使用訪问者模式时,被訪问 ...