常见的原始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 相关文章推荐
JavaScript 继承机制的实现(待续)
May 18 Javascript
JavaScript避免代码的重复执行经验技巧分享
Apr 17 Javascript
jQuery中children()方法用法实例
Jan 07 Javascript
常用jQuery代码分享
Jul 14 Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
Dec 21 Javascript
基于vue配置axios的方法步骤
Nov 09 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
Jun 28 Javascript
vue父组件给子组件的组件传值provide inject的方法
Oct 23 Javascript
javscript 数组扁平化的实现
Feb 03 Javascript
Element Steps步骤条的使用方法
Jul 26 Javascript
谈谈node.js中的模块系统
Sep 01 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程序防止ddos,dns,集群服务器攻击的解决办法
2013/06/18 PHP
thinkphp框架下实现登录、注册、找回密码功能
2016/04/06 PHP
利用PHP将图片转换成base64编码的实现方法
2016/09/13 PHP
php实现留言板功能(代码详解)
2017/03/28 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
php 调用百度sms来发送短信的实现示例
2018/11/02 PHP
键盘控制事件应用教程大全
2006/11/24 Javascript
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
8个实用的jQuery技巧
2014/03/04 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
Flash图片上传组件 swfupload使用指南
2015/03/14 Javascript
jQuery.each使用详解
2015/07/07 Javascript
Bootstrap学习笔记之css样式设计(1)
2016/06/07 Javascript
JS实现的跨浏览器解析XML文件实例
2016/06/21 Javascript
jQuery获取与设置iframe高度的方法
2016/08/01 Javascript
JavaScript生成验证码并实现验证功能
2016/09/24 Javascript
jquery——九宫格大转盘抽奖实例
2017/01/16 Javascript
vue中用H5实现文件上传的方法实例代码
2017/05/27 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
2017/11/02 Javascript
JavaScript满天星导航栏实现方法
2018/03/08 Javascript
深入理解Vue keep-alive及实践总结
2019/08/21 Javascript
Vue.js 无限滚动列表性能优化方案
2019/12/02 Javascript
使用Python的Django框架实现事务交易管理的教程
2015/04/20 Python
python多线程socket编程之多客户端接入
2017/09/12 Python
Python3实现发送QQ邮件功能(文本)
2017/12/15 Python
python如何以表格形式打印输出的方法示例
2019/06/21 Python
keras的ImageDataGenerator和flow()的用法说明
2020/07/03 Python
一款CSS3实现多功能下拉菜单(带分享按)的教程
2014/11/05 HTML / CSS
Juice Beauty官网:有机美容产品,护肤与化妆品
2020/06/13 全球购物
介绍一下XMLHttpRequest对象
2012/02/12 面试题
口腔工艺技术专业毕业生自荐信
2013/09/27 职场文书
高中升旗仪式演讲稿
2014/09/09 职场文书
公司承诺函范文
2015/01/21 职场文书
教师个人工作总结范文2015
2015/10/14 职场文书
2021年pycharm的最新安装教程及基本使用图文详解
2021/04/03 Python
SQL Server使用CROSS APPLY与OUTER APPLY实现连接查询
2022/05/25 SQL Server