常见的原始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代码
Dec 15 Javascript
window.ActiveXObject使用说明
Nov 08 Javascript
javascript一些实用技巧小结
Mar 18 Javascript
瀑布流的实现方式(原生js+jquery+css3)
Jun 28 Javascript
功能强大的Bootstrap组件(结合js)
Aug 03 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
May 13 Javascript
npm全局模块卸载及默认安装目录修改方法
May 15 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
Sep 26 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
Jun 05 Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 Javascript
vue中配置scss全局变量的步骤
Dec 28 Vue.js
原生JavaScript实现简单五子棋游戏
Jun 28 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
大师制作的中短波矿石收音机
2020/04/02 无线电
PHP 数组和字符串互相转换实现方法
2013/03/26 PHP
php addslashes 利用递归实现使用反斜线引用字符串
2013/08/05 PHP
php读取纯真ip数据库使用示例
2014/01/26 PHP
php循环创建目录示例分享(php创建多级目录)
2014/03/04 PHP
ThinkPHP采用GET方式获取中文参数查询无结果的解决方法
2014/06/26 PHP
Symfony2使用第三方库Upload制作图片上传实例详解
2016/02/04 PHP
JQuery jsonp 使用示例代码
2009/08/12 Javascript
JavaScript的各种常见函数定义方法
2014/09/16 Javascript
prototype框架中美元符号$用法分析
2016/01/22 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
2016/07/08 Javascript
分析javascript中9 个常见错误阻碍你进步
2017/09/18 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
2017/12/09 Javascript
微信小程序使用component自定义toast弹窗效果
2018/11/27 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
微信小程序中使用echarts的实现方法
2019/04/24 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
2020/05/09 Javascript
[04:19]完美世界携手游戏风云打造 卡尔工作室模型介绍篇
2013/04/24 DOTA
使用Turtle画正螺旋线的方法
2017/09/22 Python
VScode编写第一个Python程序HelloWorld步骤
2018/04/06 Python
Python中的函数作用域
2018/05/07 Python
Pycharm导入Python包,模块的图文教程
2018/06/13 Python
python操作kafka实践的示例代码
2019/06/19 Python
使用python对多个txt文件中的数据进行筛选的方法
2019/07/10 Python
python如何实现单链表的反转
2020/02/10 Python
Python字符串格式化f-string多种功能实现
2020/05/07 Python
python里反向传播算法详解
2020/11/22 Python
Html5游戏开发之乒乓Ping Pong游戏示例(一)
2013/01/21 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
促销活动总结
2014/04/28 职场文书
推广活动策划方案
2014/08/23 职场文书
初中优秀学生评语
2014/12/29 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书
年会主持人开场白台词
2015/05/29 职场文书
员工工作心得体会
2019/05/07 职场文书
Go 通过结构struct实现接口interface的问题
2021/10/05 Golang