获取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 相关文章推荐
jquery中:input和input的区别分析
Jul 13 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
Aug 23 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
Sep 16 Javascript
有关于eclipse配置spket需要注意的一些地方
Apr 07 Javascript
使用jQuery插件创建常规模态窗口登陆效果
Aug 23 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
Feb 04 Javascript
JavaScript框架(iframe)操作总结
Apr 16 Javascript
封装好的一个万能检测表单的方法
Jan 21 Javascript
Angularjs注入拦截器实现Loading效果
Dec 28 Javascript
微信小程序左滑删除效果的实现代码
Feb 20 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
Dec 14 Javascript
微信小程序位置授权处理方法
Jun 13 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
win7计划任务定时执行PHP脚本设置图解
2014/05/09 PHP
PHP中的Session对象如何使用
2015/09/25 PHP
php封装的连接Mysql类及用法分析
2015/12/10 PHP
基于jQuery的获得各种控件Value的方法
2010/11/19 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
2013/01/06 Javascript
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
2014/12/01 Javascript
jQuery分组选择器用法实例
2014/12/23 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
jquery 中ajax执行的优先级
2015/06/22 Javascript
jQuery实现Email邮箱地址自动补全功能代码
2015/11/03 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
easy ui datagrid 从编辑框中获取值的方法
2017/02/22 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
2018/02/08 Javascript
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
Python中的赋值、浅拷贝、深拷贝介绍
2015/03/09 Python
python使用xlrd与xlwt对excel的读写和格式设定
2017/01/21 Python
python 多线程对post请求服务器测试并发的方法
2019/06/13 Python
python 两个数据库postgresql对比
2019/10/21 Python
FFT快速傅里叶变换的python实现过程解析
2019/10/21 Python
python re的findall和finditer的区别详解
2020/11/15 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
canvas画图被放大且模糊的解决方法
2020/08/11 HTML / CSS
美国户外运动商店:Sun & Ski
2018/08/23 全球购物
Everlast官网:拳击、综合格斗和健身相关的体育用品
2020/08/03 全球购物
公司财务流程之主管工作流程
2014/03/03 职场文书
理财投资建议书
2014/03/12 职场文书
实习护士自荐信
2014/06/21 职场文书
二年级语文上册复习计划
2015/01/19 职场文书
长城导游词300字
2015/01/30 职场文书
女方离婚起诉书
2015/05/18 职场文书
background-position百分比原理详解
2021/05/08 HTML / CSS
浅谈Python数学建模之固定费用问题
2021/06/23 Python