选择器那些事之querySelector与querySelectorAll

葉無聞 2012-04-03

querySelector 和 querySelectorAll

  • 是W3C Selectors API Level 1 规范中定义的
  • 作用是根据CSS选择器规范，定位文档中指定的元素
  • IE8及以上版本，FF，Chrome，Safari，Opera等都支持
任何NodeList，Element的实例对象和Document DocumentFragment的实例对象都有这两个方法。
  • querySelectorAll 返回的是符合条件的所有节点内容，是一个NodeList | 如果没有返回空数组
  • querySelector仅返回符合条件的第一个节点内容，是一个Node | 如果没有返回null
代码举例：
<div id="header">
    <div class="container relative">
      <a class="logo absolute">
	   <img src="img/logo.png" alt="logo"/>
      </a>
    </div>
</div>
 
获取header
var document = doc;
doc.querySelector('#header');
doc.querySelectorAll('#header')[0];
 
注意：
规范规定里面的参数---选择器是针对当前文档
扩展阅读：
葉無聞

葉無聞

相关推荐

ES6 promise的应用

function moveTo{ //四个参数分别为移动的元素、移动到对应的横纵坐标点，以及要移动完之后要调用的回调函数。el.style.transform = `translate`; //产生位移。.then(function(){ //then

前端开发Kingcean / 0评论 2020-07-08

5.11 dom的选择器

# 一、DOM## 0. js的三大组成部分的关系- ECMAScript规定，如何在BOM中操作DOM## 1. 介绍1. DOM文档对象模型，对象：document - DOM不属于BOM - window对象身上有提供document对象 - DOM

liaoxuewu / 0评论 2020-05-11

表单事件

<!DOCTYPE html>. <html lang="en">. <head>. <meta charset="UTF-8">. <title>表单事件

nercon / 0评论 2019-12-28

dom与jq基础使用

在css的dom树里讲过，浏览器把标签解析成一个巨大的对象renderTree，然后js出现了能操作renderTree的功能，每一个标签都是一个独立的可以被js单独操作的对象。//怎么改颜色呢？控制这个dom对象的style属性，这个属性也是一个对象，这

SIMONDOMAIN / 0评论 2019-12-13

《JavaScript高级程序设计》（第3版）读书笔记 第11章 DOM拓展

尽管DOM作为API已经非常完善了，但为了实现更多功能，仍然会有一些标准或专有的拓展。2008年之前，浏览器中几乎所有的拓展都是专有的，此后W3C着手将一些已经成为事实标准的专有拓展标准化，并写入规范中。对DOM的两个主要拓展是Selectors API

哈喽elements / 0评论 2019-11-19

浏览器--操作DOM

在操作一个DOM节点前，我们需要通过各种方式先拿到这个DOM节点。第二种方法是使用querySelector()和querySelectorAll()，需要了解selector语法，然后使用条件来获取节点，更加方便：。注意：低版本的IE<8不支持qu

liaoxuewu / 0评论 2019-11-03

（亲测可用）vue新消息自动滚到底部

},},var container = this.$el.querySelector(" 需要滚动条处于底部的容器，css类名 ");

切慕溪水 / 0评论 2019-11-03

JavaScript练习-情话生成器

在网络上总是有各种各样的新鲜项目！善于学习知识，然后利用到生活的方方面面应该是每个程序员都想过的。对于我这种渣渣程序员也不例外。学了JavaScript，碰巧在微信群里看到有网友发了这两个网站。这两个网站都是调用本身存储的语句然后生成。想了一下用JavaS

xiaoge00 / 0评论 2019-10-26

jsonp实现百度下拉框功能的方法分析

本文实例讲述了jsonp实现百度下拉框功能的方法。分享给大家供大家参考，具体如下：。思路就是获取用户输入，然后根据用户输入调用百度的一个接口jsonp实现跨域请求，然后将百度返回给的内容渲染数据到视图。需要注意的就是，发送请求的时候记得编码用户输入的内容。

duxd / 0评论 2019-05-10

浏览器中的JavaScript：文档对象模型与 DOM 操作

JavaScript 并没有那么糟糕。作为运行在浏览器中的脚本语言，它对于网页操作非常有用。在本文中，我们将看到可以用哪些手段来修改 HTML 文档和交互。什么是文档对象模型？文档对象模型是在浏览器中一切的基础。但它究竟是什么呢？当我们访问网页时，浏览器会

bistukey / 0评论 2019-07-01

fe5-2：js语言、dom编程

// class 选择器, 用的是 .类名。// id 选择器, 用的是 #id. // 获取特定属性值。// 不存在的属性会返回 null, 它在 js 中代表不存在

JackXue程序生涯 / 0评论 2019-07-01

回到基础：理解 JavaScript DOM

Javascript DOM是一个允许开发人员操纵页面内容、结构和风格的接口。本文还可以作为基本 DOM 操作的参考。基本上网页由 HTML 和 CSS 文档组成。浏览器用于创建文档的描述被称为文档对象模型。它使 Javascript 能够访问和操作页面的

JackXue程序生涯 / 0评论 2019-07-01

原生 js 获取 dom 元素 querySelector() 替代 getElementById()

原生 js 获取 dom 元素 querySelector() 替代 getElementById()替代 getElementById(). 里面填写的是 css 选择器。$[0] // 不理解这个可以百度 `jquery 与 dom 相互转换`quer

adeyi / 0评论 2019-07-01

放弃jQuery, 使用原生js

随着IE6、7、8的逐渐淘汰，HTML5的兴起，以及侧重点放在了移动端，jQuery可能变的不在那么重要，原生一样很好用。下面介绍几个原生替换jq的方法。//querySelector基本上实现了jq选择器同样的功能，具体可以自己测试，另外querySel

sunnylin / 0评论 2019-06-30

原生js替换jQuery各种方法-中文版

You Don't Need jQuery 前端发展很快，现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行，直接操作 DOM

LingPF / 0评论 2019-06-28

通过css类/选择器选取元素 文档结构和遍历 元素树的文档

通过css类选取元素html所有的元素拥有class属性，该属性会对元素进行分组，标识为某一组。js中使用className属性来保存HTML的class的属性值。返回的是类数组。a[src*="ming"] // 匹配src中包

jianqi / 0评论 2019-06-28

DOM事件流

DOMDOM 全称文档对象模型. 文档可以是HTML, XML, 或者XHTML文档.DOM定义 的是一组与平台和语言的接口. 目前形成了三个演进的标准, DOM Level 1, DOM Level 2, DOM Level 3. 每个新的Level都是

莲开十月人思量 / 0评论 2019-06-28

DOM扩展

对DOM的两个主要的扩展是SelectorsAPI和HTML5。这两个扩展都源自开发社区，而将某些常见做法及API标准化一直是众望所归。此外，还有一个不那么阴人瞩目的ElementTraversal规范，为DOM添加了一些属性。虽然前述两个主要规范已经涵盖

云海梦尘 / 0评论 2014-02-24

javascript javascript高级选择器querySelector和querySelectorAll 【转】

querySelector 和 querySelectorAll 方法是W3C Selectors API规范中定义的。他们的作用是根据 CSS 选择器规范，便捷定位文档中指定元素。目前几乎主流浏览器均支持了他们。包括 IE8(含) 以上版本、 Firef

Danielmumu / 0评论 2013-11-04

前端代码集

HTML5使用FileReader实现前端图片预览获取到页面中所有的checkbox怎么做？JavaScript模版引擎小实例Javascript实现JS函数重载JS跨浏览器绑定事件函数JS单体模式使用prototype属性定义的对象方法闭包实现结果缓存闭

racy / 0评论 2019-06-25

HTML 5标准中最新引入的template标签介绍

//不支持上面代码是监测浏览器是否支持这标签了。目前只有chrome26以上才支持这个标签；运行时动态指定的，<template>标签可以放置在<head>,<body>或者<frameset>当中，也可以放

htmlgood / 0评论 2013-05-22

js温故而知新9(操作DOM)——学习廖雪峰的js教程

要精确地选择DOM，可以先定位父节点，再从父节点开始选择，以缩小范围。根节点Document已经自动绑定为全局变量document。一种是修改innerHTML属性，这个方式非常强大，不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DO

shilei0 / 0评论 2019-06-21

HTML5中选择器querySelector的使用

按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找，返回第一个满足条件的元素。

nicepainkiller / 0评论 2019-06-21

javascript学习笔记六

第11章 DOM扩展 对DOM的两个主要的扩展是SelectorsAPI和HTML5。所有实现这一功能的JavaScript库都会写一个基础的CSS解析器，然后再使用已有的DOM方法查询文档并找到匹配的节点。与querySelector()类似，能够调用q

Waittingforyou / 0评论 2012-05-15

javascript 选择器之 querySelector,querySelectorAll 学习

