常见的原始JS选择器使用方法总结


Posted in Javascript onApril 09, 2014

常见的getElementById,getElementsByName,getElementsByTagName。但外国人不满意这些API,于是搞出了getElementsByClassName,后来一点点又出现了jQuery选择器,这里只说原始js选择。

1.getElementById

这是最常用的选择器,通过id来定位:

例:

var test=document.getElementById("test").value;//获取文档中id为test的元素的值,并赋值给test变脸

2.getElementsByName

例:

var test=document.getElementByName("test");//获取文档中name为test的元素的节点,并赋值给test变量,此时test变量是一个数组

3.getElementsByTagName

例:

var test=document.getElementsByTagName("test");//获取文档中class为test的元素的节点,并赋值给test,此时test变量是一个数组 ,这个选择器在IE5,6,7,8中无法使用

4.getElementsByClassName

这个选择器在js的API中是找不到的,想要使用必须自己定义方法,通常的原理为先使用getElementsByTagName("*")取出文档中所有元素,然后进行遍历,使用正则表达式找出匹配的元素放入一个数组返回。网上有很多程序员实现了这个选择器,下面举两例:

(1)The Ultimate getElementsByClassName方案,作者为Robert Nyman,05年实现,可见老外许多东西在很早以前就走得很远了。

//三个参数都是必需的,查找一网页中5007个类名为“cell”的元素,IE8历时1828 ~ 1844毫秒, 
//IE6为4610 ~ 6109毫秒,FF3.5为46 ~ 48毫秒,opera10为31 ~ 32毫秒,Chrome为23~ 26毫秒, 
//safari4为19 ~ 20毫秒 
function getElementsByClassName(oElm, strTagName, strClassName){ 
var arrElements = (strTagName == "*" && oElm.all)? oElm.all : 
oElm.getElementsByTagName(strTagName); 
var arrReturnElements = new Array(); 
strClassName = strClassName.replace(/\-/g, "\\-"); 
var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)"); 
var oElement; 
for(var i=0; i < arrElements.length; i++){ 
oElement = arrElements[i]; 
if(oRegExp.test(oElement.className)){ 
arrReturnElements.push(oElement); 
} 
} 
return (arrReturnElements) 
}

(2)由Dustin Diaz(《JavaScript Design Patterns》的作者)提供,但兼容性不如上面的,不支持IE5。
//后两参数是可靠的,查找一网页中5007个类名为“cell”的元素,IE8历时78毫秒,IE6历时125~171毫秒 
//FF3.5为42 ~ 48毫秒,opera10为31 毫秒,Chrome为22~ 25毫秒,safari4为18 ~ 19毫秒 
var getElementsByClass = function(searchClass,node,tag) { 
var classElements = new Array(); 
if ( node == null ) 
node = document; 
if ( tag == null ) 
tag = '*'; 
var els = node.getElementsByTagName(tag); 
var elsLen = els.length; 
var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"); 
for (i = 0, j = 0; i < elsLen; i++) { 
if ( pattern.test(els[i].className) ) { 
classElements[j] = els[i]; 
j++; 
} 
} 
return classElements; 
}

--------------------------------------------------------------------------------------------------------------------------------------------------------

注:this可以表示当前元素的节点。

--------------------------------------------------------------------------------------------------------------------------------------------------------

下面是配合事件等知识点的一些常用的使用方法:

//提交id为test的表单 document.getElementById("test").submit(); 
//将id为test元素的边框设置为2个像素,实体,红色 
document.getElementById("test").style.border="2px solid red"; 
//鼠标移动或移出id为test的元素,改变其背景色 
function test(){ 
document.getElementById("test").onmouseover=function(){document.getElementById("test2").style.backgroundColor="red"}; 
document.getElementById("test").onmouseout=function(){document.getElementById("test2").style.backgroundColor="blue"}; 
} 
//弹出文档中name为test的元素的个数 
function test() 

{ 

var test=document.getElementsByName("test"); 

alert(test.length); 

}
Javascript 相关文章推荐
JQuery 选项卡效果(JS与HTML的分离)
Apr 01 Javascript
js实现表格字段排序
Feb 19 Javascript
基于JavaScript操作DOM常用的API小结
Dec 01 Javascript
浅谈JS之tagNaem和nodeName
Sep 13 Javascript
jQuery实现的浮动层div浏览器居中显示效果
Feb 03 Javascript
js 获取图像缩放后的实际宽高,位置等信息
Mar 07 Javascript
微信小程序开发图片拖拽实例详解
May 05 Javascript
vue中eslintrc.js配置最详细介绍
Dec 21 Javascript
js实现延迟加载的几种方法详解
Jan 19 Javascript
使vue实现jQuery调用的两种方法
May 12 jQuery
vue中的 $slot 获取插槽的节点实例
Nov 12 Javascript
Vue实现简单的留言板
Oct 23 Javascript
jquery查找父元素、子元素(个人经验总结)
Apr 09 #Javascript
js控制iframe的高度/宽度让其自适应内容
Apr 09 #Javascript
JS、DOM和JQuery之间的关系示例分析
Apr 09 #Javascript
jQuery遍历Table应用示例
Apr 09 #Javascript
通过url查找a元素并点击
Apr 09 #Javascript
js数组方法扩展实现数组统计函数
Apr 09 #Javascript
jquery实现pager控件示例
Apr 09 #Javascript
You might like
PHP逐行输出(ob_flush与flush的组合)
2012/02/04 PHP
php 伪静态之IIS篇
2014/06/02 PHP
基于PHP的简单采集数据入库程序
2014/07/30 PHP
php实现遍历目录并删除指定文件中指定内容
2015/01/21 PHP
php里array_work用法实例分析
2015/07/13 PHP
Laravel框架基础语法与知识点整理【模板变量、输出、include引入子视图等】
2019/12/03 PHP
ExtJs使用总结(非常详细)
2012/03/22 Javascript
javascript 图片裁剪技巧解读
2012/11/15 Javascript
如何用js控制frame的隐藏或显示的解决办法
2013/03/20 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
2013/11/20 Javascript
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
Javascript编写俄罗斯方块思路及实例
2015/07/07 Javascript
AngularJS 路由详解和简单实例
2016/07/28 Javascript
jQuery实现的自定义弹出层效果实例详解
2016/09/04 Javascript
js实现界面向原生界面发消息并跳转功能
2016/11/22 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
2021/01/26 Vue.js
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
[37:29]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.19
2020/11/19 DOTA
python读取html中指定元素生成excle文件示例
2014/04/03 Python
python数据类型_字符串常用操作(详解)
2017/05/30 Python
完美解决安装完tensorflow后pip无法使用的问题
2018/06/11 Python
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
详解PyCharm安装MicroPython插件的教程
2019/06/24 Python
快速解决vue.js 模板和jinja 模板冲突的问题
2019/07/26 Python
Python判断字符串是否xx开始或结尾的示例
2019/08/08 Python
python监控nginx端口和进程状态
2019/09/06 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
红色康乃馨酒店:Red Carnation Hotels
2017/06/22 全球购物
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
交通事故协议书范文
2014/04/16 职场文书
银行开户授权委托书格式
2014/10/10 职场文书
青年志愿者服务活动总结
2015/05/06 职场文书
JS如何实现基于websocket的多端桥接平台
2021/05/14 Javascript