全栈JavaScript之路（十二）了解 Selector API

最新推荐文章于 2022-07-13 13:42:39 发布
最新推荐文章于 2022-07-13 13:42:39 发布
阅读量2.8k 收藏
点赞数 2
分类专栏： 浏览器 JavaScript 笔记 live in js 文章标签： 选择器 selector selector api dom javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liveinjs/article/details/37340225
版权

2008 年之前，浏览器中几乎所有的DOM扩展都是专有的。此后，W3C 着手将一些已经成为事实标准的专有扩展标准化并写入规范当中。

Selector API  level 1  的核心是两个方法: querySelector(), querySelectorAll() .在兼容浏览器中可以通过Docuemnt 类型节点，或者Element类型节点调用。

目前已完全支持Selectors API Level 1的浏览器有IE 8+、Firefox 3.5+、Safari 3.1+、Chrome 和Opera 10+。


Selector API level 2 规范为 Element 类型增加了 matchesSelector() 方法，这个方法接受一个 CSS 选择符参数，如果调用的元素与该选择符匹配，则返回 true.


详细参考文档: 

  •  http://www.w3.org/TR/selectors-api/
  • http://www.w3.org/TR/selectors-api2/

holdindex
关注
专栏目录
JavaScript笔记
@PMPWPL的博客
10-05 407
JavaScript 0、前端知识体系 想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端，为实现成为“互联网Java全栈工程师”再向前迈进一步。 0.1、前端三要素 HTML（结构）：超文本标记语言（Hyper Text Markup Language），决定网页的结构和内容 CSS（表现）：层叠样式表（Cascading Style Sheets），设定网页的表现样式。 JavaScr
js nameselector
09-24
name selector javascript. this js is for javascript name select
JS Selectors API
vuturn的专栏
03-25 1260
Selectors API是由w3c发起的一个标准，致力于让浏览器原生支持CSS查询。Selectors API的两个核心方法：querySelector()和querySelectorAll()。 1.querySelector()方法 该方法接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。    //取得body元素  var body=
selectors API 选择器
weixin_44389868
02-20 146
selectors  API   选择器      CSS    进行交互的 查找元素：               querySelector(str)               返回值：元素对象               参数：str  选择器   #id    .one类   p（元素） 注意：若选择器对应的元素有多个则选择第一个 例： <div id="box"&g...
Js-selector
冰点契约的博客
07-03 1135
Js-selector document.getElementById("kw") 通过id进行定位，返回单个元素标签 document.getElementsByName("wd") 通过name进行元素定位，返回节点列表 document.getElementsByName("wd")[0] 需要通过下标选择具体的元素标签 document.getElementsByClassName("s_ipt") 通过className进行元素定位，返回元素集合 document.getEle
js selector设计及实现（一） 实现思路
weixin_34319111的博客
07-21 193
前阵子和伟大的JK同学学习了一下目前我们框架里新版本的selector，这里列的是第一版selector的代码思路。 后一版本调优性能，多了些函数，从性能上与各大框架比还是有竞争力的。 说句实在话，虽然各大框架和库都实现了selector。但看他们的selector实现其他的人看上去无疑都是难看懂。 而google,baidu上query出的结果基本都是说使用方式的文章...
fullstack-javascript-architecture：:writing_hand_selector:专为全栈JavaScript应用程序设计的项目架构
02-02
全栈JavaScript架构 专为全栈JavaScript应用程序设计的项目体系结构。 关于 尤其是在设计应用程序的各个部分，选择技术和管理devOps时，使用JavaScript进行全栈一直是一个挑战。 该项目为典型项目提供了基础，该项目...
book-selector
05-12
综上所述，"book-selector"是一个使用JavaScript开发的书籍选择应用，涵盖了前端开发的多个重要方面，包括模块化、状态管理、用户交互、API调用以及测试等。通过深入学习和实践这个项目，开发者可以提升自己的全栈...
Web开发6：使用JavaScript进行交互
04-03
现代JavaScript也可以用于服务器端编程（Node.js）和移动应用开发（React Native、Ionic等），实现全栈开发。 总结，"Web开发6：使用JavaScript进行交互"涵盖了JavaScript基础、DOM操作、事件处理、jQuery和jQuery ...
16. WEB前端就业计划之JavaScript语言魅力初探
随着互联网的发展，JavaScript的重要性逐渐凸显，它逐渐成为Web前端开发的重要技术之一。 JavaScript的发展历史中，ECMAScript标准的制定起到了至关重要的作用。ECMAScript指定了JavaScript的基本语法规则和核心...
js-selector:基于原生js封装的一些快捷选择器
06-02
js-selector 基于原生js封装的一些简单选择器 ####大致可以分下面几种情况讨论 - 简单的id/class/tagName选择器，并且参数中不含特殊字符(" ",">")， 就是平常的document.getElement.... - 匿名方法function(){},就丢给[removed] = function(){}处理 - 含有" "的，就是下代选择器，先把当前元素取出来，再取出它的子集元素 - 含有">"的，就是亲子代选择器，同样先把当前元素取出来，再取出它的子 集元素，同时要保证它的子集元素的父节点就是当前节点才能通过 ####API 我们可以使用下面几种选择器 $s("#test-id") $s(".test-class") $s("p") $s(".test-children #children2 .children2-1") $s(".test-ch
HTML5 Selectors API 操作
XBoy
07-24 1893
(1)  Html5之前用来查找元素的js方法getElementById():  根据ID值查找并返回元素getElementsByName():  根据name值返回所有的元素getElementsByTagName():  根据标签名称与指定值相匹配的元素(2)  Html
DOM 扩展 Selectors API
zhiheng`s blog
07-06 405
Selector API 是由 W3C 发起制定的一个标准，致力于让浏览器原生支持 css 查询，jquery 库就的核心就是通过 CSS 选择器查询 DOM 文档取得元素的引用，从而抛开了 getElementById() 和 getElementsByTagName() ,然而原生的 Selector API 解析和树查询操作可以在浏览器编译后的代码来完成，极大的改善了性能。querySele
HTML5--JS API-新的选择器
weixin_30776273的博客
06-20 118
新的选择器document.querySelector("selector");selector:根据CSS选择器返回第一个匹配到的元素，如果没有匹配到，则返回null;支持： Chrome 4.0+, FireFox 3.5+, Safari 3.2+, Opera 10.1+, IE 8+document.querySelectorAll("selector");selector:根据CSS选...
jQuery的所有选择器
weixin_45748576的博客
10-19 259
接下来介绍所有的jQuery的选择器 #id :根据给定的ID匹配一个元素。 $("#idName"); .class: 根据给定的css类名匹配元素。 $(".className"); element: 根据给定的元素标签名匹配所有元素 $(“div”); :匹配所有元素 $(""); selector1,selector2,selectorN:将每一个选择器匹配到的元素合并后一起返回。 $(“...
Selector API用法
大树叶 技术专栏
05-03 1813
java.nio.channels 类 Selector java.lang.Object java.nio.channels.Selector 直接已知子类： AbstractSelector public abstract class Selectorextends Object SelectableChannel 对象的多路复用器。 可通过调用此类的 o
【js】selector小记
xn_28的专栏
02-23 1470
当selector值改变时，显示改后的option值： A B C function route(){ var selector = document.getElementById("seletor"); var text = selector.options[selector.selectedIndex].text; ale
JavaScript选择器函数querySelector和querySelectorAll
小天空的博客
07-13 5万+
选择器是非常强大的功能，早先一般是通过和来获取页面元素，在一些场景下就很不方便。后来DOM扩展出了标准，其中包含了和两个方法，可以通过Css选择器匹配页面元素。用于查询页面中第一个符合规则的元素，可以在实例和实例上调用，接收一个选择器字符串参数，如果查找到则返回 对象，否则返回。语法格式如下：123实例调用是获取整个页面匹配的元素。简单示例如下：12345678910111213141516171819202122232425实例调用是获取该元素子树内匹配的元素。简单示例：12345678910111213
JavaScript の querySelector 使用说明
weixin_45566993的博客
04-22 9896
🚀 优质资源分享 🚀 学习路线指引（点击解锁） 知识定位 人群定位 🧡 Python实战微信订餐小程序 🧡 进阶级 本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。 💛Python量化交易实战💛 入门级 手把手带你打造一个易扩展、更安全、效率更高的量化交易系统 本文记录，JavaScript 中 querySelector 的使用方法。小白贡献，语失莫怪。 // 两种 query 的 method (方法) documen
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值