常见的原始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 获取Listbox选择的值的代码
Apr 15 Javascript
封装好的一个万能检测表单的方法
Jan 21 Javascript
浅析BootStrap模态框的使用(经典)
Apr 29 Javascript
浅谈js常用内置方法和对象
Sep 24 Javascript
HTML5 js实现拖拉上传文件功能
Nov 20 Javascript
js获取地址栏中传递的参数(两种方法)
Feb 08 Javascript
php 修改密码实现代码
May 24 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
Mar 01 Javascript
Node.js引入UIBootstrap的方法示例
May 11 Javascript
Vue实现日历小插件
Jun 26 Javascript
js设计模式之单例模式原理与用法详解
Aug 15 Javascript
jQuery实现增删改查
Dec 22 jQuery
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之第十天
2006/10/09 PHP
php轻量级的性能分析工具xhprof的安装使用
2015/08/12 PHP
PHP 爬取网页的主要方法
2018/07/13 PHP
Javascript里使用Dom操作Xml
2007/01/22 Javascript
js 判断一个元素是否在页面中存在
2012/12/27 Javascript
用js调用迅雷下载代码的二种方法
2013/04/15 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
2013/11/11 Javascript
angularjs基础教程
2014/12/25 Javascript
javascript使用Promise对象实现异步编程
2016/03/01 Javascript
安装vue-cli报错 -4058 的解决方法
2017/10/19 Javascript
jQuery简单实现对数组去重及排序操作实例
2017/10/31 jQuery
ReactNative实现Toast的示例
2017/12/31 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
基于 D3.js 绘制动态进度条的实例详解
2018/02/26 Javascript
js实现二级菜单点击显示当前内容效果
2018/04/28 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
2018/09/20 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
2018/11/30 Javascript
微信小程序本地存储实现每日签到、连续签到功能
2019/10/09 Javascript
js实现录音上传功能
2019/11/22 Javascript
[00:21]DOTA2亚洲邀请赛 Logo演绎
2015/02/07 DOTA
python数据库操作常用功能使用详解(创建表/插入数据/获取数据)
2013/12/06 Python
简单介绍Python中的JSON使用
2015/04/28 Python
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
在PyCharm下使用 ipython 交互式编程的方法
2019/01/17 Python
python对csv文件追加写入列的方法
2019/08/01 Python
python中matplotlib条件背景颜色的实现
2019/09/02 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
YOOX台湾:意大利奢侈品电商
2018/10/13 全球购物
CHARLES & KEITH加拿大官网:新加坡时尚品牌
2020/03/26 全球购物
应届毕业生个人自荐信范文
2013/11/30 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
军训后的感想
2015/08/07 职场文书
六年级语文教学反思
2016/03/03 职场文书
浅谈Redis位图(Bitmap)及Redis二进制中的问题
2021/07/15 Redis