javascript之DOM选择符
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选择符的更多相关文章
- 整理CSS选择符
1.星号选择器 ;; } 星号选择器将匹配页面里的每一个元素.很多开发者使用这个技巧将外边距和内边距重置为零.虽然在快速测试时这确实很好用,但我建议你永远不要再生产代码中使用它.它给浏览器带来大量不必 ...
- 30个你必须记住的CSS选择符
所以你学会了基础的id,类和后代选择符,然后你就一直用它们了吗?如果是这样,你丢失了(css的)巨大的灵活性.在本文中提到的很多选择器属于CSS3规范的一部分,因此,只有在现代浏览器中才可使用. 1. ...
- DOM扩展-Selectors API(选择符 API)、元素遍历
DOM扩展 对DOM的两个主要扩展是SelectorsAPI(选择符API)和HTML5 SelectorsAPI(选择符API)是由W3C发起制定的一个标准,致力于浏览器原生支持CSS查询,Sele ...
- [javascript]MooTools Selectors(MooTools 选择器) ELEMENT DOM选择
//ELEMENT DOM选择//on are tag names. //All the divs on the page: $$('div'); //All the divs and paragra ...
- Javascript高级编程学习笔记(46)—— 选择符API
选择符API 在DOM1中DOM只提供了 getElementById.getElementsByTagName 两种获取文档元素的方法 很多时候这两种方法往往不能较为方便地获取我们所需要的元素 所以 ...
- Web前端新人笔记之jquery选择符
jquery利用了CSS选择符的能力,让我们能够在DOM中快捷而轻松的获取元素或元素集合.本章将介绍以下内容: 1.网页中的元素结构: 2.如何通过CSS选择符在页面中查找元素: 3.扩展jquery ...
- jquery 之选择符
css:选择符$('#selected-plays > li') 使用了子元素组合符,查找 ID 为 selected-plays 的元素的子元素( > )中所有的列表 li$('#sel ...
- JavaScript 操作 DOM 常用 API 总结
文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...
- 第一百一十六节,JavaScript,DOM操作样式
JavaScript,DOM操作样式 一.操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检 ...
随机推荐
- Java基础的容错
新手会有一些常犯的过失,一般一个新手在学习Java开发的时分,往往会挑选买书去学习,首要这样的学习功率是非常差的,比如在学习html,css的时分,是彻底不必看书的.书里大多数东西你都不了解.这是新手 ...
- ionic-环境搭建-入门
环境搭建 1.官方推荐: npm install -g cordova ionic 使用npm国内安装小坑,下载慢,还是失败 2.先安装cnpm,使用淘宝镜像:: npm install -g cnp ...
- 关于c# 中读取系统内存大小的问题。
在程序中,调用WMI的时候,出现一个问题,就是我系统有插了两条内存条,共4G.然而自己只能在程序中查到安装内存为2G,感觉有点不淡定.这是之前的代码. static ManagementObjectS ...
- [RN] react-native FlatList 实现列表选中的最佳方式(刷新指定Item)
效果如下: 核心思路就是往数据源里面 给每条数据加一个选中状态. 如图在网络请求完成之后,给每条数据添加一个select的状态: data.list.forEach(item => item.s ...
- 【LGR-060】洛谷10月月赛 I
A - 打字练习 出题:memset0 送分模拟题,按题意模拟即可. 需要注意的是对退格键的判断,如果光标已经在行首,则直接忽略被读入的退格键. B - 小猪佩奇爬树 出题:_QAQ 维护所有相同节点 ...
- [LeetCode] 18. 4Sum 四数之和
Given an array S of n integers, are there elements a, b, c, and d in S such that a + b + c + d = tar ...
- 从GopherChina 2019看当前的go语言
GopherChina 2019大会4月底刚刚结束,大会上使用的PPT也放了出来(大会情况及PPT在https://mp.weixin.qq.com/s/_oVpIcBMVIKVzQn6YrkAJw) ...
- python脚本生成exe程序
去年十一月换了新公司后,一直没闲着,马不停蹄地接不同的需求,一个版本一个版本的迭代,也没时间研究python了.十一休假归来,某日,老婆问金融量化需要学python吗?并分享了一个公众号文章,内容是吹 ...
- win10配置jdk1.8环境变量
1,安装好jdk之后,目录如下 2,右键计算机 - 属性 - 高级系统设置 3,环境变量 4,新增系统变量JAVA_HOME,输入内容D:\work\Program Files\Java\jdk1.8 ...
- BizTalk增强型RosettaNet跟踪报告
BizTalk 的数据报表能力一直是比较弱的,好在Rosettanet 支持使用BAM 跟踪功能来跟踪各PIP消息状态.增强的跟踪功能能跟踪流程为消息.错误和事件.不可否认性的数据.可以根据跟踪的 ...