Javascript教程:querySelector()方法

module dom {

[Supplemental, NoInterfaceObject]

interface NodeSelector {

Element querySelector(in DOMString selectors);

NodeList querySelectorAll(in DOMString selectors);

};

Document implements NodeSelector;

DocumentFragment implements NodeSelector;

Element implements NodeSelector;

};

从接口定义可以看到Document、DocumentFragment、Element都实现了NodeSelector接口。即这三种类型的元素都拥有者两个方法。querySelector和querySelectorAll的参数须是符合css selector的字符串。不同的是querySelector返回的是一个对象,querySelectorAll返回的一个集合(NodeList)。精心开发5年的UI前端框架!

目前 IE8/9及Firefox/Chrome/Safari/Opera的最新版已经支持它们。

 querySelector()方法接受一个CSS查询并返回匹配模式的第一个子孙元素,如果没有匹配的元素则返回null。请看下面的例子:

//获取body元素 

varbody=document.querySelector("body"); 

//获取ID为myDiv的元素 

varmyDiv=document.querySelecotr("#myDiv"); 

//获取第一个包含类selected的元素 

varselected=document.querySelector(".selected"); 

//获取第一个包含类button的图像元素

  

  varimg=document.body.querySelector("img.button");当querySelector()方法应用Document类型上时,它会尝试从文档元素开始匹配模式。如果应用与Element类型,查询则只会尝试从该元素的子孙节点中寻找匹配。

  

  CSS查询可以根据需要复杂化或简单化。如果查询中有语法错误或者有不支持选择器,那么querySelector()或抛出一个错误。 精心开发5年的UI前端框架!

  

  querySelector()方法还接受可选的第二个参数,它是一个命名空间解析器,就是一个接受一个命名空间前缀并返回其相关URI的函数,类似于:

varnsresolver=function(prefix){ 

switch(prefix){ 

case"w3cmm": 

return"http://www.w3cmm.com"; 

//此处其它代码 

} 

};

  

命名空间解析器对于在嵌入了其它语言诸如SVG或MathML的XHTML文档中执行查询非常有用,XML文档亦如此。CSS查询中的命名空间是使用一个管道来指定的,如下:

varsvgImage=document.querySelector("svg|svg",function(prefix){ 

switch(prefix){ 

case:"svg": 

return"http://www.w3.rog/2000/svg"; 

} 

});

  

这个例子通过在文档中查找定义为<svg:svg>的元素返回了第一个SVG图像。当在查询中遇到了svg命名空间前缀时,则调用命名空间解析器函数来确定URI。没有命名空间解析器,则会抛出一个错误,因为查询引擎无法辨识svg命名空间前缀。

   精心开发5年的UI前端框架!

各浏览器中querySelector和querySelectorAll的实现差异

如想获取页面class属性为"red"的元素,除了使用document.getElementsByClassName(‘red‘)还可以使用document.querySelector(‘.red‘)和document.querySelectorAll(‘.red‘)。

但Element.querySelector和Element.querySelectorAll的实现有错误,如下

<div id="d1">
    <p><a href=http://www.jcodecraeer.com>SINA</a></p>
</div>
<script type="text/javascript">
    function $(id){return document.getElementById(id);}
    var d1 = $('d1');
    var obj1 = d1.querySelector('div a');
    var obj2 = d1.querySelectorAll('div a');
    alert(obj1); // -> http://www.jcodecraeer.com
    alert(obj2.length); // -> 1
</script>

在支持这两个方法的浏览器可以看到分别弹出了“http://www.sina.com.cn/”,和 “1”。说明查询到了想要的元素或元素集合。这与W3C的定义却是不合的,根据定义应该是在元素d1范围内查找"div a",而d1内压根没有div。因此应该分别返回null,空集合。

jQuery1.4.2 及之前版本中只使用了document.querySelectorAll,没有使用Element.querySelectorAll。 jQuery1.4.3 后使用了Element.querySelectorAll,但做了修复。在选择器前加了"#__sizzle__"以强制其在指定元素内查找(3903-3918行)。简化下 精心开发5年的UI前端框架!

function $(id){return document.getElementById(id);}
var d1 = $('d1');
var obj1 = d1.querySelector('div a');
var obj2 = d1.querySelectorAll('div a');
var old = d1.id, id = d1.id = "__sizzle__";
try {
    var query = '#' + id + ' div a';
    alert(d1.querySelector( query ));
    alert(d1.querySelectorAll( query ).length);
} catch(e) {
} finally {
    old ? d1.id = old : d1.removeAttribute( "id" );
}

