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模拟C#中List的简单实例
Mar 06 Javascript
jQuery中index()的用法分析
Sep 05 Javascript
阿里云ecs服务器中安装部署node.js的步骤
Oct 08 Javascript
Vuex模块化实现待办事项的状态管理
Mar 15 Javascript
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
JavaScript定义及输出螺旋矩阵的方法详解
Dec 01 Javascript
nvm、nrm、npm 安装和使用详解(小结)
Jan 17 Javascript
layui在form表单页面通过Validform加入简单验证的方法
Sep 06 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
Sep 14 Javascript
JavaScript实现HTML导航栏下拉菜单
Nov 25 Javascript
JavaScript代码实现简单计算器
Dec 27 Javascript
JavaScript 语句之常用 for 循环详解
Mar 29 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下用rmdir实现删除目录的三种方法小结
2008/04/20 PHP
简单PHP上传图片、删除图片实现代码
2010/05/12 PHP
使用PHP similar text计算两个字符串相似度
2015/11/06 PHP
phpcms配置列表页以及获得文章发布时间
2017/07/04 PHP
Laravel框架使用技巧之使用url()全局函数返回前一个页面的地址方法详解
2020/04/06 PHP
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
2012/01/20 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
2016/07/07 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
2017/01/17 Javascript
js验证手机号、密码、短信验证码代码工具类
2020/06/24 Javascript
vue使用Axios做ajax请求详解
2017/06/07 Javascript
express启用https使用小记
2019/05/21 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
js里面的变量范围分享
2020/07/18 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
2020/08/03 Javascript
Python中对列表排序实例
2015/01/04 Python
Python实现的序列化和反序列化二叉树算法示例
2019/03/02 Python
基于python实现把json数据转换成Excel表格
2020/05/07 Python
深入浅析Python代码规范性检测
2020/07/31 Python
在Pycharm中安装Pandas库方法(简单易懂)
2021/02/20 Python
extern在函数声明中是什么意思
2014/01/19 面试题
物流专业毕业生推荐信范文
2013/11/18 职场文书
中专生职业生涯规划书范文
2013/12/29 职场文书
高一英语教学反思
2014/01/22 职场文书
教师个人鉴定材料
2014/02/08 职场文书
公司股权转让协议书
2014/04/12 职场文书
小学生手册家长评语
2014/04/16 职场文书
老师对学生的评语
2014/04/18 职场文书
伦敦奥运会的口号
2014/06/21 职场文书
查摆问题自查报告范文
2014/10/13 职场文书
合伙开公司协议书范本
2014/10/28 职场文书
数学教师个人工作总结
2015/02/06 职场文书
教师个人年终总结
2015/02/11 职场文书
论文答辩开场白大全
2015/05/27 职场文书
小学生优秀作文范文(六篇)
2019/07/10 职场文书