常见的原始JS选择器使用方法总结

 常见的原始JS选择器有getElementById,getElementsByName,getElementsByTagName,就使用上为大家总结下

常见的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); 
  } 
 
 

时间: 2024-10-31 10:16:06

常见的原始JS选择器使用方法总结的相关文章

常见的原始JS选择器使用方法总结_javascript技巧

常见的getElementById,getElementsByName,getElementsByTagName.但外国人不满意这些API,于是搞出了getElementsByClassName,后来一点点又出现了jQuery选择器,这里只说原始js选择. 1.getElementById 这是最常用的选择器,通过id来定位: 例: var test=document.getElementById("test").value;//获取文档中id为test的元素的值,并赋值给test变脸

常见JS挂马方法及如何防止网站被黑客挂马?

一.常见JS挂马方法 现在最多见的JS挂马方法有两种,一种是直接将JavaScript脚本代码写在网页中,当访问者在浏览网页时,恶意的挂马脚本就会通过用户的浏览器悄悄地打开网马窗口,隐藏地运行. 这种方法使用的关键代码如下: window.open("http://www.mahaixiang.cn/木马.html","","toolbar=no,location=no,directories=no,status=no,menubar=no,scro ll

JQuery中上下文选择器实现方法

  本文实例讲述了JQuery中上下文选择器实现方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi

JavaScript更改原始对象valueOf的方法

 这篇文章主要介绍了JavaScript更改原始对象valueOf的方法,涉及javascript使用自定义valueOf函数替换掉原始object中valueOf的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了JavaScript更改原始对象valueOf的方法.分享给大家供大家参考.具体分析如下: JS中的对象都包含valueOf方法,我们可以通过自定义valueOf函数替换掉原始object的valueOf ? 1 2 3 4 5 6 7 8 9 function

JQuery中上下文选择器实现方法_jquery

本文实例讲述了JQuery中上下文选择器实现方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

js数组使用方法与实例教程

js数组使用方法与实例教程 定义数组 数组对象用来在单独的变量名中存储一系列的值. 我们使用关键词 new 来创建数组对象.下面的代码定义了一个名为 myArray 的数组对象: var myArray=new Array()有两种向数组赋值的方法(你可以添加任意多的值,就像你可以定义你需要的任意多的变量一样). 1: var mycars=new Array() mycars[0]="Saab" mycars[1]="Volvo" mycars[2]="

常见的javascript跨域通信方法_javascript技巧

本文主要介绍几种常见的javascript跨域通信方法.首先讲解一下JSONP.1.JSONP JSONP(JSON with Padding)是JSON的一种"使用模式",可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外.利用 <script> 元素的这个开放策略,网页可以得到从其他

使用coffeescript编写node.js项目的方法汇总_javascript技巧

Node.js 基于JavaScript编写应用,JavaScript是我的主要开发语言.CoffeeScript是编译为JavaScript的编程语言.其实CoffeeScript语言因其可以一对一的翻译为JavaScript的特性,使用起来也非常灵活.将其引入项目的方式也有很多种,在此,我将使用coffeescript编写node.js项目的方法做一个汇总. 直接使用coffee指令运行纯coffeescript项目 一般提起coffeescript,自然而然地会想到他是javascript

js选择器全面解析_基础知识

原生JS选择器有getElementById.getElementsByName.getElementsByTagName和getElementsByClassName这四个,下面我就一个一个介绍这四个选择器的用法. 1.getElementById(通过ID获取元素) 用法:document.getElementById("Id");Id为要获取的元素的id属性值. 2.getElementsByName(通过name属性获取元素) 用法:document.getElementsBy