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

注意: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. Java 原始数据类型转换

    在开发中经常遇到数据类型转换的问题,大多数都是拿来强制转换,强制转换可能会出现你意想不到的问题: int a = -1; 我们经过多重转换之后:int b = (int)(char)(byte) a ...

  2. RegistryKey 类

    表示 Windows 注册表中的项级节点. 此类是注册表封装. 继承层次结构 System.Object   System.MarshalByRefObject    Microsoft.Win32. ...

  3. PHP环境搭建所遇到的问题

    下午学校的机房搭建PHP组合包appserv开发环境的时候是没有任何问题的,但是到了自己的电脑上以后下砸的32位appserve一直无法正常由浏览器的localhos或者127.0.0.1 进入其ap ...

  4. Android Activity各启动模式的差异

    Activity共有四种启动模式:standard,singleTop,singleTask,singleInstance 为了方便描述和理解,布局文件.Manifest文件和各个java文件如下: ...

  5. Android Service初步学习的笔记

    1.Service的应用场景 条件:a.并不依赖于用户可视化界面(不是绝对的,如前台service就是与notification界面结合使用的)   b.具有较长时间的运行特性. service的应用 ...

  6. OC - 27.CATransition

    概述 简介 CATransition又称转场动画,是CAAnimation的子类,可以直接使用 转场动画主要用于为图层提供移入/移出屏幕的动画效果 转场动画常见的应用是UINavigationCont ...

  7. sublime text 几种常用插件

    1.docblockr  //文档注释 使用 /**  +tab 在函数前就可以   2.SublimeLinter 代码校验插件,支持多种语言,这个是主插件,如果想检测特定的文件需要单独下载   3 ...

  8. Python:函数定义

    #!/usr/bin/python3 #函数 def add(a,b): return a+b print("add(2,5) = ",add(2,5)) def add2(a,b ...

  9. 解决linux .so的链接时符号依赖问题

    问题描述 target: a.out SO:libmyfile.so 依赖描述: a.out: libmyfile.so libmyfile.so:  libssl.so.1.0.0 libssl.s ...

  10. jquery的select元素和option的相关操作

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