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. webapi简介及参数绑定

    介绍:WebAPI用来开发系统间接口的技术,基于HTTP协议,返回默认是json格式.比wcf简单 更通用,更轻量级,更省流量(json格式):WebAPI尽可能复用MVC路由.ModelBinder ...

  2. docker的一些常用操作

    镜像:一个打包好的应用,还有应用运行的系统.资源.配置等容器:镜像的实例,一个镜像可以有一个或多个实例(容器)对docker容器的变更时写到容器的文件系统的,而不是写到docker镜像中的,可以用一个 ...

  3. 修改Launchpad的命令

    修改Launchpad命令 1.设置Launchpad 图标的列数 defaults write com.apple.dock springboard-columns -int 10 2.设置 Lau ...

  4. Leetcode 第137场周赛解题报告

    今天的比赛的题目相对来说比较「直白」,不像前几周都是一些特定的算法,如果你没学过不可能想出来. 做了这些周,对leetcode比赛的题目也发现了一些「规律」. 一般前两道题都很「简单」,只要有想法,直 ...

  5. Django初见

    什么市WEB应用? 所谓的web应用就是我们基于浏览器打开的一个个网页(对应网址得到的内容) 软件开发架构 C/S架构: 客户端/服务端 B/S架构:浏览器/服务器 所有的B/S架构本质上就是C/S架 ...

  6. HTML连载30-CSS显示模式&模式转换

    一.CSS显示模式​ 1.在HTML中HTML将所有的标签分为两类,分别是容器类和文本级.在CSS中CSS也将所有的标签分为两类,分别是块级元素和行内元素 2.什么是块级元素呢?什么是行内元素​? ( ...

  7. dataframe 基本操作

    package com.jason.example import org.apache.spark.sql.functions.broadcast class DFTest extends Spark ...

  8. 编译和安装openssl

    linux安装了Python3.7之后, pip不好用了,报错如下: pip is configured with locations that require TLS/SSL, however th ...

  9. prometheus exporter简介

    一.服务分类 在线服务:请求的客户端和发起者需要立即响应(高并发.低延迟:并发数.接口响应时间.错误数.延迟时间),面对突发流量能进行资源的自动伸缩 离线服务:请求发送到服务端但不要求立即获取结果(监 ...

  10. IntelliJ IDEA 提交代码时出现:Code analysis failed with exception: com.intellij.psi......

    IntelliJ IDEA 提交代码时出现:Code analysis failed with exception: com.intellij.psi...... 错误原因: 当我们勾选Perform ...