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 相关文章推荐
统一接口:为FireFox添加IE的方法和属性的js代码
Mar 25 Javascript
js 与或运算符 || &amp;&amp; 妙用
Dec 09 Javascript
javascript函数中的arguments参数
Aug 01 Javascript
通过Jquery遍历Json的两种数据结构的实现代码
Jan 19 Javascript
js螺旋动画效果的具体实例
Nov 15 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
Sep 22 Javascript
跟我学习javascript的call(),apply(),bind()与回调
Nov 16 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
Aug 15 Javascript
JavaScript从原型到原型链深入理解
Jun 03 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
Oct 12 Javascript
详解vue 组件注册
Nov 20 Vue.js
js实现随机点名
Jan 19 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程序--记数器
2006/10/09 PHP
PHP Class&amp;Object -- PHP 自排序二叉树的深入解析
2013/06/25 PHP
php微信浏览器分享设置以及回调详解
2016/08/01 PHP
PHP Mysqli 常用代码集合
2016/11/12 PHP
使用PHP下载CSS文件中的所有图片【几行代码即可实现】
2016/12/14 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
php出租房数据管理及搜索页面
2017/05/23 PHP
使用composer 安装 laravel框架的方法图文详解
2019/08/02 PHP
laravel中Redis队列监听中断的分析
2020/09/14 PHP
JS解密入门 最终变量劫持
2008/06/25 Javascript
原来Jquery.load的方法可以一直load下去
2011/03/28 Javascript
基于jQuery的为attr添加id title等效果的实现代码
2011/04/20 Javascript
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
jQuery.holdReady()使用方法
2014/05/20 Javascript
AngularJS 霸道的过滤器小结
2017/04/26 Javascript
利用JS制作万年历的方法
2017/08/16 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
2017/11/03 Javascript
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
2018/08/14 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
node使用request请求的方法
2019/12/20 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
python消除序列的重复值并保持顺序不变的实例
2018/11/08 Python
关于keras中keras.layers.merge的用法说明
2020/05/23 Python
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
安全大检查反思材料
2014/01/31 职场文书
消防安全管理制度
2014/02/01 职场文书
学校百日安全生产活动总结
2014/07/05 职场文书
试用期转正后的自我评价
2014/09/21 职场文书
个人学习总结范文
2015/02/15 职场文书
2015年乡镇卫生院妇幼保健工作总结
2015/05/19 职场文书
python爬虫之爬取笔趣阁小说
2021/04/22 Python
图解排序算法之希尔排序Java实现
2021/06/26 Java/Android
java基础——多线程
2021/07/03 Java/Android