实现很巧妙,指定范围的元素如果有id,将其保留在old,"__sizzle__"赋值其作为临时id,在选择器"div a"前指定查找范围为"#__sizzle__",即d1。finally语句来最后清理,如果指定范围的元素本身有id将其恢复为old,没有则去掉临时的id属性"__sizzle__"。

时间: 2024-10-19 00:08:41

Javascript教程:querySelector()方法的相关文章

Javascript教程:js异步编程的4种方法详述(转载)

文章收集转载于(阮一峰的网络日志) 你可能知道,Javascript语言的执行环境是“单线程”(single thread). 所谓“单线程”,就是指一次只能完成一件任务.如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推. 这种模式的好处是实现起来比较简单,执行环境相对单纯:坏处是只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行.常见的浏览器无响应(假死),往往就是因为某一段Javascript代码长时间运行(比如死循环),导致整个页面卡在这个地方

JavaScript 函数定义方法

JavaScript 函数定义方法. 函数声明 在之前的教程中,你已经了解了函数声明的语法 : function functionName(parameters) { 执行的代码 } 函数声明后不会立即执行,会在我们需要的时候调用到. function myFunction(a, b) { return a * b; } 分号是用来分隔可执行JavaScript语句. 由于函数声明不是一个可执行语句,所以不以分号结束. 函数表达式 JavaScript 函数可以通过一个表达式定义. 函数表达式可

Swiper教程 —— 使用方法

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:Swiper教程 —— 使用方法 Swiper使用方法 1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件. <!DOCTYPE html> <html> <head> ... <link rel="stylesheet" href="path/to/swiper.min.css"> </head>

JavaScript教程之------------------JavaScript实现

JavaScript的核心ECMAScript描述了该语言的语法与基本对象: DOM描述了处理网页内容的方法和接口: BOM描述了与浏览器进行交互的方法和接口: 完整的JavaScript实现是由以下3个不同部分组成的: ECMAScript 描述了以下内容: 语法 类型 语句 关键字 保留字 运算符 对象---------------对象只是其中之一 ECMAScript 仅仅是一个描述,定义了脚本语言的所有属性.方法和对象. JavaScript教程之------------------Ja

Javascript教程:delete删除对象

在javascript中,我们有时候要使用delete删除对象.但是,对于delete的一些细节我们未必尽知.昨天,看到kangax分析delete的文章,获益匪浅.本文将文章的精华部分翻译出来,与各位分享. 原理 代码类型 执行上下文 激活对象/可变对象 属性特性 内置对象和DontDelete 未声明的赋值 Firebug 困惑 通过eval删除变量 浏览器兼容性 Gecko DontDelete bug IE bugs 误区 ‘delete’和宿主对象 ES5严格模式 总结 原理 为什么我

让IE6、IE7支持querySelectorAll和querySelector方法

querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素.目前几乎主流浏览器均支持了他们.包括 IE8(含) 以上版本. Firefox. Chrome.Safari.Opera. 关于querySelector 和 querySelectorAll 方法的使用,请参考各浏览器中querySelector和querySelectorAll的实现差异和javascript

JavaScript中querySelector()和getElementById()(getXXXByXX)的区别

在日常开发中,使用JavaScript获取元素的时候,最常用的方法就是document.getElementById(getXXXByXX)方法.但是最近发现有很多地方使用的是querySelector方法而不是使用前面的方法.去官方文档查看是这么说的: 文档对象模型Document引用的querySelector()方法返回文档中与指定选择器或选择器组匹配的第一个 html元素Element. 如果找不到匹配项,则返回null. 这句话看意思和getElementById(getXXXByXX

html,JavaScript调用winfrom方法

---恢复内容开始--- 目的: 在动画上面添加点击事件,通过JavaScript调用winfrom方法 1.创建一个页面 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; usin

Javascript 常用扩展方法

这篇文章纯粹是为了保存这些方法,供以后翻阅,其实一直保存在 evernote 里面,但觉得还是放到对的地方会好点. 现在收录的很少,希望以后会慢慢增多. 数组扩展 contains,remove 扩展 1 function ArrayContains(array, obj) { 2 for (var i = 0; i < array.length; i++) { 3 if (array[i] === obj) { 4 return true ; 5 } 6 } 7 return false ;