获取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 相关文章推荐
ExtJs grid行 右键菜单的两种方法
Jun 19 Javascript
验证码按回车不变解决方法
Mar 29 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 Javascript
Jquery实现视频播放页面的关灯开灯效果
May 27 Javascript
JS去掉第一个字符和最后一个字符的实现代码
Feb 20 Javascript
jquery带下拉菜单和焦点图代码分享
Aug 24 Javascript
强大Vue.js组件浅析
Sep 12 Javascript
利用require.js与angular搭建spa应用的方法实例
Jul 19 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
Apr 30 Javascript
利用原生JS实现data方法示例代码
May 28 Javascript
vue router动态路由设置参数可选问题
Aug 21 Javascript
vue的路由映射问题及解决方案
Oct 14 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中批量生成静态html(命令行下运行PHP)
2014/04/19 PHP
分析PHP中单双引号的误区和双引号小隐患
2016/07/19 PHP
Ecshop 后台添加新功能栏目及管理权限设置教程
2017/11/21 PHP
IE8 浏览器Cookie的处理
2009/01/31 Javascript
JavaScript执行效率与性能提升方案
2012/12/21 Javascript
javascript重复绑定事件造成的后果说明
2013/03/02 Javascript
js判断浏览器类型的方法
2013/08/07 Javascript
express的中间件bodyParser详解
2014/12/04 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
2014/12/17 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
2017/01/13 Javascript
JS实现根据密码长度显示安全条功能
2017/03/08 Javascript
Bootstrap table使用方法总结
2017/05/10 Javascript
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
es6新特性之 class 基本用法解析
2018/05/05 Javascript
使用jQuery动态设置单选框的选中效果
2018/12/06 jQuery
vue 实现单选框设置默认选中值
2019/11/07 Javascript
Python自动登录126邮箱的方法
2015/07/10 Python
python实现JAVA源代码从ANSI到UTF-8的批量转换方法
2015/08/10 Python
python的mysqldb安装步骤详解
2017/08/14 Python
用pyqt5 给按钮设置图标和css样式的方法
2019/06/24 Python
Pycharm+Python+PyQt5使用详解
2019/09/25 Python
Python多重继承之菱形继承的实例详解
2020/02/12 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
HTML5 LocalStorage 本地存储刷新值还在
2017/03/10 HTML / CSS
美国在线家装零售商:Build.com
2016/09/02 全球购物
美国领先的在线邮轮旅游公司:CruiseDirect
2018/06/07 全球购物
九年级科学教学反思
2014/01/29 职场文书
大学生活动策划方案
2014/02/10 职场文书
医学生自我鉴定范文
2014/03/26 职场文书
二手车转让协议书
2015/01/29 职场文书
防卫过当辩护词
2015/05/21 职场文书
2016庆祝教师节新闻稿
2015/11/25 职场文书
Python基础之tkinter图形化界面学习
2021/04/29 Python
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS
Python基础学习之奇异的GUI对话框
2021/05/27 Python