常见的原始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 相关文章推荐
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
Mar 31 Javascript
JS根据变量保存方法名并执行方法示例
Apr 04 Javascript
使用JQuery 加载页面时调用JS的实现方法
May 30 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
Nov 04 Javascript
jqueryUI tab标签页代码分享
Oct 09 jQuery
js断点调试经验分享
Dec 08 Javascript
Angular2学习笔记之数据绑定的示例代码
Jan 03 Javascript
在小程序中推送模板消息的实现方法
Jul 22 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
Jul 15 Javascript
JavaScript数组常用的增删改查与其他属性详解
Oct 13 Javascript
Vue和Flask通信的实现
May 19 Vue.js
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
PHP4实际应用经验篇(2)
2006/10/09 PHP
PHP几个数学计算的内部函数学习整理
2011/08/06 PHP
shopex中集成的站长统计功能的代码简单分析
2011/08/11 PHP
数据库中排序的对比及使用条件详解
2012/02/23 PHP
PHP将session信息存储到数据库的类实例
2015/03/04 PHP
浅谈PHP中JSON数据操作
2015/07/01 PHP
超清晰的document对象详解
2007/02/27 Javascript
js 优化次数过多的循环 考虑到性能问题
2011/03/05 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
2014/01/24 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
原生Js实现简易烟花爆炸效果的方法
2015/03/20 Javascript
nodejs中使用多线程编程的方法实例
2015/03/24 NodeJs
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
vue2.5.2使用http请求获取静态json数据的实例代码
2018/02/27 Javascript
微信小程序服务器日期格式化问题
2020/01/07 Javascript
OpenLayers3实现鼠标移动显示坐标
2020/09/25 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
Python中import导入上一级目录模块及循环import问题的解决
2016/06/04 Python
简单了解Django ContentType内置组件
2019/07/23 Python
python读写csv文件并增加行列的实例代码
2019/08/01 Python
python3 实现的对象与json相互转换操作示例
2019/08/17 Python
Python3自定义json逐层解析器代码
2020/05/11 Python
selenium+python自动化78-autoit参数化与批量上传功能的实现
2021/03/04 Python
Sperry官网:帆船鞋创始品牌
2016/09/07 全球购物
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
Coltorti Boutique官网:来自意大利的设计师品牌买手店
2018/11/09 全球购物
汉语言文学职业规划
2014/02/14 职场文书
司机职责范本
2014/03/08 职场文书
大学生演讲稿
2014/04/25 职场文书
竞选宣传委员演讲稿
2014/05/24 职场文书
“九一八事变纪念日”国旗下讲话稿
2014/09/14 职场文书
2014年测量员工作总结
2014/12/12 职场文书
2015年化验室工作总结
2015/04/23 职场文书
公司年会开场白
2015/06/01 职场文书
2016高校自主招生自荐信范文
2016/01/28 职场文书
JS如何使用剪贴板操作Clipboard API
2021/05/17 Javascript