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 相关文章推荐
jquery下实现overlay遮罩层代码
Aug 25 Javascript
无阻塞加载脚本分析[全]
Jan 20 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
Jul 21 Javascript
使用GruntJS构建Web程序之构建篇
Jun 04 Javascript
jQuery中wrapInner()方法用法实例
Jan 16 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
Apr 01 Javascript
jQuery文字提示与图片提示效果实现方法
Jul 04 Javascript
Angular4实现动态添加删除表单输入框功能
Aug 11 Javascript
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
利用VS Code开发你的第一个AngularJS 2应用程序
Dec 15 Javascript
在Mac下彻底卸载node和npm的方法
May 16 Javascript
vue element 关闭当前tab 跳转到上一路由操作
Jul 22 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
浅析关于PHP位运算的简单权限设计
2013/06/30 PHP
php字符串的替换,分割和连接方法
2016/05/23 PHP
ThinkPHP中create()方法自动验证表单信息
2017/04/28 PHP
PHP析构函数destruct与垃圾回收机制的讲解
2019/03/22 PHP
建议大家看下JavaScript重要知识更新
2007/07/08 Javascript
JS 图片缩放效果代码
2010/06/09 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
DOM基础教程之使用DOM
2015/01/19 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
2015/12/18 Javascript
解决js函数闭包内存泄露问题的办法
2016/01/25 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
AngularJS日程表案例详解
2017/08/15 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
深入理解ES6中let和闭包
2018/02/22 Javascript
jquery radio 动态控制选中失效问题的解决方法
2018/02/28 jQuery
Vue用v-for给src属性赋值的方法
2018/03/03 Javascript
webpack vue项目开发环境局域网访问方法
2018/03/20 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
2018/09/21 Javascript
微信小程序入门之广告条实现方法示例
2018/12/05 Javascript
小程序登录/注册页面设计的实现代码
2019/05/24 Javascript
layui 上传文件_批量导入数据UI的方法
2019/09/23 Javascript
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
PHP 502bad gateway原因及解决方案
2020/11/13 Javascript
Python基于贪心算法解决背包问题示例
2017/11/27 Python
Python中循环引用(import)失败的解决方法
2018/04/22 Python
Python3爬虫学习之MySQL数据库存储爬取的信息详解
2018/12/12 Python
Python 使用matplotlib模块模拟掷骰子
2019/08/08 Python
Python基于当前时间批量创建文件
2020/05/07 Python
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
自考毕业生自我鉴定
2013/11/04 职场文书
打架检讨书800字
2014/01/10 职场文书
政协委员个人总结
2015/03/03 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书
前端使用svg图片改色实现示例
2022/07/23 HTML / CSS