javascript库中最常用的一项功能,就是根据CSS选择符选择与某个模式匹配的DOM元素。实际上jQuery的核心就是通过css选择符查询DOM文档取得元素的引用,从而抛开了getElementById()和getElementByTagName()

Selectors API就是有W3C发起的一个标准,致力于让浏览器原生支持CSS查询。

Selectors API 的核心两个方法:querySelector()和querySelectorAll().在兼容的浏览器中可以通过Document及Element类型的实例调用它们。

querySelector()方法接收一个CSS选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null。

var body=document.querySelector("body");
alert(body.nodeName);//BODY

querySelectorAll()方法接收的参数与querySelector()方法一样,都是一个CSS选择符,但返回的是所有匹配的元素而不仅仅是一个元素。该方法返回一个NodeList的实例。返回的值实际上是带有所有属性和方法的NodeList,其底层实现则类似与一组元素的快照,而不是对文档进行搜索的动态查询。

要取得NodeList中的每一个元素,可以使用item()方法,也可以使用方括号语法。

matchesSelector()方法

Selector API Level2为ELement类型新增了一个方法matchesSelector()。这个方法接收一个参数,即CSS选择符,如果调用元素与该选择符匹配,则返回true,否则返回false。


CSS选择符(引用自疯狂的兔子的博客)

javascript之DOM选择符的更多相关文章

  1. 整理CSS选择符

    1.星号选择器 ;; } 星号选择器将匹配页面里的每一个元素.很多开发者使用这个技巧将外边距和内边距重置为零.虽然在快速测试时这确实很好用,但我建议你永远不要再生产代码中使用它.它给浏览器带来大量不必 ...

  2. 30个你必须记住的CSS选择符

    所以你学会了基础的id,类和后代选择符,然后你就一直用它们了吗?如果是这样,你丢失了(css的)巨大的灵活性.在本文中提到的很多选择器属于CSS3规范的一部分,因此,只有在现代浏览器中才可使用. 1. ...

  3. DOM扩展-Selectors API(选择符 API)、元素遍历

    DOM扩展 对DOM的两个主要扩展是SelectorsAPI(选择符API)和HTML5 SelectorsAPI(选择符API)是由W3C发起制定的一个标准,致力于浏览器原生支持CSS查询,Sele ...

  4. [javascript]MooTools Selectors(MooTools 选择器) ELEMENT DOM选择

    //ELEMENT DOM选择//on are tag names. //All the divs on the page: $$('div'); //All the divs and paragra ...

  5. Javascript高级编程学习笔记(46)—— 选择符API

    选择符API 在DOM1中DOM只提供了 getElementById.getElementsByTagName 两种获取文档元素的方法 很多时候这两种方法往往不能较为方便地获取我们所需要的元素 所以 ...

  6. Web前端新人笔记之jquery选择符

    jquery利用了CSS选择符的能力,让我们能够在DOM中快捷而轻松的获取元素或元素集合.本章将介绍以下内容: 1.网页中的元素结构: 2.如何通过CSS选择符在页面中查找元素: 3.扩展jquery ...

  7. jquery 之选择符

    css:选择符$('#selected-plays > li') 使用了子元素组合符,查找 ID 为 selected-plays 的元素的子元素( > )中所有的列表 li$('#sel ...

  8. JavaScript 操作 DOM 常用 API 总结

    文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...

  9. 第一百一十六节,JavaScript,DOM操作样式

    JavaScript,DOM操作样式 一.操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检 ...

随机推荐

  1. 批处理简单命令 start

    start 命令 调用外部程序,所有的DOS命令和命令行程序都可以由start命令来调用. 如:start calc.exe 即可打开Windows的计算器. 常用参数: MIN 开始时窗口最小化 S ...

  2. n8n 试用

    前边有简单的介绍n8n,如果大家看了官方网站会有一个比较醒目的说明zapier以及tray.io的开源替代方案 以下是一个简单的试用 环境准备 docker-compose 文件   version: ...

  3. kubectl-trace 基于bpftrace 的kubernetes 集群性能分析工具

    kubectl-trace 是一个kubectl 的插件,我们可以使用基于bpftrace 的编程能力,来分析系统的性能问题, 强大,灵活,后边安装试用下 参考架构 参考资料 https://gith ...

  4. 日常笔记3关于bool类型数组初始化的问题

    一般会有两种考虑,全为true或全为false 赋值方式: <1>memset(boolArray,0,sizeof(Array)); 头文件:#include<cstring> ...

  5. find square root

    public class Solution { public static void main(String[] args) { Scanner ip = new Scanner(System.in) ...

  6. idea插件篇之java内存分析工具(JProfiler)

    前言在运行java的时候有时候想测试云运行时占用内存情况,这时候就需要使用测试工具查看了.在eclipse里面有 Eclipse Memory Analyzer tool(MAT)插件可以测试,而在i ...

  7. 第27课 “共享状态”及其管理者(std::future/std::shared_future)

    一. “共享状态” (一)“共享状态”对象 1. 用于保存线程函数及其参数.返回值以及新线程状态等信息.该对象通常创建在堆上,由std::async.std::promise和std::package ...

  8. Java连载15-boolean类型&类型转换&++运算符

    一.boolean类型 1.说明: (1)在java语言中,boolean类型只有两个值:true.false,没有其他的值.在C语言中,是有0代表false和1代表true的 (2)在底层存储的时候 ...

  9. html5手机端播放音效不卡的方法

    html5手机端播放音效不卡的方法线下载http://wxserver.knowway.cn/solosea/js/audioEngine.js 这个是性能不错 然后直接播放音效就可以了 audioE ...

  10. ReentrantReadWriteLock可重入,锁升级,锁降级

    public class ReentrantReadWriteLockTest { public static void main(String[] args) throws InterruptedE ...