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的拖动布局插件
Nov 25 Javascript
javascript 获取iframe里页面中元素值的方法
Feb 17 Javascript
深入理解Javascript里的依赖注入
Mar 19 Javascript
AspNet中使用JQuery boxy插件的确认框
May 20 Javascript
jQuery each函数源码分析
May 25 Javascript
bootstrap基础知识学习笔记
Nov 02 Javascript
JS制作类似选项卡切换的年历
Dec 03 Javascript
javascript 面向对象function详解及实例代码
Feb 28 Javascript
使用javascript做时间倒数读秒功能的实例
Jan 23 Javascript
React如何实现浏览器打印部分内容详析
May 19 Javascript
JavaScript 预解析的4种实现方法解析
Sep 03 Javascript
webpack4从0搭建组件库的实现
Nov 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函数
2010/02/16 PHP
并发下常见的加锁及锁的PHP具体实现代码
2010/10/12 PHP
destoon实现VIP排名一直在前面排序的方法
2014/08/21 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
PHP 微信扫码支付源代码(推荐)
2016/11/03 PHP
PHP解决中文乱码
2017/04/28 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
TFDN图片播放器 不错自动播放
2006/10/03 Javascript
判断脚本加载是否完成的方法
2009/05/26 Javascript
JavaScript游戏之是男人就下100层代码打包
2010/11/08 Javascript
iframe的父子窗口之间的对象相互调用基本用法
2013/09/03 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
2015/08/28 Javascript
Angular2 (RC4) 路由与导航详解
2016/09/21 Javascript
基于ES6作用域和解构赋值详解
2017/11/03 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
vue实现PC端录音功能的实例代码
2019/06/05 Javascript
在layui中layer弹出层点击事件无效的解决方法
2019/09/05 Javascript
解决Layui中templet中a的onclick参数传递的问题
2019/09/20 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
[48:21]Mski vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python使用django搭建web开发环境
2017/06/09 Python
Python编程实现控制cmd命令行显示颜色的方法示例
2017/08/14 Python
python数据结构之线性表的顺序存储结构
2018/09/28 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
Python日志打印里logging.getLogger源码分析详解
2021/01/17 Python
印度网上药店:1mg
2017/10/13 全球购物
临床医学大学生求职信
2013/09/28 职场文书
机电专业大学生求职信
2013/10/04 职场文书
大专计算机个人求职的自我评价
2013/10/21 职场文书
计算机专业毕业生自荐信
2013/12/31 职场文书
教师党员思想汇报
2014/01/06 职场文书
500字小学生检讨书
2015/02/19 职场文书
Html5调用企业微信的实现
2021/04/16 HTML / CSS
我的收音机情缘
2022/04/05 无线电