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 匿名函数的理解(透彻版)
Jan 28 Javascript
在表单提交前进行验证的几种方式整理
Jul 31 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
Oct 18 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
Mar 13 Javascript
jquery实现手机号码选号的方法
Jul 31 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
Nov 02 Javascript
URL中“#” “?” &amp;“”号的作用浅析
Feb 04 Javascript
原生javascript实现分页效果
Apr 21 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
Sep 16 Javascript
Angular7.2.7路由使用初体验
Mar 01 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
Jul 21 Javascript
node.js通过Sequelize 连接MySQL的方法
Dec 28 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 var_dump()函数的详解
2013/06/05 PHP
解析PHP函数array_flip()在重复数组元素删除中的作用
2013/06/27 PHP
ThinkPHP和UCenter接口冲突的解决方法
2016/07/25 PHP
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
document节点对象的获取方式示例介绍
2013/12/24 Javascript
js弹出确认是否删除对话框
2014/03/27 Javascript
javascript中字符串拼接详解
2014/09/26 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
2017/01/18 Javascript
关于angularJs清除浏览器缓存的方法
2017/11/28 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
2018/03/25 jQuery
js实现图片上传即时显示效果
2019/09/30 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
2020/05/09 Javascript
JavaScript编码小技巧分享
2020/09/17 Javascript
python实现bitmap数据结构详解
2014/02/17 Python
python魔法方法-属性访问控制详解
2016/07/25 Python
python绘制条形图方法代码详解
2017/12/19 Python
取numpy数组的某几行某几列方法
2018/04/03 Python
使用pandas把某一列的字符值转换为数字的实例
2019/01/29 Python
python实现计数排序与桶排序实例代码
2019/03/28 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
教你一步步利用python实现贪吃蛇游戏
2019/06/27 Python
python UDP(udp)协议发送和接收的实例
2019/07/22 Python
解决pycharm最左侧Tool Buttons显示不全的问题
2019/12/17 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
Python logging日志模块 配置文件方式
2020/07/12 Python
Python常用断言函数实例汇总
2020/11/30 Python
css3实现wifi信号逐渐增强效果实例
2017/08/09 HTML / CSS
Oakley官网:运动太阳镜、雪镜和服装
2016/09/30 全球购物
世界上最好的儿童品牌:AlexandAlexa
2018/01/27 全球购物
台湾最大银发乐活百货:乐龄网
2018/05/21 全球购物
英国在线潜水商店:Simply Scuba
2019/03/25 全球购物
同居协议书范本
2014/04/23 职场文书
2014年党员整改措施范文
2014/09/21 职场文书
JS实现九宫格拼图游戏
2022/06/28 Javascript