获取DOM对象的几种扩展及简写


Posted in Javascript onOctober 09, 2006

参照prototype.js中getElementsByClassName的思想,扩展出几种在DEOM操作中可经常用到的获取对象的方法,使用获取对象变得更方便、更精确了:
document.getElementsByClassName = function(className,oBox) {
//适用于获取某个HTML区块内部含有某一特定className的所有HTML元素
this.d= oBox || document;
var children = this.d.getElementsByTagName('*') || document.all;
var elements = new Array();
for (var ii = 0; ii < children.length; ii++) {
var child = children[ii];
var classNames = child.className.split(' ');
for (var j = 0; j < classNames.length; j++) {
if (classNames[j] == className) {
elements.push(child);
break;
}
}
}
return elements;
}

document.getElementsByType = function(sTypeValue,oBox) {
//适用于获取某个HTML区块内部同属于某一特定type的所有HTML元素,如:input,script,link等等
this.d= oBox || document;
var children = this.d.getElementsByTagName('*') || document.all;
var elements = new Array();
for (var ii = 0; ii < children.length; ii++) {
if (children[ii].type == sTypeValue) {
elements.push(children[ii]);
}
}
return elements;
}

function $() {
var elements = new Array();
for (var ii = 0; ii < arguments.length; ii++) {
var element = arguments[ii];
if (typeof element == 'string')
element = document.getElementById(element);
if (arguments.length == 1)
return element;
elements.push(element);
}
return elements;
}

$Cls = function (s,o){
return document.getElementsByClassName(s,o);
};

$Type = function (s,o){
return document.getElementsByType(s,o);
};

$Tag = function (s,o){
this.d=o || document;
return this.d.getElementsByTagName(s);
};

$Name = function (s){ //通过name的方式只能针对整个document而言,不能为其限定范围
return document.getElementsByName(s);
}; 

Javascript 相关文章推荐
JavaScript中判断页面关闭、页面刷新的实现代码
Aug 27 Javascript
jfinal与bootstrap的登录跳转实战演习
Sep 22 Javascript
轻松实现jquery手风琴效果
Jan 14 Javascript
解决前端跨域问题方案汇总
Nov 20 Javascript
Vue.JS入门教程之处理表单
Dec 01 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
Dec 18 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
Oct 17 Javascript
vue使用中的内存泄漏【推荐】
Jul 10 Javascript
vue中Axios的封装与API接口的管理详解
Aug 09 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
Nov 30 Javascript
JavaScript中.min.js和.js文件的区别讲解
Feb 13 Javascript
Node.js API详解之 dns模块用法实例分析
May 15 Javascript
js几个不错的函数 $$()
Oct 09 #Javascript
使用Javascript和DOM Interfaces来处理HTML
Oct 09 #Javascript
激活 ActiveX 控件
Oct 09 #Javascript
自动更新作用
Oct 08 #Javascript
许愿墙中用到的函数
Oct 07 #Javascript
解放web程序员的输入验证
Oct 06 #Javascript
通过ifame指向的页面高度调整iframe的高度
Oct 05 #Javascript
You might like
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
php将HTML表格每行每列转为数组实现采集表格数据的方法
2015/04/03 PHP
PHP获取input输入框中的值去数据库比较显示出来
2016/11/16 PHP
JavaScript中提前声明变量或函数例子
2014/11/12 Javascript
jquery实现可旋转可拖拽的文字效果代码
2016/01/27 Javascript
jQuery绑定事件的几种实现方式
2016/05/09 Javascript
深入理解JavaScript中的对象复制(Object Clone)
2016/05/18 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
2016/06/17 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
2016/07/09 Javascript
js中的关联数组与普通数组详解
2016/07/27 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
2017/04/24 jQuery
jQuery序列化后的表单值转换成Json
2017/06/16 jQuery
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
js 毫秒转天时分秒的实例
2017/11/17 Javascript
JavaScript中关于class的调用方法
2017/11/28 Javascript
在vue中使用jointjs的方法
2018/03/24 Javascript
AngularJS中的作用域实例分析
2018/05/16 Javascript
vue axios基于常见业务场景的二次封装的实现
2018/09/21 Javascript
Vue父组件如何获取子组件中的变量
2019/07/24 Javascript
[02:19]DOTA2女子战队FOX视频专访:希望更多美眉一起加入
2013/10/15 DOTA
使用python获取CPU和内存信息的思路与实现(linux系统)
2014/01/03 Python
Python入门篇之文件
2014/10/20 Python
举例讲解Linux系统下Python调用系统Shell的方法
2015/11/07 Python
[原创]python爬虫(入门教程、视频教程)
2018/01/08 Python
python多线程案例之多任务copy文件完整实例
2019/10/29 Python
python求绝对值的三种方法小结
2019/12/04 Python
friso美素佳儿官方海外旗舰店:荷兰原产原罐
2017/07/03 全球购物
大一期末自我鉴定
2013/12/13 职场文书
求职信标题怎么写
2014/05/26 职场文书
公司年终奖分配方案
2014/06/16 职场文书
幼儿园端午节活动方案
2014/08/25 职场文书
民主生活会发言材料
2014/10/20 职场文书
2014年政务公开工作总结
2014/12/09 职场文书
财务总监岗位职责
2015/02/03 职场文书
2016新年慰问信范文
2015/03/25 职场文书
会计岗位工作总结
2015/08/12 职场文书