每一个HTML元素都使用id来进行一个标注，随后可以通过document.getElementById(“ID名称”)取得指定的ID元素对象，取得元素对象之后就可以对其进行操作。

但是document.getElementById()只能取得一个元素信息。

范例：观察如下代码

event1.html

<!doctype html>

<html lang="zh-CN">

    <head>

        <meta charset="utf-8">

        <meta name="description" content=event.html"">

        <meta name="keywords" content="event,html,js">

        <title>javascript的程序开发之事件处理</title>

        <script type="text/javascript" src="event1.js"></script>

    </head>

    <body>

        <div id="infoTab">

            <table border="1" cellPadding="5" cellspacing="0" bgcolor="F2F2F2" width="50%">

            <tr id="infoTr">

                <td>姓名</td>

                <td>年龄</td>

                <td>学历</td>

            </tr>

            <tr id="infoTr">

                <td>张三</td>

                <td>20</td>

                <td>小学</td>

            </tr>

            <tr id="infoTr">

                <td>李四</td>

                <td>21</td>

                <td>初中</td>

            </tr>

            <tr id="infoTr">

                <td>王五</td>

                <td>22</td>

                <td>高中</td>

            </tr>

            <tr id="infoTr">

                <td>赵六</td>

                <td>23</td>

                <td>大学</td>

            </tr>

        </table>

        </div>

    </body>

</html>

此时代码之中，最为方便的做法是所有的行都是用了一个id标注”id=infoTr”

范例：不完整的程序，每次只能单独改变一个单元格的高亮色

event1.js

/**

  *obj: 要改变颜色的对象

  *color: 要改变成的颜色

*/

function changeColor (obj,color) {

    if (obj != undefined) {

        obj.bgColor = color;

    };

}

window.onload = function(){  //动态的绑定事件

    //取出tr元素对象

    var trObj = document.getElementById('infoTr');   //只能给一个tr绑定事件，因为id是唯一的

    //绑定鼠标进入事件

    trObj.addEventListener('mouseover',function(){

        changeColor(this,'red');

    },false);

    //绑定鼠标离开事件

    trObj.addEventListener('mouseout',function(){

        changeColor(this,'F2F2F2');

    },false);

}

效果是：当鼠标只有进入第一个单元格时，高亮色成了红色，离开就变为原来的颜色

分析：本程序使用了“document.getElementById(“infoTr”)”取得了id对象，但是在代码中对于这个“infoTr”的Id值有多个，而document.getElementByiD(“infoTr“)，只能够取得第一个，多以如果要想取得全部，则应该采用document.all(“iD”)形式完成(指的是id有重复的时候),返回的是对象数组。

范例：完整的程序，可以改变所有单元格的高亮色

event1.js

/**

  *obj: 要改变颜色的对象

  *color: 要改变成的颜色

*/

function changeColor (obj,color) {

    if (obj != undefined) {

        obj.bgColor = color;

    };

}

window.onload = function(){  //动态的绑定事件

    //取出tr元素对象数组

    var trObj = document.all('infoTr');    //给所有的tr绑定事件,通过id取出的是一个对象数组

    for (var i = 0; i < trObj.length; i++) {

        //绑定鼠标进入事件

        trObj[i].addEventListener('mouseover',function(){

            changeColor(this,'red');

        },false);

        //绑定鼠标离开事件

        trObj[i].addEventListener('mouseout',function(){

            changeColor(this,'F2F2F2');

        },false);

    };

}

效果是：当鼠标进入任意一个单元格时，高亮色成了红色，离开就变为原来的颜色

 

　　如果使用DOM解析之后会有更加方便的做法，但是现阶段一定要记住，只能够依靠id取得内容。如果id只有一个，就使用document.getElementById(“iD”)返回单个对象；如果使用document.all(“iD”)，就返回一个对象数组。

