Document对象的使用：getElementById()和getElementsByTagName()方法的使用练习

来源：互联网发布：单片机控制蜂鸣器发声编辑：程序博客网时间：2024/04/30 11:16

1、查找并访问节点

你可以通过若干方法来查找您希望操作的元素：

（1）通过使用getElementById()和getElementsByTagName()方法

（2）通过使用一个元素节点的parentNode、firstChild以及lastChild属性

一、getElementsByName()

说明：

（1）查找给定name属性的所有元素，这个方法将返回一个节点集合，不再是一个具体的节点对象，也可以成为对象集合。

（2）这个集合可以作为数组来对待，length属性的值表示集合的个数。

（3）因为在html页面中，name不能唯一确定一个元素，所以这个方法的名称为getElementsByName而不是getElementByName。因为name属性名可以有多个。

案例：

example01.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>example01.html</title>  </head>   <body>        <div align="center">           <div id="head">               用户名：               <input type="text" name="uname" id="uname" value="pangli"/>           </div>           <div id="spr">               你喜欢的2012年春节联欢晚会的节目有哪些？<br/>               <hr color="red"/>               <input type="checkbox" name="fav" value="荆柯刺秦"/>荆柯刺秦               <input type="checkbox" name="fav" value="面试"/>面试               <input type="checkbox" name="fav" value="因为爱情"/>因为爱情               <input type="checkbox" name="fav" value="穿越"/>穿越                      </div>        </div>  </body></html><script type="text/javascript"><!--    //当窗体加载完毕后触发匿名函数    window.onload = function(){    //获取的是name="fav"的所有节点对象    var favs = document.getElementsByName("fav");    //遍历出节点的value值    for(var i=0;i<favs.length;i++){       //得到一个具体的节点       var fav = favs[i];       //注册事件       fav.onclick = function(){           //思考：弹出所有的你选择中的节目           alert("你难道真的喜欢这个节目:"+this.value);       }    }}//--></script>

二、 getElementsByTagName()

说明：

（1）查询给定标签名的所有元素

（2）因为在html页面中，标签名不是唯一的，所以返回值为节点的集合

（3）这个集合可以当做数组来处理，length属性为集合里所有元素的个数

（4）可以有两种形式来执行这个方法：

a) var elements = document.getElementsByTagName(tagName);

b) var elements = element.getElementsByTagName(tagName);

（5）从这两种方法可以看出持有这个方法的对象并不一定是整个文档对象(document)，也可以是某一个元素节点。

案例：

example02.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>example01.html</title>  </head>  <body>        <div align="center">           <div id="head">               用户名：               <input type="text" name="uname" id="uname" value="pangli"/>           </div>                       <div id="spr">               你喜欢的2012年春节联欢晚会的节目有哪些？<br/>               <hr color="red"/>               <input type="checkbox" name="fav" value="荆柯刺秦"/>荆柯刺秦               <input type="checkbox" name="fav" value="面试"/>面试               <input type="checkbox" name="fav" value="因为爱情"/>因为爱情               <input type="checkbox" name="fav" value="穿越"/>穿越           </div>        </div>  </body></html> <script type="text/javascript"><!--    //当窗体加载完毕后触发匿名函数    window.onload = function(){        //获取的是name="fav"的所有节点对象    var favs = document.getElementsByName("fav");        //遍历出节点的value值    for(var i=0;i<favs.length;i++){       //得到一个具体的节点       var fav = favs[i];       //注册事件       fav.onclick = function(){           //作业：弹出所有的你选择中的节目           alert("你难道真的喜欢这个节目:"+this.value);                  }    }    }//--></script>