javascript getElementsByClassName 和js取地址栏参数


Posted in Javascript onJanuary 02, 2010

getElementsByClassName()

为了从一大堆HTML代码中找出我们的树状菜单(也许有多个),我们先来实现一个通过className找DOM节点的方法:getElementsByClassName。这是对浏览器自有DOM方法的一个简单但实用的扩充。

此方法有两个参数:ele指出以哪个DOM节点为根节点寻找(也就是说只找ele的子节点),className指出符合条件的节点的class属性中必须包含怎样的className。它的返回值是一个数组,存放了所有符合条件的节点。

function getElementsByClassName(ele,className) { 
//获取所有子节点 
if(document.all){ 
var children = ele.all; 
}else{ 
var children = ele.getElementsByTagName('*'); 
} 
//遍历子节点并检查className属性 
var elements = new Array(); 
for (var i = 0; i < children.length; i++) { 
var child = children[i]; 
var classNames = child.className.split(' '); 
for (var j = 0; j < classNames.length; j++) { 
if (classNames[j] == className) { 
elements[elements.length] = child; 
break; 
} 
} 
} 
return elements; 
} var trees = getElementsByClassName(document,'TreeView');

最前面的一个if-else语是为了兼容IE5(IE5不能运行
document.getElementsByTagName('*'))。需要注意的是千万不要用浏览器检测的方法来写脚本,而应该直接使用将要用到的语句来测试是否可以执行,如果返回值为null或undefined,那再换一种方法。这样的脚本可以有更好的兼容性,也更健壮。
elements[elements.length] = child;,这句同样是为了兼容IE5才没有使用数组
的push方法。如果你一定要使用push方法,那么可以在执行getElementsByClassName()
之前先重载一遍push方法。代码如下:

Array.prototype.push = function(value){
this[this.length] = value;
}

注:原本我希望getElementsByClassName也能像push方法一样写,比如
HTMLElement.prototype.getElementsByClassName = ...。不过实际操作的时候发现在
运行时HTMLElement这个对象并不是固定的,每种tag似乎都不一样,只能作罢。

取地址栏参数

//v1: 
var URLParams = new Array(); 
var aParams = document.location.search.substr(1).split('&'); 
for (i=0; i < aParams.length i++){ 
var aParam = aParams.split('='); 
URLParams[aParam[0]] = aParam[1]; 
} 
//取得传过来的name参数 
name=URLParams['name']; //v2: 
Request = { 
QueryString : function(item){ 
var svalue = location.search.match(new 
RegExp('[\?\&]' + item + '=([^\&]*)(\&?)','i')); 
return svalue ? svalue[1] : svalue; 
} 
} 
var key = Request.QueryString('key');
Javascript 相关文章推荐
js 单引号 传递方法
Jun 22 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
Feb 22 Javascript
浅谈JavaScript函数参数的可修改性问题
Dec 05 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
Apr 11 Javascript
javascript自定义的addClass()方法
May 28 Javascript
jQuery中的ajax async同步和异步详解
Sep 29 Javascript
ajax跨域调用webservice的实现代码
May 09 Javascript
详谈表单重复提交的三种情况及解决方法
Aug 16 Javascript
解决Layui中templet中a的onclick参数传递的问题
Sep 20 Javascript
小程序调用微信支付的方法
Sep 26 Javascript
微信小程序点击保存图片到本机功能
Dec 13 Javascript
微信小程序canvas开发水果老虎机的思路详解
Feb 07 Javascript
firefox插件Firebug的使用教程
Jan 02 #Javascript
firefox firebug中文入门教程 脚本之家新年特别版
Jan 02 #Javascript
Firefox+FireBug使JQuery的学习更加轻松愉快
Jan 01 #Javascript
20个非常棒的Jquery实用工具 国外文章
Jan 01 #Javascript
JavaScript与DropDownList 区别分析
Jan 01 #Javascript
HTML node相关的一些资料整理
Jan 01 #Javascript
JQery 渐变图片导航效果代码 漂亮
Jan 01 #Javascript
You might like
生成sessionid和随机密码的例子
2006/10/09 PHP
PHP 防注入函数(格式化数据)
2011/08/08 PHP
thinkphp项目部署到Linux服务器上报错“模板不存在”如何解决
2016/04/27 PHP
PHP getNamespaces()函数讲解
2019/02/03 PHP
jQuery 点击图片跳转上一张或下一张功能的实现代码
2010/03/12 Javascript
js静态方法与实例方法分析
2011/07/04 Javascript
Javascript面向对象编程
2012/03/18 Javascript
JavaScript返回网页中锚点数目的方法
2015/04/03 Javascript
js实现touch移动触屏滑动事件
2015/04/17 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
2015/10/25 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
javascript显示倒计时控制按钮的简单实现
2016/06/07 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
2016/09/04 Javascript
jQuery实现可展开折叠的导航效果示例
2016/09/12 Javascript
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
2017/12/31 Javascript
jQuery中ajax获取数据赋值给页面的实例
2017/12/31 jQuery
详解基于Vue-cli搭建的项目如何和后台交互
2018/06/29 Javascript
Vue实现按钮旋转和移动位置的实例代码
2018/08/09 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
2018/12/20 Javascript
vue在路由中验证token是否存在的简单实现
2019/11/11 Javascript
vue引用外部JS的两种种方法
2020/01/28 Javascript
python获取本地计算机名字的方法
2015/04/29 Python
Python设计模式中单例模式的实现及在Tornado中的应用
2016/03/02 Python
django model去掉unique_together报错的解决方案
2016/10/18 Python
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
Python实现定时自动关闭的tkinter窗口方法
2019/02/16 Python
Python中的上下文管理器相关知识详解
2019/09/19 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
高一化学教学反思
2014/02/05 职场文书
幼儿园家长寄语
2014/04/02 职场文书
《花瓣飘香》教学反思
2014/04/15 职场文书
小学生差生评语
2014/12/29 职场文书
幼儿园新学期开学寄语
2015/05/27 职场文书
Java面试题冲刺第十五天--设计模式
2021/08/07 面试题