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 相关文章推荐
JavaScript页面刷新与弹出窗口问题的解决方法
Mar 02 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
Aug 16 Javascript
基于jQuery的message插件实现右下角弹出消息框
Jan 11 Javascript
基于JQuery的动态删除Table表格的行和列的代码
May 12 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
Aug 11 Javascript
微信小程序 wxapp内容组件 progress详细介绍
Oct 31 Javascript
jQuery Validate插件自定义验证规则的方法
Dec 27 Javascript
Vue.js实现模拟微信朋友圈开发demo
Apr 20 Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 Javascript
JavaScript键盘事件常见用法实例分析
Jan 03 Javascript
js canvas实现星空连线背景特效
Nov 01 Javascript
javascript进阶篇深拷贝实现的四种方式
Jul 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
Zerg兵种介绍
2020/03/14 星际争霸
php与XML、XSLT、Mysql的结合运用实现代码
2009/11/19 PHP
php自动注册登录验证机制实现代码
2011/12/20 PHP
PHP将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
用Javscript实现表单复选框的全选功能
2007/05/25 Javascript
根据鼠标的位置动态的控制层的位置
2009/11/24 Javascript
javascript中创建对象的三种常用方法
2010/12/30 Javascript
javascript 兼容所有浏览器的DOM扩展功能
2012/08/01 Javascript
常用的Javascript数据验证插件
2015/08/04 Javascript
Bootstrap精简教程
2015/11/27 Javascript
分享12个非常实用的JavaScript小技巧
2016/05/11 Javascript
纯js实现手风琴效果代码
2020/04/17 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
2017/01/03 Javascript
vue-resource拦截器设置头信息的实例
2017/10/27 Javascript
Vue2 配置 Axios api 接口调用文件的方法
2017/11/13 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
2019/09/03 jQuery
vue 中url 链接左边的小图标更改问题
2019/12/30 Javascript
Vue引入Stylus知识点总结
2020/01/16 Javascript
[35:26]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第三局
2016/02/26 DOTA
Python+django实现文件上传
2016/01/17 Python
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
python3判断url链接是否为404的方法
2018/08/10 Python
PyCharm代码回滚,恢复历史版本的解决方法
2018/10/22 Python
pygame游戏之旅 添加碰撞效果的方法
2018/11/20 Python
python通过ffmgep从视频中抽帧的方法
2018/12/05 Python
python中的数组赋值与拷贝的区别详解
2019/11/26 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
详解CSS3中强大的filter(滤镜)属性
2017/06/29 HTML / CSS
P D PAOLA意大利官网:西班牙著名的珠宝首饰品牌
2019/09/24 全球购物
如何将字串String转换成整数int
2015/02/21 面试题
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
班级安全教育实施方案
2014/02/23 职场文书
校庆标语集锦
2014/06/25 职场文书
MySQL为id选择合适的数据类型
2021/06/07 MySQL