获取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 模板数据绑定插件的使用方法详解
Jul 08 Javascript
用Jquery.load载入页面实现局部刷新
Jan 22 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
Sep 14 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
Dec 18 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
Jul 24 Javascript
卸载安装Node.js与npm过程详解
Aug 15 Javascript
javascript中Date对象的使用总结
Nov 21 Javascript
vue.js实现条件渲染的实例代码
Jun 22 Javascript
vue.js如何将echarts封装为组件一键使用详解
Oct 10 Javascript
JavaScript门道之标准库
May 26 Javascript
原生js实现获取form表单数据代码实例
Mar 27 Javascript
小程序最新获取用户昵称和头像的方法总结
Sep 23 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
超级简单的发送邮件程序
2006/10/09 PHP
写出高质量的PHP程序
2012/02/04 PHP
浅析Yii2集成富文本编辑器redactor实例教程
2016/04/25 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
javascript 点击整页变灰的效果(可做退出效果)。
2008/01/09 Javascript
手把手教你自己写一个js表单验证框架的方法
2010/09/14 Javascript
JS动态添加option和删除option(附实例代码)
2013/04/01 Javascript
extjs 如何给column 加上提示
2014/07/29 Javascript
jquery选择器需要注意的问题
2014/11/26 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
Javascript中的数组常用方法解析
2016/06/17 Javascript
jQuery实现查找最近父节点的方法
2016/06/23 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
2016/08/01 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
2016/10/21 Javascript
Angular路由简单学习
2016/12/26 Javascript
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
React复制到剪贴板的示例代码
2017/08/22 Javascript
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
微信小程序自定义弹窗wcPop插件
2018/11/19 Javascript
详解项目升级到vue-cli3的正确姿势
2019/01/28 Javascript
vue组件间的参数传递实例详解
2019/04/26 Javascript
Vue内部渲染视图的方法
2019/09/02 Javascript
[05:45]Ti4观战指南(下)
2014/07/07 DOTA
Python图片转换成矩阵,矩阵数据转换成图片的实例
2018/07/02 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
基于Python实现拆分和合并GIF动态图
2019/10/22 Python
python实现word文档批量转成自定义格式的excel文档的思路及实例代码
2020/02/21 Python
Python3.7安装pyaudio教程解析
2020/07/24 Python
html5教程调用绘图api画简单的圆形代码分享
2013/12/04 HTML / CSS
投标承诺书怎么写
2014/05/24 职场文书
2019假期福利管理制度!
2019/07/15 职场文书
canvas多重阴影发光效果实现
2021/04/20 Javascript
html+css实现赛博朋克风格按钮
2021/05/26 HTML / CSS
使用redis实现延迟通知功能(Redis过期键通知)
2021/09/04 Redis
抖音动画片,皮皮虾,《治愈系》动画在用这首REMIX作为背景音乐,Anak ,The last world with you完整版
2022/03/16 杂记