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 相关文章推荐
textContent在Firefox下与innerText等效的属性
May 12 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
Dec 24 Javascript
javascript中加var和不加var的区别 你真的懂吗
Jan 06 Javascript
Angular.js如何从PHP读取后台数据
Mar 24 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
Jun 01 Javascript
利用jQuery实现打字机字幕效果实例代码
Sep 02 Javascript
JavaScript实现跟随滚动缓冲运动广告框
Jul 15 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
Jan 03 Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
Mar 13 Javascript
js html实现计算器功能
Nov 13 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
Nov 13 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
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
在Zeus Web Server中安装PHP语言支持
2006/10/09 PHP
PHP脚本的10个技巧(7)
2006/10/09 PHP
php使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
php数组中包含中文的排序方法
2014/06/03 PHP
PHP实现文件上传与下载实例与总结
2016/03/13 PHP
Django中的cookie与session操作实例代码
2017/08/17 PHP
JavaScript CSS修改学习第二章 样式
2010/02/19 Javascript
JS在textarea光标处插入文本的小例子
2013/03/22 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
Javascript实现单例模式
2016/01/24 Javascript
jQuery模拟select实现下拉菜单功能
2016/06/20 Javascript
移动端界面的适配
2017/01/11 Javascript
原生js检测页面加载完毕的实例
2018/09/11 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
2019/01/05 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
python封装对象实现时间效果
2020/04/23 Python
理解Python垃圾回收机制
2016/02/12 Python
利用pyinstaller将py文件打包为exe的方法
2018/05/14 Python
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
python根据list重命名文件夹里的所有文件实例
2018/10/25 Python
Python 离线工作环境搭建的方法步骤
2019/07/29 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
5分钟快速掌握Python定时任务框架的实现
2021/01/26 Python
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
使用HTML5加载音频和视频的实现代码
2020/11/30 HTML / CSS
爱尔兰领先的在线体育用品零售商:theGAAstore
2018/04/16 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?用contains来区分是否有重复的对象。还是都不用
2013/07/30 面试题
大专生工程监理求职信
2013/10/04 职场文书
高中生家长寄语大全
2014/04/03 职场文书
导游词怎么写
2015/02/04 职场文书
西安大雁塔导游词
2015/02/10 职场文书
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL