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 异步方法队列链实现代码分析
Jun 05 Javascript
防止登录页面出现在frame中js代码
Jul 22 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
Dec 18 Javascript
基于javascript如何传递特殊字符
Nov 30 Javascript
微信小程序 数据访问实例详解
Oct 08 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
JS验证不重复验证码
Feb 10 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
Mar 21 Javascript
js a标签点击事件
Mar 30 Javascript
JavaScript 自定义事件之我见
Sep 25 Javascript
js+css实现打字效果
Jun 24 Javascript
微信小程序wepy框架笔记小结
Aug 08 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
弹出模态框modal的实现方法及实例
2017/09/19 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
Yii2语言国际化的配置教程
2018/08/19 PHP
实例讲解php将字符串输出到HTML
2019/01/27 PHP
javascript利用控件对windows的操作实现原理与应用
2012/12/23 Javascript
window.print打印指定div实例代码
2013/12/13 Javascript
Mvc提交表单的四种方法全程详解
2016/08/10 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
2016/11/29 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
2016/11/30 Javascript
js验证手机号、密码、短信验证码代码工具类
2020/06/24 Javascript
详解Node.js项目APM监控之New Relic
2017/05/12 Javascript
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
JS使用队列对数组排列,基数排序算法示例
2019/03/02 Javascript
react 生命周期实例分析
2020/05/18 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
python修改操作系统时间的方法
2015/05/18 Python
Python 爬虫爬取指定博客的所有文章
2016/02/17 Python
Python3处理HTTP请求的实例
2018/05/10 Python
Python运维自动化之nginx配置文件对比操作示例
2018/08/29 Python
对python3新增的byte类型详解
2018/12/04 Python
Python利用scapy实现ARP欺骗的方法
2019/07/23 Python
对Python获取屏幕截图的4种方法详解
2019/08/27 Python
Win10下用Anaconda安装TensorFlow(图文教程)
2020/06/18 Python
Python如何将字符串转换为日期
2020/07/31 Python
通过代码实例了解Python3编程技巧
2020/10/13 Python
澳大利亚首屈一指的在线购物目的地:Kogan.com
2017/02/02 全球购物
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
咖啡店自主创业商业计划书
2014/01/22 职场文书
鉴定评语大全
2014/05/05 职场文书
条幅标语大全
2014/06/20 职场文书
乡镇个人对照检查材料
2014/08/22 职场文书
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
2014年实验室工作总结
2014/12/03 职场文书
爱晚亭导游词
2015/02/09 职场文书