封装自己的元素获取方法，使元素获取变得简便

注意：1、应该要防止定义的被重写，可将同名的重新定义

　　   2、可将封装的对象置为全局对象，方便使用

通过id查找单个元素

封装方式：

//通过id查找单个元素

(function (document){

    //防止覆盖

    var _overwrite = window._,

        _;

    _ = {

        $ : function(id){

            return typeof id === "string" ? document.getElementById(id) : id;

        }

    }

    //将_置为全局对象

    window._ = _;

})(document);

测试：

<!DOCTYPE html>

<html>

<body>

    <div id = "cloud">The cloud is beautiful</div>

</body>

<script><!--

(function (document){

    //防止覆盖

    var _overwrite = window._,

        _;

    _ = {

        $ : function(id){

            return typeof id === "string" ? document.getElementById(id) : id;

        }

    }

    //将_置为全局对象

    window._ = _;

})(document);

var cloud = _.$("cloud");

alert(cloud.innerHTML); //The cloud is beautiful

--></script>

</html>

通过ID获取多个元素

封装方式：

//通过id查找一个或者多个元素

(function (document){

    //防止覆盖

    var _overwrite = window._,

        _;

    _ = {

        $ : function(/*ids....*/){

            var elements = {},

                    id,

                    elt;

            for(var i = 0, len= arguments.length; i < len; i++){

                id = arguments[i];

                elt = document.getElementById(id);

                if(elt === null){

                    throw new Error("No element with id:" + id);

                }

                if(len === 1){

                    return elt;

                }

                elements[id] = elt;

            }

            return elements;

        }

    }

    //将_置为全局对象

    window._ = _;

})(document);

测试：

 <div id = "cloud">The cloud is beautiful</div>

 <div id = "sea">The white white sea</div>

//获取单个元素

var cloud = _.$("cloud");

alert(cloud.innerHTML);//The cloud is beautiful

//获取多个元素

var all = _.$("cloud", "sea");

alert(all.cloud.innerHTML + "," + all.sea.innerHTML); //The cloud is beautiful,The white white sea

document.getElementById的简便方式的更多相关文章

  1. JavaScript实现Tab标签页切换的最简便方式

    转载请注明出处:http://www.cnblogs.com/-867259206/p/5664896.html 先说一下最土的一种方法: Html: <div class="tab- ...

  2. document.getElementById()与 $()区别

    document.getElementById()返回的是DOM对象,而$()返回的是jQuery对象 什么是jQuery对象? ---就是通过jQuery包装DOM对象后产生的对象.jQuery对象 ...

  3. jquery中的$("#id")与document.getElementById("id")的区别

    以前一直认为jquery中的$("#id")和document.getElementByIdx_x("id")得到的效果是一样的,今天做特效的时候才发现并不是这 ...

  4. 在使用document.getElementById('xxx').files[0]时，关于计算图片大小

    在使用文件上传属性时,一直好奇图片上传的大小时如何计算的,最近在使用中认识到的计算方式:  首先,图片大小的存储基本单位是字节(byte).每个字节是由8个比特(bit)组成.所以,一个字节在十进制中 ...

  5. document.getElementById 和 document.getElementsByClassName获取DOM元素的区别

    想必小伙伴们对于 JS 获取DOM的几种方法早已烂熟于心,了然于胸,   尤其是 document.getElementById 和 document.getElementsByClassName, ...

  6. 解决 jQuery 实现父窗口的问题 如window.parent.document.getElementById().innerHTML

    因为先前遇到的问题,所以我考虑采用 IFRAME 来隔离不同的脚本,从而实现我需要的效果. 在框架中,我用 JavaScript 获取 JSON 数据,组织成 HTML 代码,最后将其填充至上层文档的 ...

  7. Id.value与document.getElementById("Id").value的区别

    如果标签Id在Form表单里面的话,直接Id.value就不能用了,而是要用Form.Id.value来取值或设置值 所以最好用document.getElementById("Id&quo ...

  8. jQuery中，$('#main') 与 document.getElementById('main')是什么样的关系-转

    $('#main')[0]和document.getElementById('main')两个一模一样.解释:$('#main'):是一个jquery写法,#main是一个过滤器表示方法,表示查找一个 ...

  9. 【Asp.Net】document.getElementById 的属性介绍

    document.getElementById("id").style.xxx可以设置指定ID的控件的属性值. 主要支持以下一些属性设置: 盒子标签和属性对照 CSS语法(不区分大 ...

随机推荐

  1. 9.27 noip模拟试题

    工资 (money/money.in/money.out) 时限1000ms 内存256MB 聪哥在暑假参加了打零工的活动,这个活动分为n个工作日,每个工作日的工资为Vi.有m个结算工钱的时间,聪哥可 ...

  2. 我是一块cpu 《转载》

    我是一块cpu,原装intel,在一台普通的台式计算机里供职.我有个小弟是内存,我要靠他时时刻刻陪伴我工作,其实有时候我并不是没有某某地址的资料,而是懒得翻--麻烦. 还有一个老大哥叫bios,每次那 ...

  3. 与数据库打交道的Adapter----SimpleCursorAdapter

    http://www.cnblogs.com/wenjiang/p/3196486.html 程序员是这个世界上最神奇的职业,因为几乎所有其他职业的人都能转到该行来,只要他智力正常,有接受过正规的编程 ...

  4. AndroidManifest.xml中data标签中所有属性的含义

    属性(ATTRIBUTES): android:host 这个属性用户定义URI授权的主机部分,除非给过滤器也指定了<data>元素的scheme属性,否则这个属性没有意义. 注意:在An ...

  5. eclipse(myEclipse) 配置maven项目

    工作中在myeclipse中导入maven工程后,在pom.xml文件目录执行了mvn eclipse:eclipse 后,发现项目中缺少"Maven Dependencies"目 ...

  6. 共享受限资源，Brian的同步规则

    说明:如果一个变量是boolean,则此变量是原子性的,即赋值和返回值简单的操作在发生时没有中断的可能. 递增不是原子性炒作. 解决共享资源竞争: 1. 通过加锁,锁语句会产生相互排斥的效果,此种机制 ...

  7. 十二、C# 委托与Lambda表达式(匿名方法的另一种写法)

    委托与Lambda表达式   1.委托概述 2.匿名方法 3.语句Lambda 4.表达式Lambda 5.表达式树   一.委托概述 相当于C++当中的方法指针,在C#中使用delegate 委托来 ...

  8. Tomcat设置最佳线程数总结

    最佳线程数: 性能压测的情况下,起初随着用户数的增加,QPS会上升,当到了一定的阀值之后,用户数量增加QPS并不会增加,或者增加不明显,同时请求的响应时间却大幅增加.这个阀值我们认为是最佳线程数. 为 ...

  9. cuda中时间用法

    转载:http://blog.csdn.net/jdhanhua/article/details/4843653 在CUDA中统计运算时间,大致有三种方法: <1>使用cutil.h中的函 ...

  10. 【BZOJ1012】【树状数组求区间最值】最大数maxnumber

    Description 现在请求你维护一个数列,要求提供以下两种操作: 1. 查询操作.语法:Q L 功能:查询当前数列中末尾L个数中的最大的数,并输出这个数的值.限制:L不超过当前数列的长度. 2. ...