常见的原始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 相关文章推荐
Add a Table to a Word Document
Jun 15 Javascript
JavaScript 定义function的三种方式小结
Oct 16 Javascript
ASP中进行HTML数据及JS数据编码函数
Nov 11 Javascript
jQuery.Validate验证库的使用介绍
Apr 26 Javascript
将json当数据库一样操作的javascript lib
Oct 28 Javascript
javascript学习笔记之10个原生技巧
May 21 Javascript
js生成验证码并直接在前端判断
May 15 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
Dec 06 Javascript
jquery ajax双击div可直接修改div中的内容
Mar 04 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
Sep 19 Javascript
微信小程序实现单选功能
Oct 30 Javascript
JS实现扫码枪扫描二维码功能
Jan 03 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
第十一节--重载
2006/11/16 PHP
php whois查询API制作方法
2011/06/23 PHP
thinkphp集成前端脚手架Vue-cli的教程图解
2018/08/30 PHP
jQuery实现页面滚动时层智能浮动定位实例探讨
2013/03/29 Javascript
防止jQuery ajax Load使用缓存的方法小结
2014/02/22 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
2014/04/04 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
2015/04/16 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
JavaScript编程中的Promise使用大全
2015/07/28 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
微信小程序页面上下滚动效果
2020/11/18 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
使用Python3编写抓取网页和只抓网页图片的脚本
2015/08/20 Python
Python编程中的文件操作攻略
2015/10/16 Python
python验证码识别的示例代码
2017/09/21 Python
Python KMeans聚类问题分析
2018/02/23 Python
Python爬虫实现全国失信被执行人名单查询功能示例
2018/05/03 Python
Python XML转Json之XML2Dict的使用方法
2019/01/15 Python
python实现杨氏矩阵查找
2019/03/02 Python
如何利用Python识别图片中的文字
2020/05/31 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
python3中布局背景颜色代码分析
2020/12/01 Python
法雷奥SQA(electric)面试问题
2016/01/23 面试题
实习教师自我鉴定
2013/09/27 职场文书
法律专业实习鉴定
2013/12/22 职场文书
怎样客观的做好自我评价
2013/12/28 职场文书
煤矿机修工岗位职责
2014/02/07 职场文书
淘宝店铺营销方案
2014/02/13 职场文书
家长对老师的评语
2014/04/18 职场文书
十佳中学生事迹材料
2014/06/02 职场文书
2014年物业管理工作总结
2014/11/21 职场文书
八月一日观后感
2015/06/10 职场文书
红色影片观后感
2015/06/18 职场文书
停车场管理制度范本
2015/08/05 职场文书
那些美到让人窒息的诗句,值得你收藏!
2019/08/20 职场文书
公历12个月名称的由来
2022/04/12 杂记