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 相关文章推荐
js 静态动态成员 and 信息的封装和隐藏
May 29 Javascript
JavaScript Scoping and Hoisting 翻译
Jul 03 Javascript
js遍历、动态的添加数据的小例子
Jun 22 Javascript
Javascript中各种trim的实现详细解析
Dec 10 Javascript
Bootstrap的图片轮播示例代码
Aug 31 Javascript
javascript特殊文本输入框网页特效
Sep 13 Javascript
通过js修改input、select默认字体颜色
Apr 19 Javascript
vue.js开发环境搭建教程
May 04 Javascript
安装多版本Vue-CLI的实现方法
Mar 24 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
May 11 Javascript
vue-i18n实现中英文切换的方法
Jul 06 Javascript
JavaScript 实现轮播图特效的示例
Nov 05 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
《Re:从零开始的异世界生活 冰结之绊》
2020/04/09 日漫
解析php中的escape函数
2013/06/29 PHP
php fread读取文件注意事项
2016/09/24 PHP
jQuery load方法用法集锦
2011/12/06 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
JavaScript数组对象赋值用法实例
2015/08/04 Javascript
轻松5句话解决JavaScript的作用域
2016/07/15 Javascript
jquery+ajax实现省市区三级联动效果简单示例
2017/01/04 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
2017/02/14 Javascript
JS控件bootstrap datepicker使用方法详解
2017/03/25 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
2017/04/18 Javascript
AngularJS 应用模块化的使用
2018/04/04 Javascript
在vue中使用setInterval的方法示例
2019/04/16 Javascript
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
2019/07/27 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
layui 解决富文本框form表单提交为空的问题
2019/10/26 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
2019/11/26 Javascript
javascript实现前端分页效果
2020/06/24 Javascript
Python3写入文件常用方法实例分析
2015/05/22 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
NumPy 数学函数及代数运算的实现代码
2018/07/18 Python
Pytorch 实现focal_loss 多类别和二分类示例
2020/01/14 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
PyQt5实现画布小程序
2020/05/30 Python
Python利用Faiss库实现ANN近邻搜索的方法详解
2020/08/03 Python
NFL墨西哥官方商店:Tienda NFL
2017/11/28 全球购物
实习教师自我鉴定
2013/09/27 职场文书
眼镜促销方案
2014/03/15 职场文书
2014报到证办理个人委托书
2014/10/08 职场文书
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书
我的暑假生活作文(五年级)范文
2019/08/07 职场文书
二手手机买卖合同范本(2019年版)
2019/10/28 职场文书
python基础详解之if循环语句
2021/04/24 Python
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers