javascript -- (浅谈querySelector和querySelectorAll)

W3规范:



  querySelector:

return the first matching Element node within the node‘s subtress. if there is no such node, the method must return null.

返回指定元素节点的子树中匹配selector的集合中的第一个,如果没有匹配,返回null.

  querySelectorAll:

return a NodeList containing all of the matching Element nodes within the node‘s subtrees, in document order. If there are no such nodes, the method must return an empty NodeList

返回指定元素节点的子树中匹配selector的节点集合,采用的是深度优化预查找;如果没有匹配的,这个方法返回空集合



简单理解:

querySelector()方法返回文档中匹配指定css选择器的一个元素

*:querySelector()方法仅返回匹配指定选择器的第一个元素。如果需要返回所有的元素,需要使用querySelectorAll()方法

语法:

document.querySelector(css, selector);

参数值:

css: String(类型)  描述:不可省略,指定一个或多个匹配元素的css选择器。可以使用他们的id、类、类型、属性、属性值等来选取元素。    对于多个选择器,使用逗号隔开,返回一个匹配的元素

eg: 获取文档中的第一个<p>元素:

document.querySelector(‘p‘);

获取文档中class = "box"的第一个元素:

document.querySelector(‘.box‘);

获取文档中有"target"属性的第一个<a>元素:

document.querySelector(‘a[target]‘);

/***多个选择器的使用方法**/

<span>hello</span>

<h2>world</h2>

document.querySelector(‘span,h2‘).style.color = ‘blue‘;

  

时间: 2024-11-03 22:04:52

javascript -- (浅谈querySelector和querySelectorAll)的相关文章

JavaScript:浅谈iOS与H5的交互-JavaScriptCore框架

JavaScript:浅谈iOS与H5的交互-JavaScriptCore框架 前言 小的作为一个iOS程序猿,可能研究JavaScript以及H5相关的知识并不是为了真正的要去转行做这一方面,其实更多的为了要研究OC中的JavaScriptCore框架,JavaScriptCore框架主要是用来实现iOS与H5的交互.当然了,最早我曾经写过iOS浅谈webView的JS一种用法.(去掉web显示页的广告),这种算得上最简单的iOS与H5的交互了.现在混合编程越来越多,H5的相对讲多,所以研究J

【前端】强大的javascript原生选择器querySelector 和 querySelectorAll

querySelector 和 querySelectorAll 在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id 等方式来查找,这显然是远远不够的,如果想要进行更为精确的选择不得不使用看起来非常繁琐的正则表达式,或者使用某个库.事实上,现在所有的浏览器厂商都提供了 querySelector 和 querySelectorAll 这两个方法的支持

javascript高级选择器querySelector和querySelectorAll

querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏览器均支持了他们.包括 IE8(含) 以上版本. Firefox. Chrome.Safari.Opera. querySelector 和 querySelectorAll 在规范中定义了如下接口: module dom { [Supplemental, NoInterfaceObject] in

深入javascript 浅谈对象

又一周的结束,下周js就要结束,但自己感觉对js印象很模糊,对对象.属性.方法.事件.调用函数很不熟悉,不知道怎么分类,也不知道什么时候触发事件,总之一句话,分界很模糊,知其然,却不知其所以然,恼火! 首先,建立js,就要面向对象的概念,谈到面向对象,就不可避免的要涉及类的概念.要实现一般用: 1.工厂方式: 这种方式每次调用它的工厂函数,都会创建一个新对象. 2.构造函数方式: 在构造函数中,内部无创建对象,而是使用this关键字. 3.原型方式: 该方式利用了对象的prototype属性,可

Web前端原生JavaScript浅谈轮播图

1.一直来说轮播图都是困扰刚进业内小白的一大难点,因为我们不仅需要自己作出一个比较完美的运动框架(虽然网上一抓一大把,但是哪有比自己做出来实现的有成就感,不是吗?^_^),还必须需要非常关键性的把握住轮播的原理,这样才能把一个轮播图完美的呈现出来. 2.废话不多说,请看下面代码 1 //首先我们必须都明确,一个好的运动框架那必须是能够同时承载两种或多种以上需求的,所以我们应该避免单运动框架通过行内样式的局限性,就需要我们知道怎么去获取非行间样式 2 function getStyle(obj,a

使用JavaScript浅谈组合模式

什么是组合模式? 从前有座山,山上住着一个老和尚和小和尚,老和尚给小和尚讲了一个故事,这个故事是这样子的:从前有座山,山上住着一个老和尚和小和尚,老和尚给小和尚讲了一个故事,这个故事是这样子的:从前有座山,山上住着一个老和尚和小和尚,老和尚给小和尚讲了一个故事,这个故事是这样子的... 骚年,读到这里不知道你明白了什么,一个故事由另一个故事组成,然后一直这样子组合下去,形成了一个最大的故事. 没错,这就是组合模式:小对象组合成一个大对象,小对象可能由更小的对象组合而成. 其实我们也可以看出两点:

浅谈 JSON.stringify 方法

用过 json 的应该都知道,把一个对象通过 stringify 之后提交给后台或者存储在 Storage 里是很常用的手段.但是 IE6-7 下没有 JSON 对象,所以要借助 json2.js 来实现. 今天我们来简单介绍下 stringify 方法的一些正确使用姿势吧.当然,让高手们贱笑了,本文只是分享一些方法给新手朋友们. var data = [ {name: "王尼玛", sex:1, age: 30}, {name: "王尼美", sex:0, age

浅谈 JavaScript 编程语言的编码规范

对于熟悉 C/C++ 或 Java 语言的工程师来说,JavaScript 显得灵活,简单易懂,对代码的格式的要求也相对松散.很容易学习,并运用到自己的代码中.也正因为这样,JavaScript 的编码规范也往往被轻视,开发过程中修修补补,最终也就演变成为后续维护人员的恶梦.软件存在的长期价值直接与编码的质量成比例.编码规范能帮助我们降低编程中不必要的麻烦.而 JavaScript 代码是直接发送给客户浏览器的,直接与客户见面,编码的质量更应该受到关注. 本文浅谈 JavaScript 编程中关

浅谈javascript单体【读javascript设计模式第五章节单体有感】

单体,整个运行环境就独有一份,最简单的一种单体就是一个把所有属性和方法都集中在一起的对象,区别于一般的字面量对象,一般字面量对象是对一个物体的描述,集合该物体所具有的一些属性和方法,而单体则包含更多的些逻辑在里面,单体的好处有,划分命名空间,如果用来作为网页包装器,可以使得页面所有变量都封装在一个对象里,大幅度减小网页里的全局变量, 代码如: common.js (function(wz){ $.extend({ init:function(){ var self = this; this.bi