获取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 相关文章推荐
js常用排序实现代码
Dec 28 Javascript
Ajax搜索结果页面下方的分页按钮的生成
Apr 05 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
Aug 08 Javascript
浅谈Javascript变量作用域问题
Dec 16 Javascript
基于JavaScript短信验证码如何实现
Jan 24 Javascript
详解jQuery中基本的动画方法
Dec 14 Javascript
利用nginx + node在阿里云部署https的步骤详解
Dec 19 Javascript
使用express搭建一个简单的查询服务器的方法
Feb 09 Javascript
JavaScript 跨域之POST实现方法
May 07 Javascript
vue router的基本使用和配置教程
Nov 05 Javascript
使用mixins实现elementUI表单全局验证的解决方法
Apr 02 Javascript
使用JS判断页面是首次被加载还是刷新
May 26 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实现word转html的方法
2016/01/22 PHP
PHP输出多个元素的排列或组合的方法
2017/03/14 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
取得父标签
2006/11/14 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
2013/05/03 Javascript
利用js 进行输入框自动匹配字符的小例子
2013/06/29 Javascript
JS实现点击链接取消跳转效果的方法
2014/01/24 Javascript
JavaScript运算符小结
2015/06/03 Javascript
ajax在兼容模式下失效的快速解决方法
2016/03/22 Javascript
预防网页挂马的方法总结
2016/11/03 Javascript
设置jquery UI 控件的大小方法
2016/12/12 Javascript
JavaScript数据结构中串的表示与应用实例
2017/04/12 Javascript
JavaScript实现三级联动菜单效果
2017/08/16 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
CentOS环境中MySQL修改root密码方法
2018/01/07 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
2018/08/16 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
2018/09/03 Javascript
js实现同一个页面,多个enter事件绑定的示例
2018/10/10 Javascript
vue使用video.js进行视频播放功能
2019/07/18 Javascript
[01:05:41]EG vs Optic Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
Python字典,函数,全局变量代码解析
2017/12/18 Python
更换Django默认的模板引擎为jinja2的实现方法
2018/05/28 Python
python 使用opencv 把视频分割成图片示例
2019/12/12 Python
python openpyxl模块的使用详解
2021/02/25 Python
CSS3 :default伪类选择器使用简介
2018/03/15 HTML / CSS
英国钻石公司:British Diamond Company
2020/02/16 全球购物
应届生如何写自荐信
2014/01/05 职场文书
小学校园之星事迹材料
2014/05/16 职场文书
2014年发展党员工作总结
2014/11/12 职场文书
2014五年级班主任工作总结
2014/12/05 职场文书
秋季运动会开幕词
2015/01/28 职场文书
毕业答辩开场白范文
2015/05/27 职场文书
2015年大学生暑期实习报告
2015/07/13 职场文书
环保建议书作文400字
2015/09/14 职场文书
【海涛解说】史上最给力比赛,挑战DOTA极限
2022/04/01 DOTA
详解MySQL的主键查询为什么这么快
2022/04/03 MySQL