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 DOM 学习第七章 表单的扩展
Feb 19 Javascript
初识javascript 文档碎片
Jul 13 Javascript
ajax中get和post的说明及使用与区别
Dec 23 Javascript
JS文本框默认值处理详解
Jul 10 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
Nov 21 Javascript
Jquery响应回车键直接提交表单操作代码
Jul 25 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
May 13 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
Oct 13 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
Oct 31 Javascript
浅谈redux以及react-redux简单实现
Aug 28 Javascript
深入理解vue中的slot与slot-scope
Apr 22 Javascript
Node.js API详解之 os模块用法实例分析
May 06 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
用cookies来跟踪识别用户
2006/10/09 PHP
通过PHP修改Linux或Unix口令的方法分享
2012/01/30 PHP
php笔记之:初探PHPcms模块开发介绍
2013/04/26 PHP
php实现把url转换迅雷thunder资源下载地址的方法
2014/11/07 PHP
学习php设计模式 php实现访问者模式(Visitor)
2015/12/07 PHP
php实现购物车功能(上)
2020/07/23 PHP
Firefox window.close()的使用注意事项
2009/04/11 Javascript
js最简单的拖拽效果实现代码
2010/09/24 Javascript
js循环改变div颜色具体方法
2013/06/25 Javascript
jquery indexOf使用方法
2013/08/19 Javascript
js文本框输入点回车触发确定兼容IE、FF等
2013/11/19 Javascript
EasyUI 结合JS导出Excel文件的实现方法
2016/11/10 Javascript
Node.js连接postgreSQL并进行数据操作
2016/12/18 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
JS库之Three.js 简易入门教程(详解之一)
2017/09/13 Javascript
javascript中的replace函数(带注释demo)
2018/01/07 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
JavaScript实现HSL拾色器
2020/05/21 Javascript
浅析JavaScript 函数防抖和节流
2020/07/13 Javascript
js实现金山打字通小游戏
2020/07/24 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
2020/08/03 Javascript
python 时间信息“2018-02-04 18:23:35“ 解析成字典形式的结果代码详解
2018/04/19 Python
python模块之subprocess模块级方法的使用
2019/03/26 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
django-rest-swagger的优化使用方法
2019/08/29 Python
利用Python的sympy包求解一元三次方程示例
2019/11/22 Python
tensorflow没有output结点,存储成pb文件的例子
2020/01/04 Python
Python实现i人事自动打卡的示例代码
2020/01/09 Python
一文带你掌握Pyecharts地理数据可视化的方法
2021/02/06 Python
自荐信格式写作方法有哪些呢
2013/11/20 职场文书
小学生红领巾广播稿
2014/01/21 职场文书
2014年会策划方案
2014/05/11 职场文书
节能标语大全
2014/06/21 职场文书
功夫熊猫观后感
2015/06/10 职场文书
2015年重阳节主持词
2015/07/04 职场文书
Oracle中update和select 关联操作
2022/01/18 Oracle