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. 批处理命令 call

    call 命令 CALL命令可以在批处理执行过程中调用另一个批处理,当另一个批处理执行完后,再继续执行原来的批处理 CALL command 调用一条批处理命令,和直接执行命令效果一样,特殊情况下很有 ...

  2. [BZOJ3538]坑爹的GPS

    题目描述 Description 有一天,\(FJ\) 买了一辆车,但是,他一手下载了两个\(GPS\) 系统.好了现在麻烦的事情来了,\(GPS\) 有一个功能大概大家也知道,如果\(FJ\) 没有 ...

  3. Signal ()函数用法和总结

    void(* signal(int sig,void(* func)(int)))(int); 设置处理信号的功能 指定使用sig指定的信号编号处理信号的方法. 参数func指定程序可以处理信号的三种 ...

  4. 8.5 NOIP模拟测试13 矩阵游戏+跳房子+优美序列

    T1矩阵游戏 数学题.首先这一列这一行先乘还是后乘对最后答案没有影响.a[i][j]表示矩阵中原始的值,h[i]表示i行的累乘,l[i]表示i列的累乘.易得ans=Σa[i][j]*h[i]*l[i] ...

  5. [LeetCode] 26. Remove Duplicates from Sorted Array 有序数组中去除重复项

    Given a sorted array nums, remove the duplicates in-place such that each element appear only once an ...

  6. 第01组 Beta冲刺(3/5)

    队名:007 组长博客: https://www.cnblogs.com/Linrrui/p/12008397.html 作业博客: https://edu.cnblogs.com/campus/fz ...

  7. oracle--DBWN

    一,DBWN功能 将脏数据写盘 二,什么情况下会触发DBWN的进程呢? 1) check pointer:有检查点, 2) 脏数据达到阀值:达到buffer内存的10%即要将脏数据写到磁盘: 这就是造 ...

  8. JAVA主动抛异常的几种方式及捕捉结果输出对比

    测试代码: /** * 测试异常抛出及捕捉 */ @Test public void test() { try { this.testA(); } catch (Exception ex) { Sys ...

  9. Hibernate 连接MySQL/SQLServer/Oracle数据库的hibernate.cfg.xml文件

    用Hibernate配置连接数据库可以方便我们对POJO的操作,节省了很多时间和代码.下面就分别说明连接不同数据库需要在hibernate.cfg.xml做的配置. 需要数据库驱动包可以点击这里下载: ...

  10. POI 操作 excel表格 (简单整理)

    简单的整理: import org.apache.poi.ss.usermodel.*; import org.apache.poi.ss.util.CellRangeAddress; import ...