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 相关文章推荐
使用TextRange获取输入框中光标的位置的代码
Mar 08 Javascript
PNG背景在不同浏览器下的应用
Jun 22 Javascript
Jquery index()方法 获取相应元素索引值
Oct 12 Javascript
JS画线(实例代码)
Nov 20 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
Dec 23 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
Nov 18 Javascript
jQuery添加和删除指定标签的方法
Dec 16 Javascript
学习JavaScript设计模式之中介者模式
Jan 14 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
May 27 Javascript
拥Bootstrap入怀——导航栏篇
May 30 Javascript
jQuery动态创建元素以及追加节点的实现方法
Oct 20 Javascript
vue项目部署上线遇到的问题及解决方法
Jun 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 中执行系统外部命令
2006/10/09 PHP
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
获取PHP警告错误信息的解决方法
2013/06/03 PHP
PHP整数取余返回负数的相关解决方法
2014/05/15 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
PHP基于自定义类随机生成姓名的方法示例
2017/08/05 PHP
javascript 有趣而诡异的数组
2009/04/06 Javascript
js Date自定义函数 延迟脚本执行
2010/03/10 Javascript
仿新浪微博登陆邮箱提示效果的js代码
2013/08/02 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
2014/02/07 Javascript
javascript 面向对象封装与继承
2014/11/27 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
Vue自定义事件(详解)
2017/08/19 Javascript
ReactNative 之FlatList使用及踩坑封装总结
2017/11/29 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
2019/04/29 Javascript
Vue scoped及deep使用方法解析
2020/08/01 Javascript
如何在JavaScript中等分数组的实现
2020/12/13 Javascript
python将txt文件读入为np.array的方法
2018/10/30 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
Python连接字符串过程详解
2020/01/06 Python
Python如何读写二进制数组数据
2020/08/01 Python
Python调用C/C++的方法解析
2020/08/05 Python
如何在vscode中安装python库的方法步骤
2021/01/06 Python
css3制作彩色边线3d立体按钮的示例(css3按钮)
2014/05/06 HTML / CSS
灵泰克Java笔试题
2016/01/09 面试题
火车的故事教学反思
2014/02/11 职场文书
大学生个人求职口试自我评价
2014/02/16 职场文书
班级学习雷锋活动总结
2014/07/04 职场文书
药店促销活动策划方案
2014/08/24 职场文书
优秀班主任材料
2014/12/16 职场文书
瘦西湖导游词
2015/02/03 职场文书
2015年药店工作总结
2015/04/20 职场文书
地球上的星星观后感
2015/06/02 职场文书
承诺书怎么写 ?
2019/04/16 职场文书
python requests模块的使用示例
2021/04/07 Python
深度学习tensorflow基础mnist
2021/04/14 Python