获取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解决常见浏览器兼容问题的12种方法
Jan 04 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
Jun 17 Javascript
setinterval()与clearInterval()JS函数的调用方法
Jan 21 Javascript
JS继承用法实例分析
Feb 05 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
Jun 19 Javascript
JavaScript中的Number数字类型学习笔记
May 26 Javascript
angular.js分页代码的实例
Jul 27 Javascript
js 模仿锚点定位的实现方法
Nov 19 Javascript
详解Angular调试技巧之报错404(not found)
Jan 31 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
Mar 21 Javascript
详解angularjs跨页面传参遇到的一些问题
Nov 01 Javascript
Vue.js计算机属性computed和methods方法详解
Oct 12 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&amp;mysql(二)
2006/10/09 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
php简单计算年龄的方法(周岁与虚岁)
2016/12/06 PHP
PHP+mysql实现从数据库获取下拉树功能示例
2017/01/06 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
IE 条件注释详解总结(附实例代码)
2009/08/29 Javascript
用JS实现3D球状标签云示例代码
2013/12/01 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
Canvas 制作动态进度加载水球详解及实例代码
2016/12/09 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
2017/12/05 jQuery
vue实现一个炫酷的日历组件
2018/10/08 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
Angular进行简单单元测试的实现方法实例
2020/08/16 Javascript
用Python实现一个简单的多线程TCP服务器的教程
2015/05/05 Python
简述:我为什么选择Python而不是Matlab和R语言
2017/11/14 Python
python SSH模块登录,远程机执行shell命令实例解析
2018/01/12 Python
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
Python实现按照指定要求逆序输出一个数字的方法
2018/04/19 Python
Python变量类型知识点总结
2019/02/18 Python
python 魔法函数实例及解析
2019/09/25 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
python+selenium实现12306模拟登录的步骤
2021/01/21 Python
ECCO俄罗斯官网:北欧丹麦鞋履及皮具品牌
2020/06/26 全球购物
JAVA程序员面试题
2012/10/03 面试题
父亲生日宴会答谢词
2014/01/10 职场文书
我们的节日端午节活动方案
2014/03/02 职场文书
沙滩主题婚礼活动策划方案
2014/09/15 职场文书
2014年国庆节演讲稿精选范文1500字
2014/09/25 职场文书
我的法兰西岁月观后感
2015/06/09 职场文书
李强感恩观后感
2015/06/17 职场文书
新学期开学标语2015
2015/07/16 职场文书
python 机器学习的标准化、归一化、正则化、离散化和白化
2021/04/16 Python
两行代码解决Jupyter Notebook中文不能显示的问题
2021/04/24 Python
JVM之方法返回地址详解
2022/02/28 Java/Android
CSS实现背景图片全屏铺满自适应的3种方式
2022/07/07 HTML / CSS