常见的原始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索引在使用中的一些困惑
Oct 24 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
Jul 31 Javascript
jQuery简单实现日历的方法
May 04 Javascript
jquery合并表格中相同文本的相邻单元格
Jul 17 Javascript
JS实现仿微博可关闭弹出层效果
Sep 21 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
Nov 29 Javascript
jQuery增加与删除table列的方法
Mar 01 Javascript
jQuery基础知识点总结(必看)
May 31 Javascript
JavaScript方法_动力节点Java学院整理
Jun 28 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
Sep 02 Javascript
vue 移动端记录页面浏览位置的方法
Mar 11 Javascript
解决Vue watch里调用方法的坑
Nov 07 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数组声明、遍历、数组全局变量使用小结
2013/06/05 PHP
php强制更新图片缓存的方法
2015/02/11 PHP
浅谈PHP的反射机制
2016/12/15 PHP
HTTP头隐藏PHP版本号实现过程解析
2020/12/09 PHP
JavaScript开发时的五个注意事项
2007/12/08 Javascript
jQuery 表单验证扩展代码(二)
2010/10/20 Javascript
jQuery 选择器、DOM操作、事件、动画
2010/11/25 Javascript
html中table数据排序的js代码
2011/08/09 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
2012/12/25 Javascript
有关于eclipse配置spket需要注意的一些地方
2013/04/07 Javascript
jquery二级导航内容均分的原理及实现
2013/08/13 Javascript
jQuery中filter()方法用法实例
2015/01/06 Javascript
js实现仿Windows风格选项卡和按钮效果实例
2015/05/13 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
2020/06/23 Javascript
Select2.js下拉框使用小结
2016/10/24 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
2017/05/22 Javascript
JavaScript 中的 this 简单规则
2017/09/19 Javascript
node通过npm写一个cli命令行工具
2017/10/12 Javascript
利用JS响应式修改vue实现页面的input值
2019/09/02 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
2020/03/31 Javascript
JS异步宏队列微队列原理详解
2020/09/09 Javascript
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
python字符串Intern机制详解
2019/07/01 Python
从零实现一个自定义html5播放器的示例代码
2017/08/01 HTML / CSS
俄语地区最大的中国商品在线购物网站之一:Umka Mall
2019/11/03 全球购物
办公室内勤工作职责
2013/12/11 职场文书
创建青年文明号材料
2014/05/09 职场文书
工作求职信
2014/07/04 职场文书
关于运动会广播稿50字
2014/10/18 职场文书
大学生毕业评语
2014/12/31 职场文书
导游词之杭州西湖
2019/09/19 职场文书
一文搞懂如何实现Go 超时控制
2021/03/30 Python
MySQL Router实现MySQL的读写分离的方法
2021/05/27 MySQL
sql server删除前1000行数据的方法实例
2021/08/30 SQL Server
面试分析分布式架构Redis热点key大Value解决方案
2022/03/13 Redis