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实现面向对象类的功能书写技巧
Mar 07 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
Apr 02 Javascript
AngularJS初始化过程分析(引导程序)
Dec 06 Javascript
jQuery 处理页面的事件详解
Jan 20 Javascript
JS动态给对象添加属性和值的实现方法
Oct 21 Javascript
bootstrap组件之按钮式下拉菜单小结
Jan 19 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
Mar 29 Javascript
详解Vue 非父子组件通信方法(非Vuex)
May 24 Javascript
微信小程序App生命周期详解
Jan 31 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
Jun 08 Javascript
Webpack之tree-starking 解析
Sep 11 Javascript
解决layui轮播图有数据不显示的情况
Sep 16 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
SONY ICF-SW07收音机电路分析
2021/03/02 无线电
锁定年轻人的双倍活力 星巴克推出星倍醇即饮浓咖啡
2021/03/03 咖啡文化
不用iconv库的gb2312与utf-8的互换函数
2006/10/09 PHP
PHP实现生成透明背景的PNG缩略图函数分享
2014/07/08 PHP
PHP数据库表操作的封装类及用法实例详解
2016/07/12 PHP
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
jQuery的选择器中的通配符使用介绍
2014/03/20 Javascript
什么是Node.js?Node.js详细介绍
2014/06/01 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
2014/06/20 Javascript
教你在heroku云平台上部署Node.js应用
2014/07/30 Javascript
JS获取时间的方法
2015/01/21 Javascript
JavaScript接口的实现三种方式(推荐)
2016/06/14 Javascript
解析js如何获取css样式
2016/12/11 Javascript
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
Vue中使用 setTimeout() setInterval()函数的问题
2018/09/13 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
2019/08/16 Javascript
vue使用swiper实现左右滑动切换图片
2020/10/16 Javascript
[53:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第三场 6.2
2018/06/03 DOTA
Python3内置模块pprint让打印比print更美观详解
2019/06/02 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
python实现ip地址的包含关系判断
2020/02/07 Python
PyQt5高级界面控件之QTableWidget的具体使用方法
2020/02/23 Python
解决jupyter notebook 出现In[*]的问题
2020/04/13 Python
同程旅游英文网站:LY.com
2018/11/13 全球购物
女士和男士时尚鞋在线购物:Shoespie
2019/02/28 全球购物
anello泰国官方网站:日本流行包包品牌
2019/08/08 全球购物
学生手册家长评语
2014/02/10 职场文书
高中军训感言200字
2014/02/23 职场文书
节约用水倡议书
2014/04/16 职场文书
入党积极分子对十八届四中全会期盼的思想汇报
2014/10/17 职场文书
2014年纪委工作总结
2014/12/05 职场文书
会计求职自荐信
2015/03/26 职场文书
学前班教学反思
2016/02/24 职场文书
2019初中学生入团申请书
2019/06/27 职场文书
python爬取新闻门户网站的示例
2021/04/25 Python
我去timi了,一起去timi是什么意思?
2022/04/13 杂记