常见的原始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 相关文章推荐
JS对select控件option选项的增删改查示例代码
Oct 21 Javascript
教你在heroku云平台上部署Node.js应用
Jul 30 Javascript
jQuery中unbind()方法用法实例
Jan 19 Javascript
微信小程序 页面跳转传参详解
Oct 28 Javascript
javascript读取文本节点方法小结
Dec 15 Javascript
JS实现字符串转驼峰格式的方法
Dec 16 Javascript
angularjs实现的前端分页控件示例
Feb 10 Javascript
JS实现的简单表单验证功能完整实例
Oct 14 Javascript
vue组件watch属性实例讲解
Nov 07 Javascript
vue封装一个简单的div框选时间的组件的方法
Jan 06 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
vue或react项目生产环境去掉console.log的操作
Sep 02 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使用base64加密解密图片示例分享
2014/01/20 PHP
php使用Jpgraph创建柱状图展示年度收支表效果示例
2017/02/15 PHP
php实现单笔转账到支付宝功能
2018/10/09 PHP
9个javascript语法高亮插件 推荐
2009/07/18 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
使用NodeJs 开发微信公众号(三)微信事件交互实例
2016/03/02 NodeJs
Bootstrap每天必学之日期控制
2016/03/07 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
JavaScript实现前端实时搜索功能
2020/03/26 Javascript
Angular.JS通过指令操作DOM的方法
2017/05/10 Javascript
使用bootstrap插件实现模态框效果
2017/05/10 Javascript
angular+webpack2实战例子
2017/05/23 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
2017/06/26 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
2017/07/18 Javascript
JavaScript使用ul中li标签实现删除效果
2019/04/15 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
2019/12/23 jQuery
Angular8 简单表单验证的实现示例
2020/06/03 Javascript
vue 清空input标签 中file的值操作
2020/07/21 Javascript
Python 检查数组元素是否存在类似PHP isset()方法
2014/10/14 Python
python编码最佳实践之总结
2016/02/14 Python
Python双向循环链表实现方法分析
2018/07/30 Python
六行python代码的爱心曲线详解
2019/05/17 Python
python导入pandas具体步骤方法
2019/06/23 Python
Python如何把Spark数据写入ElasticSearch
2020/04/18 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
opencv 图像腐蚀和图像膨胀的实现
2020/07/07 Python
5款实用的python 工具推荐
2020/10/13 Python
10条PHP编程习惯
2014/05/26 面试题
JVM是一个编译程序还是解释程序
2012/09/11 面试题
UNIX文件名称有什么规定
2013/03/25 面试题
超级搞笑检讨书
2014/01/15 职场文书
2015幼儿园庆元旦活动方案
2014/12/09 职场文书
Oracle笔记
2021/04/05 Oracle
详解Python自动化之文件自动化处理
2021/06/21 Python
SpringBoot 整合mongoDB并自定义连接池的示例代码
2022/02/28 MongoDB
Android开发手册自定义Switch开关按钮控件
2022/06/10 Java/Android