获取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函数中的arguments参数
Aug 01 Javascript
解决js正则匹配换行问题实现代码
Dec 10 Javascript
兼容主流浏览器的iframe自适应高度js脚本
Jan 10 Javascript
javascript学习笔记(四)function函数部分
Sep 30 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
Oct 11 Javascript
JavaScript模拟实现继承的方法
Mar 30 Javascript
TypeScript具有的几个不同特质
Apr 07 Javascript
微信小程序 swiper组件详解及实例代码
Oct 25 Javascript
实现两个文本框同时输入的实例
Sep 25 Javascript
node.js爬取中关村的在线电瓶车信息
Nov 13 Javascript
js中对象和面向对象与Json介绍
Jan 21 Javascript
Vue数据绑定实例写法
Aug 06 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根据ip查询所在地区(非常有用,赶集网就用到)
2013/07/01 PHP
如何让搜索引擎抓取AJAX内容解决方案
2014/08/25 PHP
Smarty缓存机制实例详解【三种缓存方式】
2019/07/20 PHP
加载jQuery后$冲突的解决办法
2010/07/09 Javascript
javascript页面动态显示时间变化示例代码
2013/12/18 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
JQuery中DOM事件合成用法实例分析
2015/06/13 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
jQuery 中的 DOM 操作
2016/04/26 Javascript
轻松掌握JavaScript策略模式
2016/08/25 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
vue中实现先请求数据再渲染dom分享
2018/03/17 Javascript
Angular-UI Bootstrap组件实现警报功能
2018/07/16 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
2018/07/17 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
Javascript异步编程async实现过程详解
2020/04/02 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
2020/07/12 Javascript
[01:09:16]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第一场 1月25日
2021/03/11 DOTA
Python 读写文件和file对象的方法(推荐)
2016/09/12 Python
python实现二叉树的遍历
2017/12/11 Python
基于Django与ajax之间的json传输方法
2018/05/29 Python
Python批处理更改文件名os.rename的方法
2018/10/26 Python
Python3.5 Json与pickle实现数据序列化与反序列化操作示例
2019/04/29 Python
Python爬取智联招聘数据分析师岗位相关信息的方法
2019/08/13 Python
Python实现查找数据库最接近的数据
2020/06/08 Python
Python关于拓扑排序知识点讲解
2021/01/04 Python
波兰品牌内衣及泳装网上商店:Astratex.pl
2017/02/03 全球购物
地球一小时倡议书
2014/04/15 职场文书
汉语言文学毕业求职信
2014/07/17 职场文书
2014年导购员工作总结
2014/11/18 职场文书
施工安全协议书
2016/03/22 职场文书
Nginx已编译的nginx-添加新模块
2021/04/01 Servers
MySQL中优化SQL语句的方法(show status、explain分析服务器状态信息)
2022/04/09 MySQL
python单向链表实例详解
2022/05/25 Python