获取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的10个怪癖和秘密分享
Aug 28 Javascript
jquery 插件学习(二)
Aug 06 Javascript
简单的js图片轮换代码(js图片轮播)
May 06 Javascript
分享一些常用的jQuery动画事件和动画函数
Nov 27 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
Aug 19 Javascript
浅谈js中同名函数和同名变量的执行问题
Feb 12 Javascript
详解angular element()方法使用
Apr 08 Javascript
requireJS模块化实现返回顶部功能的方法详解
Oct 16 Javascript
点击按钮弹出模态框的一系列操作代码实例
Mar 29 Javascript
React中阻止事件冒泡的问题详析
Apr 12 Javascript
js+canvas实现简单扫雷小游戏
Jan 22 Javascript
JS前端轻量fabric.js系列之画布初始化
Aug 05 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常用代码
2006/11/23 PHP
codeigniter自带数据库类使用方法说明
2014/03/25 PHP
PHP简单获取及判断提交来源的方法
2016/04/22 PHP
使用ThinkPHP的自动完成实现无限级分类实例详解
2016/09/02 PHP
PHP类型约束用法示例
2016/09/28 PHP
心扬JS分页函数代码
2010/09/10 Javascript
JS将秒换成时分秒实现代码
2013/09/03 Javascript
jQuery实现的导航条切换可显示隐藏
2014/10/22 Javascript
javascript 面向对象封装与继承
2014/11/27 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
使用Vue CLI创建typescript项目的方法
2019/08/09 Javascript
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
2020/08/10 Javascript
修改Vue打包后的默认文件名操作
2020/08/12 Javascript
vue路由结构可设一层方便动态添加路由操作
2020/08/31 Javascript
[01:06]DOTA2小知识课堂 Ep.01 TP出门不要忘记帮队友灌瓶哦
2019/12/05 DOTA
python3读取MySQL-Front的MYSQL密码
2017/05/03 Python
python利用paramiko连接远程服务器执行命令的方法
2017/10/16 Python
python使用xpath中遇到:到底是什么?
2018/01/04 Python
Python实现ping指定IP的示例
2018/06/04 Python
Django实现一对多表模型的跨表查询方法
2018/12/18 Python
Pandas中Series和DataFrame的索引实现
2019/06/27 Python
PyCharm更改字体和界面样式的方法步骤
2019/09/27 Python
Python内置类型性能分析过程实例
2020/01/29 Python
Django haystack实现全文搜索代码示例
2020/11/28 Python
详解css3 Transition属性(平滑过渡菜单栏案例)
2017/09/05 HTML / CSS
门卫岗位安全职责
2013/12/13 职场文书
法人委托书范本格式
2014/09/15 职场文书
2014乡镇干部对照检查材料思想汇报
2014/09/26 职场文书
2014年法制宣传日活动方案
2014/11/02 职场文书
整改落实自查报告
2014/11/05 职场文书
五好家庭申报材料
2014/12/20 职场文书
在校学生证明格式
2015/06/24 职场文书
《为人民服务》教学反思
2016/02/20 职场文书
FP-growth算法发现频繁项集——发现频繁项集
2021/06/24 Python
使用 Docker Compose 构建复杂的多容器App
2022/04/30 Servers