JavaScript：通过id来进行元素的取得的更多相关文章

  1. JavaScript通过ID获取元素坐标

    JavaScript通过ID获取元素坐标 function getElementPos(elementId) {    var ua = navigator.userAgent.toLowerCase ...

  2. Jquery取得iframe中元素的几种方法Javascript Jquery获取Iframe的元素、内容或者ID

    query取得iframe中元素的几种方法 在iframe子页面获取父页面元素代码如下: $('#objId', parent.document);// 搞定... 在父页面 获取iframe子页面的 ...

  3. 用Javascript动态添加删除HTML元素实例 (转载)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 定时5秒之后驻留在元素ID为content元素的内容

    如果我只能刷新一个特定的页面的一部分,这将是很大的,例如:仪表盘上的交通灯显示系统状态. 这是很容易通过使用jQuery JavaScript库,只刷新页面的一部分.一旦我们纳入我们的页面的jQuer ...

  5. JavaScript获取HTML DOM节点元素详解(转)

    在Web运用程序特别是Web 2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式.内容等.如何获取要更新的元素,是首先要处理的疑问. 51CTO推荐阅读:JavaScript DOM文档 ...

  6. 每天一个JavaScript实例-从一个div元素删除一个段落

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. JavaScript通过ID和name设置样式

    JavaScript通过ID和name设置样式 1.说明 (1)根据所提供的元素的id值,返回对该元素的引用或节点 document.getElementById("tr_th") ...

  8. 通过class和id获取DOM元素的区别

    1.通过id获取DOM元素的方法:document.getElementById("id名") 2.通过class获取DOM元素的方法:document.getElementsBy ...

  9. Jquery下控制backgroundPosition位置的问题/jquery查找data id相等的元素

    1:想通过控制backgroundPosition 来实现动态效果: $(this).animate({"background-positionY":-13},1); //但是火狐 ...

  10. 在jquery中怎么使用css类名和id来获取元素？

    在jquery中,你可以很容易的使用CSS类名和id类获取元素. 例如: 1.ID:#id $('#idA')——选择id为idA的所有元素,不管元素的标签名如何. $('div#idA')——选择i ...

随机推荐

  1. [转载]git 忽略某些文件

    项目中经常会生成一些Git系统不需要追踪(track)的文件.典型的是在编译生成过程中 产生的文件或是编程器生成的临时备份文件.当然,你不追踪(track)这些文件,可以 平时不用"git ...

  2. string.h文件中函数用法

    下面为string.h文件中函数的详细用法: strcpy函数名:strcpy功 能: 拷贝一个字符串到另一个用 法: char *strcpy(char *destin, char *source) ...

  3. hdu I NEED A OFFER!

    这道题是道很基本的0/1背包的问题,为了使解题很简单一点,可以将题目中要求的最大概率转换成不能录取的最小概率,这样1-dp[n]即为至少有一个offer的最大概率.状态方程 为:dp[j]=min{d ...

  4. [转]在Entity Framework中使用LINQ语句分页

    本文转自:http://diaosbook.com/Post/2012/9/21/linq-paging-in-entity-framework 我们知道,内存分页效率很低.并且,如果是WebForm ...

  5. [转]禁用和启用链接(a元素|LinkButton)的js方法

    本文转自:http://www.cnblogs.com/beiguren/archive/2010/05/24/1742926.html 在Asp.net中,有时候需要禁用掉一个a链接元素. 在服务器 ...

  6. windows上在linux客户端上传小文件lrzsz

    yum install lrzsz 即可 rz上传,会打开本地图形化界面直接上传 基于centos系统,其他系统请找对应 的源码包编译 一下

  7. MySQL 日期和时间戳互相转换

    ① 时间戳转换成日期 FROM_UNIXTIME 例如: 数据表中 invest_time 存储的是时间戳,如 1429063399 使用 FROM_UNIXTIME 可以把时间戳转换为日期: sel ...

  8. Web 在线文件管理器学习笔记与总结（11）获取文件夹信息 （12）返回上一级操作

    (11)获取文件夹信息 文件夹没有修改操作. index.php: <?php require 'dir.func.php'; require 'file.func.php'; require ...

  9. phpstorm配置svn

    phpstorm配置svn 发表于3年前(2013-02-28 10:50)   阅读(8249) | 评论(0) 4人收藏此文章, 我要收藏 赞1 9月19日成都 OSC 源创会正在报名,送机械键盘 ...

  10. mysql读写分离(PHP类)

    mysql读写分离(PHP类) 博客分类: php mysql   自己实现了php的读写分离,并且不用修改程序 优点:实现了读写分离,不依赖服务器硬件配置,并且都是可以配置read服务器,无限扩展 ...