选择器那些事之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];

注意：

规范规定里面的参数---选择器是针对当前文档

扩展阅读：

1、http://www.w3.org/TR/selectors-api/

2、http://www.w3help.org/zh-cn/casestudies/003

queryselector css选择器

葉無聞

0 关注 0 粉丝 0 动态

关注关注

5.11 dom的选择器

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

liaoxuewu 2020-05-11

ES6 promise的应用

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

前端开发Kingcean 2020-07-08

表单事件

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

nercon 2019-12-28

dom与jq基础使用

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

SIMONDOMAIN 2019-12-13

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

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

哈喽elements 2019-11-19

浏览器--操作DOM

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

liaoxuewu 2019-11-03

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

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

切慕溪水 2019-11-03

JavaScript练习-情话生成器

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

xiaoge00 2019-10-26

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

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

duxd 2019-05-10

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

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

bistukey 2019-07-01

fe5-2：js语言、dom编程

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

JackXue程序生涯 2019-07-01

回到基础：理解 JavaScript DOM

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

JackXue程序生涯 2019-07-01

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

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

adeyi 2019-07-01

放弃jQuery, 使用原生js

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

sunnylin 2019-06-30

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

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

LingPF 2019-06-28

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

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

jianqi 2019-06-28

DOM事件流

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

莲开十月人思量 2019-06-28

DOM扩展

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

云海梦尘 2014-02-24

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

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

Danielmumu 2013-11-04

前端代码集

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

racy 2019-06-25

安科网