`
haibin369
  • 浏览: 60096 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Javscript中的Selector API

阅读更多

在JQuery中使用CSS选择器获取元素非常方便,其实Javascript也提供了原生API去通过CSS选择器取得元素:querySelector(), querySelectorAll(). (完整支持的浏览器有:IE 8+, Firefox 3.5+, Safari 3.1+,
Chrome,  Opera 10+)

 

以下是W3C对Selector API两个方法的定义(http://www.w3.org/TR/selectors-api):

W3C Selectors API Level 1 写道
The querySelector() methods on the Document, DocumentFragment, and Element interfaces must return the first matching Element node within the subtrees of the context node. If there is no matching Element, the method must return null.

 

W3C Selectors API Level 1 写道
The querySelectorAll() methods on the Document, DocumentFragment, and Element interfaces must return a NodeList containing all of the matching Element nodes within the subtrees of the context node, in document order. If there are no matching nodes, the method must return an empty NodeList.

 

例子:有如下HTML片段

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Selectors API Example</title>
    </head>
    <body>
        <div id="foo">
            <p class="warning">This is a sample warning</p>
            <p class="error">This is a sample error</p>
        </div>
        <div id="bar">
            <p>...</p>
        </div>
    </body>
</html>

 使用Selector API获取元素:

/*
   querySelector()会返回第一个匹配的元素, querySelectorAll()会
   返回所有匹配元素的NodeList(静态,不随页面元素改变而更新)。两个
   方法都能在Document, DocumentFragment, 和Element上调用,表示在
   给定元素范围下查找元素。
 */

//得到第一个id为"foo"或者"bar"的元素(<div id="foo"/>)
var barOrFoo = document.querySelector("#foo, #bar");

//在<div id='foo'/>下查找第一个<p/>元素
var p = barOrFoo.querySelector("p");

//查找所有的<p/>元素
var pList = document.querySelectorAll("p");

//当使用这两个方法查找子元素的时候要特别注意,如下例子,我们想
//在<div id="foo"/>下查找子div中带warning类的<p/>元素,但是
//<div id="foo"/>下并无子<div/>,因此应该返回null,但是实际上
//方法返回了<p class="warning"/>
var warning = barOrFoo.querySelector("div p.warning");
alert(warning == null);  //false

 关于最后一个例子,和我们平时用JQuery的选择器获得的结果不一样,这个问题,W3C给出如下解释(http://www.w3.org/TR/selectors-api/#examples0):

W3C Selectors API Level 1 写道
Even though the method is invoked on an element, selectors are still evaluated in the context of the entire document.

 因此,即使在元素上调用Selector API,依然会在Document范围内查找匹配元素,只是在查找完后会判断每一个结果是否在调用元素的范围内(即是否是调用元素的后代元素),若不在则过滤掉。

 

分享到:
评论

相关推荐

    javascriptAPI

    在JavaScript API中,DOM(Document Object Model)是极其重要的一部分。DOM是一种标准,它定义了HTML和XML文档的结构,并提供了编程接口来访问和修改这些文档。通过JavaScript,我们可以创建、删除或修改DOM元素,...

    前端javascript,jquery使用api

    在 JavaScript 和 jQuery 中,API 包含了大量的方法、属性和事件,帮助开发者创建丰富的用户体验。 在 JavaScript API 中,一些重要的知识点包括: 1. **变量声明**:JavaScript 支持 var、let 和 const 声明变量...

    JavaScript及jqueryAPI文档

    例如,JavaScript的`Array.prototype.map()`方法在API文档中会解释其用途(创建新数组,其中每个元素是原数组元素经过指定函数处理的结果),并提供使用示例。同样,jQuery的`$(element).slideUp(duration, callback...

    Selector一个用于替换jQuery的微型JavaScript库

    然而,随着浏览器原生API的不断改进,许多jQuery的功能现在可以直接通过JavaScript实现,而无需引入庞大的库。Selector正是基于这一理念诞生的,它提供了一个轻量级的解决方案,满足了开发者对快速、高效的需求,...

    JavaScript基础和DOM API函数

    JavaScript是一种广泛应用于网页和网络应用的轻量级编程语言,主要负责给HTML页面添加交互性和动态功能。...JavaScript与DOM API的结合是现代Web开发不可或缺的部分,也是提升网页动态性和用户体验的关键。

    CSSSelector生成器

    CSSSelector生成器通常会提供一个用户友好的界面,允许开发者输入HTML结构,然后自动生成相应的CSS选择器,这些选择器可以在JavaScript代码中使用,以实现元素的查找、修改、添加或删除。 **Finder-master** ...

    常用web开发手册css2/css3/jquery-api/javascript api/dom/html/j2ee-api/dhtml

    这个压缩包包含了Web开发中的重要手册,包括CSS2/CSS3、jQuery API、JavaScript API、DOM、HTML以及J2EE API和DHTML的相关资源,是开发者必备的参考资料。 **CSS2与CSS3** CSS(层叠样式表)用于定义网页的布局和...

    css+javaScript+jQuery+html5+xml的中文API

    jQuery API如`$(selector)`用于选取元素,`$(element).click(function)`绑定点击事件,`fadeIn()`和`fadeOut()`实现淡入淡出效果。此外,`$.ajax()`简化了Ajax请求。 **HTML5** 是最新的超文本标记语言标准,扩展了...

    前端开源库-matches-selector

    在JavaScript中,原生的`Element.prototype.matches`方法(在旧版本的浏览器中可能被称为`matchesSelector`或`webkitMatchesSelector`)可以用来判断一个元素是否匹配某个CSS选择器。然而,这个方法在一些老版本或者...

    jqueryapi.zip_javascript

    它的核心理念是“Write Less, Do More”,通过提供简洁的API来增强JavaScript的功能。jQuery 的流行在于它对浏览器的兼容性,使得开发者无需关心不同浏览器之间的差异,可以专注于编写代码。 **jQuery API 主要部分...

    jQueryAPI.zip_javascript

    jQuery是JavaScript库中的一款经典工具,它极大地简化了JavaScript代码,使得网页的DOM操作、事件处理、动画设计和Ajax交互变得更加便捷。这个压缩包“jQueryAPI.zip”包含了jQuery的中文API文档,对于jQuery的初学...

    JavaScript+jQuery程序设计 源码

    在"JavaScript+jQuery程序设计 源码"中,我们可以深入学习以下几个重要的知识点: 1. **JavaScript基础**:这包括变量声明、数据类型(如字符串、数字、布尔、对象和数组)、控制结构(如条件语句、循环)、函数...

    javascript,css,jsp,servlet各种API

    jQueryAPI-100214.chm可能包含了jQuery各个版本中的函数和方法,如$(document).ready()用于页面加载完成后执行的代码,$('selector').click()绑定点击事件,$('selector').fadeIn()实现淡入动画效果,$.ajax()进行...

    js+jquery帮助文档API

    在 "JavaScript中文版.chm" 文件中,你可以找到JavaScript的详细文档,包括语言规范、标准库的API以及各种使用示例。这个文档将帮助你理解如何使用JavaScript进行网页交互,学习如何创建动态效果、处理用户输入、...

    javaee中文版api,w3school中文版api,jdk1.8中文版api,jquery的api

    Lambda 表达式让函数式编程风格在 Java 中变得更加简洁,Stream API 提供了一种新的数据处理方式,Date and Time API 改进了日期和时间的处理,Nashorn 则允许在 Java 中直接运行 JavaScript 代码。 W3School 中文...

    javascript学习教程和jquery帮助文档及api

    1. **简便的DOM操作**:jQuery提供了一致的API来选择、操作DOM元素,比如`$(selector).method()`,比原生JavaScript更易读写。 2. **链式操作**:jQuery的方法返回的是jQuery对象本身,因此可以连续调用多个方法。 ...

    jqueryapi2.2_javascript_前端_

    **jQuery API 2.2:JavaScript前端开发的强大工具** jQuery,作为一款强大的JavaScript库,极大地简化了HTML文档遍历、事件处理、动画制作以及Ajax交互等任务,深受前端开发者的喜爱。这个`jqueryapi2.2`压缩包包含...

    JavaScript详细资料及手册

    "jQueryAPI-100214.chm"包含了完整的jQuery API文档,如`$(selector).click()`用于绑定点击事件,`$(element).hide(speed)`用于隐藏元素,`$.ajax()`用于进行异步HTTP请求。jQuery的使用可以极大地提高开发效率。 ...

    Riot中文API

    Riot 通过提供灵活的 API 设计和自定义标签的支持,使得开发者能够在 Web 应用程序中构建复杂且高效的用户界面。本文介绍了 Riot 的核心概念和技术细节,帮助开发者更好地理解和使用 Riot 框架。

    jsAPI,很全的api

    描述中的"每个开发人员都是手中必备的武器"强调了JavaScript API的重要性。无论你是新手还是经验丰富的开发者,了解并熟练使用这些API都是必要的。CHM文件形式的API文档便于快速查找和学习,尤其是在没有网络连接的...

Global site tag (gtag.js) - Google Analytics