获取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 DOM编程实例(智播客学习)
Nov 23 Javascript
关于Javascript作用域链的八点总结
Dec 06 Javascript
node.js中的buffer.copy方法使用说明
Dec 14 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 Javascript
第一次接触神奇的Bootstrap
Oct 14 Javascript
html判断当前页面是否在iframe中的实例
Nov 30 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
Jan 21 Javascript
JavaScript之iterable_动力节点Java学院整理
Jun 29 Javascript
vue element项目引入icon图标的方法
Jun 06 Javascript
Angular6中使用Swiper的方法示例
Jul 09 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
Aug 09 Javascript
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
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连接数据库代码应用分析
2011/05/29 PHP
php调用c接口无错版介绍
2014/03/11 PHP
php中unserialize返回false的解决方法
2014/09/22 PHP
php文件夹的创建与删除方法
2015/01/24 PHP
php 实现Hash表功能实例详解
2016/11/29 PHP
js Event对象的5种坐标
2011/09/12 Javascript
JS常见问题整理(持续更新)
2013/08/06 Javascript
JavaScript版TAB选项卡效果实例
2013/08/16 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
简述JavaScript对传统文档对象模型的支持
2015/06/16 Javascript
JavaScript实现给按钮加上双重动作的方法
2015/08/14 Javascript
javascript模拟C#格式化字符串
2015/08/26 Javascript
js过滤HTML标签完整实例
2015/11/26 Javascript
JS 实现banner图片轮播效果(鼠标事件)
2017/08/04 Javascript
Vue Socket.io源码解读
2018/02/07 Javascript
简述JS浏览器的三种弹窗
2018/07/15 Javascript
elementUI多选框反选的实现代码
2019/04/03 Javascript
微信小程序文字显示换行问题
2019/07/28 Javascript
vuex state中的数组变化监听实例
2019/11/06 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
详解Python的Django框架中的模版继承
2015/07/16 Python
Python 在字符串中加入变量的实例讲解
2018/05/02 Python
解析python的局部变量和全局变量
2019/08/15 Python
详解使用django-mama-cas快速搭建CAS服务的实现
2019/10/30 Python
使用Python实现正态分布、正态分布采样
2019/11/20 Python
经验丰富程序员才知道的8种高级Python技巧
2020/07/27 Python
Pytorch 扩展Tensor维度、压缩Tensor维度的方法
2020/09/09 Python
HTML5的结构和语义(5):内嵌媒体
2008/10/17 HTML / CSS
美国一家专业的太阳镜网上零售商:Solstice太阳镜
2016/07/25 全球购物
Clarks其乐鞋荷兰官网:Clarks荷兰
2019/07/05 全球购物
大学校园活动策划书
2014/02/04 职场文书
小学师德师风整改措施
2014/10/27 职场文书
2015感人爱情寄语
2015/02/26 职场文书
2015年纪检监察工作总结
2015/04/08 职场文书
七年级思品教学反思
2016/02/20 职场文书
TS 类型兼容教程示例详解
2022/09/23 Javascript