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学习笔记(十九) 节点的操作实现代码
Jun 20 Javascript
JavaScript获取FCK编辑器信息的具体方法
Jul 12 Javascript
JQuery中extend的用法实例分析
Feb 08 Javascript
JavaScript变量的作用域全解析
Aug 14 Javascript
浅析在javascript中创建对象的各种模式
May 06 Javascript
轻松掌握JavaScript单例模式
Aug 25 Javascript
React学习笔记之列表渲染示例详解
Aug 22 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
Sep 07 Javascript
Thinkjs3新手入门之添加一个新的页面
Dec 06 Javascript
JS实现的合并多个数组去重算法示例
Apr 11 Javascript
vue input输入框关键字筛选检索列表数据展示
Oct 26 Javascript
js中console在一行内打印字符串和对象的方法
Sep 10 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提示Warning:mysql_fetch_array() expects的解决方法
2014/12/16 PHP
PHP SPL标准库之接口(Interface)详解
2015/05/11 PHP
php ucwords() 函数将字符串中每个单词的首字符转换为大写(实现代码)
2016/05/12 PHP
关于laravel 子查询 &amp; join的使用
2019/10/16 PHP
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
单击按钮显示隐藏子菜单经典案例
2013/01/04 Javascript
JS实现模仿微博发布效果实例代码
2013/12/16 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
2015/04/20 Javascript
javascript中返回顶部按钮的实现
2015/05/05 Javascript
jQuery实现ctrl+enter(回车)提交表单
2015/10/19 Javascript
javascript事件的传播基础实例讲解(35)
2017/02/14 Javascript
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
解决vue热替换失效的根本原因
2018/09/19 Javascript
Vue项目引进ElementUI组件的方法
2018/11/11 Javascript
JS学习笔记之原型链和利用原型实现继承详解
2019/05/29 Javascript
详解vue或uni-app的跨域问题解决方案
2020/02/21 Javascript
vue实现评价星星功能
2020/06/30 Javascript
python实现的udp协议Server和Client代码实例
2014/06/04 Python
讲解Python中if语句的嵌套用法
2015/05/14 Python
python3之微信文章爬虫实例讲解
2017/07/12 Python
matplotlib给子图添加图例的方法
2018/08/03 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
在tensorflow下利用plt画论文中loss,acc等曲线图实例
2020/06/15 Python
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
MCM英国官网:奢侈皮具制品
2017/04/18 全球购物
eBay澳大利亚站:eBay.com.au
2018/02/02 全球购物
西班牙品牌鞋子、服装和配饰在线商店:Esdemarca
2021/02/17 全球购物
Sony C++笔试题
2013/03/10 面试题
红领巾心向党广播稿
2014/01/19 职场文书
大型晚会策划方案
2014/02/06 职场文书
毕业生就业意向书
2014/04/01 职场文书
协议书格式
2014/04/23 职场文书
结对共建协议书
2014/08/20 职场文书
红旗渠导游词
2015/02/09 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书
基于Go语言构建RESTful API服务
2021/07/25 Golang