CSS选择器的方便强大之处想必经常使用的人都有了解。javascript原始库中提供选取DOM节点的方法少之又少，W3C组织也注意到了这里的不足所以querySelector,querySelectorAll 接口便应运而生。这两个方法之间的相同之处是他们

每天积累一点点 / 0评论 2012-03-28

[转帖]querySelector & querySelectorAll --- 像CSS一样选择DOM

事实上，现在所有的浏览器厂商都提供了querySelector和querySelectorAll这两个方法的支持，甚至就连微软也派出了IE8作为支持这一特性的代表，querySelector和querySelectorAll作为查找DOM的又一途径，极大地

wolaizheli / 0评论 2011-04-25

JavaScript之DOM_动力节点Java学院整理

由于HTML文档被浏览器解析后就是一棵DOM树，要改变HTML的结构，就需要通过JavaScript来操作DOM。始终记住DOM是一个树形结构。操作一个DOM节点实际上就是这么几个操作：。要精确地选择DOM，可以先定位父节点，再从父节点开始选择，以缩小范围

Wcplus / 0评论 2017-07-03

JavaScript Ajax实现异步通信

A.对iframe实现整个页面刷新，其实是通过刷新一个页面的子页面来实现异步刷新；>B.通过在刷新子页面的同时在子页面做一些操作来访问父页面元素并且修改该元素的内容。<iframe name="targetIframe" f

快意江湖 / 0评论 2016-12-14

原生JS取代一些JQuery方法的简单实现

}querySelectorAll方法返回的是NodeList对象，需要转换为数组。DOM元素本身有一个可读写的className属性，可以用来操作class。HTML 5还提供一个classList对象，功能更强大。

natineprince / 0评论 2019-05-08

jQuery选择器querySelector的使用指南

两个方法使用差不多的语法，都是接收一个字符串参数，这个参数需要是合法的CSS选择语法。该方法返回所有满足条件的元素，结果是个nodeList集合。查找规则与前面所述一样。

88417615 / 0评论 2019-04-19

现代浏览器中内置的几个可以等效替代jQuery的功能

jQuery 的体积在不断的增大。新功能要不断增加，这是必然结果。虽然从版本1.8.3开始的瘦身效果明显，但不可否认的是，对于移动手机端的网页开发，它仍然是不可接受的。当然，jQuery不是铁板一块，你可以对它进行定制，只打包进你想要的组件，但其中的一些用

89580498 / 0评论 2013-05-27

各浏览器中querySelector和querySelectorAll的实现差异分析

querySelector和querySelectorAll是W3C提供的 新的查询接口，其主要特点如下：。这两个方法都可以接受三种类型的参数：id(#)，class(.)，标签，很像jquery的选择器。querySelector和querySelect

badboyplane / 0评论 2019-04-12

原生的强大DOM选择器querySelector介绍

在传统的 JavaScript 开发中，查找 DOM 往往是开发人员遇到的第一个头疼的问题，原生的 JavaScript 所提供的 DOM 选择方法并不多，仅仅局限于通过 tag, name, id 等方式来查找，这显然是远远不够的，如果想要进行更为精确的

DolphinThinker / 0评论 2019-04-10

HTML5--web存储/应用缓存/web Workers一(12)

<input type="button" value="删除数据" id="removeData">. *如果找不到对应名称的key,那么就会获取null*!*在删除的时候如果key值

BitTigerio / 0评论 2018-05-08

DOM(三)：querySelector和querySelectorAll

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

前端外刊评论 / 0评论 2018-04-09

webpack开发案例（一）

与案例一相比，index.htm、calc.js和main.js内容不变，仅仅只是多了个webpack.config.js配置文件，并且改变相关文件的路径。"test": "echo \"Error: no test

从零学习前端开发 / 0评论 2017-12-21

react事件代理

默认情况下点击内部的div，会依次显示inner click1、inner click2、root click，这是因为以下事件是绑定在了冒泡阶段。dispatch结束后，触发document上剩余的原生事件，也就是说可以认为dispatch是docume

旁观者郑昀 / 0评论 2017-12-11

关于javascript dom扩展：Selector API

众多javascript库中最常用的一项功能，就是根据css选择符选择与某个模式匹配的DOM元素。}因此在实际开发过程中还是比较麻烦的。今天接触到DOM扩展中的Selector API感觉像是发现了新世界的大门。selector API是由W3C发起指定的

编程爱好者联盟 / 0评论 2016-10-03