常见的原始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 相关文章推荐
Javascript合并表格中具有相同内容单元格示例
Aug 11 Javascript
jQuery 回车事件enter使用示例
Feb 18 Javascript
jQuery的live()方法对hover事件的处理示例
Feb 27 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
Mar 03 Javascript
第七章之菜单按钮图标组件
Apr 25 Javascript
详解JavaScript节流函数中的Throttle
Jul 16 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
Dec 28 Javascript
JavaScript中双向数据绑定详解
May 03 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
Sep 18 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
Dec 06 Javascript
mpvue中使用flyjs全局拦截的实现代码
Sep 13 Javascript
axios对请求各种异常情况处理的封装方法
Sep 25 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 daddslashes()和 saddslashes()有哪些区别分析
2012/10/26 PHP
用JS操作FRAME中的IFRAME及其内容的实现代码
2008/07/26 Javascript
jQuery插件StickUp实现网页导航置顶
2015/04/12 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
针对初学者的jQuery入门指南
2015/08/15 Javascript
Js制作点击输入框时默认文字消失的效果
2015/09/05 Javascript
jQuery 跨域访问解决原理案例详解
2016/07/09 Javascript
Js获取当前日期时间及格式化代码
2016/09/17 Javascript
AngularJS模仿Form表单提交的实现代码
2016/12/08 Javascript
Bootstrap实现的标签页内容切换显示效果示例
2017/05/25 Javascript
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
基于vue 实现token验证的实例代码
2017/12/14 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
javascript少儿编程关于返回值的函数内容
2018/05/27 Javascript
javascript实现时间日期的格式化的方法汇总
2020/08/06 Javascript
[00:36]DOTA2上海特级锦标赛 Alliance战队宣传片
2016/03/04 DOTA
[01:33]完美世界DOTA2联赛PWL S3 集锦第二期
2020/12/21 DOTA
Python 正则表达式操作指南
2009/05/04 Python
python之文件的读写和文件目录以及文件夹的操作实现代码
2016/08/28 Python
python win32 简单操作方法
2017/05/25 Python
python的socket编程入门
2018/01/29 Python
python自动发邮件库yagmail的示例代码
2018/02/23 Python
python实现两张图片的像素融合
2019/02/23 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
Python matplotlib可视化实例解析
2020/06/01 Python
浅谈Python爬虫原理与数据抓取
2020/07/21 Python
Python读取Excel一列并计算所有对象出现次数的方法
2020/09/04 Python
Python中免验证跳转到内容页的实例代码
2020/10/23 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
python源文件的字符编码知识点详解
2021/03/04 Python
amazeui模态框弹出后立马消失并刷新页面
2020/08/19 HTML / CSS
Origins悦木之源英国官网:雅诗兰黛集团高端植物护肤品牌
2017/11/06 全球购物
职务聘任书范文
2014/03/29 职场文书
工程项目经理岗位职责
2015/02/02 职场文书
2019暑假阅读倡议书
2019/06/24 职场文书
Jupyter notebook 更改文件打开的默认路径操作
2021/05/21 Python