获取DOM对象的几种扩展及简写

2016-02-19 12:01 4 1 收藏

今天图老师小编给大家精心推荐个获取DOM对象的几种扩展及简写教程,一起来看看过程究竟如何进行吧!喜欢还请点个赞哦~

【 tulaoshi.com - Web开发 】

参照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);
}; 

来源:https://www.tulaoshi.com/n/20160219/1599534.html

延伸阅读
标签: Web开发
一.工厂方式:先创建对象,再向对象添加方法和属性,封闭后调用不要使用new操作符创建对象。使用这种方法有很多弊端,把方法定义在工厂函数内部的时候,每次调用的时候都会产生新的函数 function factory(name,person,address,time){     var tmp=new Object;     tmp.name=name;     tmp.p...
标签: Web开发
例如:有一个employee对象, 代码如下: function employee(){ this.e_id = 0; this.e_name = ""; } 现在需要为它动态的新增"age"属性和"toString()"方法, 代码如下: var empObj = new employee(); empObj["age"] = 20; empObj["toString"] = function() { return this.e_id.toString() + this.e_name; }; 一行简...
标签: Web开发
最近网站改版,发现网站的广告都是直接网址,如果转向一下,对于本站的全职会好点 需要一个html页面来传递参数所以用到个js获取url参数的代码,就一个funciton 代码如下: script language="javascript" type="text/javascript" //js获取url参数的function function request(paras){  var u...
标签: Web开发
在Javascript中 利用 document.selection 可以创建 textRange。 但其实不是什么时候都可以创建的。 我们可以利用 document.selection.type 来判断当前选中的是文本还是对象。 document.selection.type 返回三个值 "None" "Text" "Control" 只有当返回值是 Text 时,创建...
标签: Web开发
平时我们获取事件对象一般写法如下: getEvent    window   如果没有参数,也可写成(非IE :事件对象会自动传递给对应的事件处理函数,且为第一个参数): getEvent     arguments window 这样的写法在除 Firefox(测试版本:3.0.12,下同) 外的浏览器上运行都不会有问题,但 Firefox 为什么例...

经验教程

305

收藏

90
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部