在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范围内查找匹配元素,只是在查找完后会判断每一个结果是否在调用元素的范围内(即是否是调用元素的后代元素),若不在则过滤掉。
相关推荐
步骤1-获取API密钥 :old_key_selector: 步骤2建立专案 :file_folder: 登录到您的Google API仪表板 单击上述API的凭据并创建凭据(“创建凭据”>“ Api键”) 获取API密钥 步骤3启用API :tanabata_tree: 转到上的...
JavaScript Everywhere API 该存储库包含由O'Reilly Media发布的Adam D.Scott API章节的代码示例。 获得帮助 得到帮助最好的地方就是我们的频谱信道, 。 目录结构 /src如果您随书一起学习,则这是您应该执行开发的...
:warning_selector: 该软件包不是最新的并已维护 :warning_selector: 我们建议您不要使用此程序包。 我们由于时间紧缺而停止维护它,也因为此SDK提供的功能与配置良好的HTTP客户端相同。 因此,我建议您使用最佳HTTP...
:building_construction_selector: Nuxt Composition API Nuxt的Composition API挂钩 @nuxtjs/composition-api提供了一种在特定于Nuxt的功能中使用Vue 3 Composition API的方法。 注意:主要目的是允许在最终发布...
kquery是一款基于javascript完整实现css3选择器引擎. 兼容所有主流浏览器ie6 /chrome/firefox/opera/safari, 压缩和gzip之后仅8kb大小。智能编译引擎优化去除不必要的逻辑, 查询速度远胜于Szizzle, nwmatcher, ...
一、接口的流畅性 好的接口是流畅易懂的,他主要体现如下几个方面: 1.简单 ...从几十个字母长长的一行到简简单单的一个函数调用,体现了api简单易用 2.可阅读性 a(‘#a’, ‘red’)是个好函数,帮
全栈JavaScript架构 专为全栈JavaScript应用程序设计的项目体系结构。 关于 尤其是在设计应用程序的各个部分,选择技术和管理devOps时,使用JavaScript进行全栈一直是一个挑战。 该项目为典型项目提供了基础,该项目...
:warning_selector: 警告该软件正在积极开发中!在解决“进行中的部分中的问题之前,请勿在生产中使用它工作正在进行中Colmena尚在开发中,尚未构建所有功能。 仅实现基本的ACLS,这意味着有权访问该API的任何人都...
但这并不能阻止您在微服务体系结构中使用它。1.控制器层每个实体都有自己的控制器类,它在瘦层代表资源映射(路由) class PostsController extends BaseController { static get router () { router.get('/', this...
防弹Node.js架构 :shield_selector: 这是博客文章的示例存储库 请阅读博客文章,以更好地了解服务器体系结构。 另外,我在代码中添加了很多不在博客文章中的注释,因为它们解释了实现的原因以及选择库的原因以及...
以下示例显示如何选择表格第四列中的所有单元格。 $('#mytable tbody td:nth-col(4)'); 选择器可以采用多种类型的参数来选择列,例如关键字、数字索引和方程。 这些在 API 部分有更详细的解释。 应用程序接口 这...
Instagram私有Web API客户端 :selfie: :sparkles: :red_heart_selector: Instagram私有Web API的简单,简单且非常完整的实现。 支持所有主要功能 经过良好测试的CI 所有测试每天运行 安装 npm install instagram-...
use-optimized-selector 一个React Hook,用于使用比较器优化选择器。 在React状态更新和渲染中有用。 对...有用: 查看API参考 入门 入门很容易,但是最好... 然后将其导入到您JavaScript或TypeScript文件中: 使用
QuerySelectorObserver 100%受Daniel的黑客启发,该模块带来了友好的MutationObserver(如API)来观察CSS选择器。 const so = new QuerySelectorObserver(records => {for(reco QuerySelectorObserver的const记录...
js-selector基于原生js封装的一些简单选择器####大致可以分下面几种情况讨论- 简单的id/class/tagName选择器,并且参数中不含特殊字符(" ",">"),就是平常的document.getElement....- 匿名方法function(){},就丢给...
包恐惧症 :balance_scale_selector: 查找向项目添加新依赖项的成本 :eight_o’clock: 通过此Web应用程序节省时间和磁盘空间 :chart_increasing: 使用图表检测随着时间推移JavaScript膨胀 :shield_selector: 获取自述...
精神图书馆 | | | | 历程| 总览 PsychroLib是一个软件库,用于...请参阅所有支持的语言实现中通用API的。 在Python中,可以通过安装来启用数组支持和改进的运行时性能。 在R(1)中,不会导出常量(例如ZERO_FAHRENHEI
在JavaScript版本中使用脚本 import userFeedbackForm from '@nhsuk/user-feedback-form' ; userFeedbackForm ( { cssSelector : "#my-div-id" , formEndpoint : "https://example.com/my-api-endpoint/" , ...
在浏览器中开发ML 使用灵活且直观的API使用底层JavaScript线性代数库或高层API从头开始构建模型。 在Node.js中开发ML 在Node.js运行时下使用相同的TensorFlow.js API执行本机TensorFlow。 运行现有模型使用...
使用babel(巴比伦)从JavaScript字符串或文件中提取JavaScript代码注释。 请考虑关注该项目的作者 ,并考虑为该项目以显示您的 :red_heart_selector: 和支持。 安装 使用安装: $ npm install --save babel-...