常见的原始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 相关文章推荐
Ext中下拉列表ComboBox组件store数据格式用法介绍
Jul 15 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
Aug 28 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
Dec 14 Javascript
easyui Draggable组件实现拖动效果
Aug 19 Javascript
JavaScript前端开发之实现二进制读写操作
Nov 04 Javascript
JavaScript高级程序设计(第三版)学习笔记6、7章
Mar 11 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
Nov 16 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
Dec 14 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
Dec 28 Javascript
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
使用JavaScript中的lodash编写双色球效果
Jun 24 Javascript
Vue实现简单的跑马灯
May 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编程之高级技巧——利用Mysql函数
2006/10/09 PHP
phpmailer简单发送邮件的方法(附phpmailer源码下载)
2016/06/13 PHP
js给页面加style无效果的解决方法
2014/01/20 Javascript
让checkbox不选中即将选中的checkbox不选中
2014/07/11 Javascript
jQuery实现图片上传和裁剪插件Croppie
2015/11/29 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
2016/12/12 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
vue的全局变量和全局拦截请求器的示例代码
2018/09/13 Javascript
如何将百度地图包装成Vue的组件的方法步骤
2019/02/12 Javascript
js设置默认时间跨度过程详解
2019/07/17 Javascript
详解基于原生JS验证表单组件xy-form
2019/08/20 Javascript
js删除对象中的某一个字段的方法实现
2021/01/11 Javascript
[01:09:24]Ti4开幕式
2014/07/19 DOTA
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
跟老齐学Python之list和str比较
2014/09/20 Python
浅谈Python 中整型对象的存储问题
2016/05/16 Python
Python3.6 Schedule模块定时任务(实例讲解)
2017/11/09 Python
Django使用Celery异步任务队列的使用
2018/03/13 Python
DataFrame 将某列数据转为数组的方法
2018/04/13 Python
对numpy中布尔型数组的处理方法详解
2018/04/17 Python
Python面向对象之类和对象实例详解
2018/12/10 Python
python 使用递归实现打印一个数字的每一位示例
2020/02/27 Python
利用Python的folium包绘制城市道路图的实现示例
2020/08/24 Python
python PIL模块的基本使用
2020/09/29 Python
CSS3弹性盒模型开发笔记(三)
2016/04/26 HTML / CSS
HTML5 visibilityState属性详细介绍和使用实例
2014/05/03 HTML / CSS
应届生会计电算化求职信
2013/10/03 职场文书
学术会议欢迎词
2014/01/09 职场文书
暑期社会实践方案
2014/02/05 职场文书
2014年学校领导班子对照检查材料
2014/09/19 职场文书
离婚案件答辩状
2015/05/22 职场文书
2015年见习期个人工作总结
2015/05/28 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
python实现简单的名片管理系统
2021/04/26 Python
JS实现扫雷项目总结
2021/05/19 Javascript