Stack Overflow
Stack Overflow

Questions tagged [selectors-api]

The Selectors API provides methods that make it quick and easy to retrieve Element nodes from the DOM by matching against a set of selectors.

Description

The Selectors API provides methods that make it quick and easy to retrieve Element nodes from the DOM by matching against a set of selectors.

This interface has the following two methods:

querySelector - Returns the first matching Element node within the node's subtree. If no matching node is found, null is returned.

querySelectorAll - Returns a NodeList containing all matching Element nodes within the node's subtree, or an empty NodeList if no matches are found.

Note: The NodeList returned by querySelectorAll() is not live. 
This is different from other DOM querying methods that return live node lists.

Specifications

  1. Selectors API - W3C Specification
  2. Locating DOM Elements using Selectors - MDN Link
443 questions
276
votes
8 answers

How to do a wildcard element name match with "querySelector()" or "querySelectorAll()" in JavaScript?

Is there a way to do a wildcard element name match using querySelector or querySelectorAll? The XML document I'm trying to parse is basically a flat list of properties I need to find elements that have certain strings in their names. I see support…
Erik Andersson
  • 2,761
  • 2
  • 14
  • 3
236
votes
14 answers

Javascript .querySelector find

How can I find DIV with certain text? For example:
SomeText, text continues.
Trying to use something like this: var text = document.querySelector('div[SomeText*]').innerTEXT; alert(text); But ofcourse it will not work. How can I do…
passwd
  • 2,883
  • 3
  • 12
  • 22
212
votes
6 answers

"querySelectorAll()" with multiple conditions in JavaScript

Is it possible to make a search by querySelectorAll() using multiple unrelated conditions? If yes, how? And, how to specify whether those are AND or OR criteria? For example: How to find all forms, ps and legends with a single querySelectorAll()…
Alan Coromano
  • 24,958
  • 53
  • 135
  • 205
200
votes
3 answers

How to use querySelectorAll only for elements that have a specific attribute set?

I'm trying to use document.querySelectorAll for all checkboxes that have the value attribute set. There are other checkboxes on the page that do not have value set, and the value is different for each checkbox. The ids and names are not unique…
Soryn
  • 2,005
  • 2
  • 13
  • 5
150
votes
9 answers

Using querySelector with IDs that are numbers

From what I understand the HTML5 spec lets you use IDs that are numbers like this.
I can access these fine using getElementById but not with querySelector. If I try do the following I get SyntaxError: DOM…
Berry Blue
  • 15,330
  • 18
  • 62
  • 113
135
votes
10 answers

querySelector search immediate children

I have some jquery-like function: function(elem) { return $('> someselector', elem); }; The question is how can i do the same with querySelector()? The problem is > selector in querySelector() requires parent to be explicitly specified. Is…
disfated
  • 10,633
  • 12
  • 39
  • 50
105
votes
8 answers

Changing CSS pseudo-element styles via JavaScript

Is it possible to change a CSS pseudo-element style via JavaScript? For example, I want to dynamically set the color of the scrollbar like so: document.querySelector("#editor::-webkit-scrollbar-thumb:vertical").style.background =…
木川 炎星
  • 3,893
  • 13
  • 42
  • 51
98
votes
6 answers

Why does JS code "var a = document.querySelector('a[data-a=1]');" cause error?

I've an element in the DOM: Link I want to get this element via its HTML5 custom data attribute data-a. So I write JS codes: var a = document.querySelector('a[data-a=1]'); But this code doesn't work and I get an error in…
weilou
  • 4,419
  • 10
  • 43
  • 56
89
votes
4 answers

How to remove elements that were fetched using querySelectorAll?

This seems like something that would have a quick answer, but I can't find one. Maybe I'm searching the wrong terms? No libraries please, though I don't need cross-browser fallbacks, I'm targeting all the latest versions on this project. I'm…
Randy Hall
  • 7,716
  • 16
  • 73
  • 151
79
votes
1 answer

Using querySelectorAll(). Is the result returned by the method ordered?

I'm trying to make a js code that works with multiple pages. I'm trying to use querySelectorAll() to obtain the elements form the DOM. I need the elements to be ordered. In order to do that I may use xPath or selectors (I'd prefer to use selectors…
brunoais
  • 6,258
  • 8
  • 39
  • 59
73
votes
4 answers

How to use a regular expression in querySelectorAll?

On a page I'm doing I will be ending up with custom link elements like this: ... I'm trying to use querySelectorAll to…
frequent
  • 27,643
  • 59
  • 181
  • 333
55
votes
2 answers

How to get the second match with QuerySelector?

The following statement gives me the first element with the class titanic element = document.querySelector('.titanic'); How would I retrieve the second element with the same class?
Nicky Smits
  • 2,980
  • 4
  • 20
  • 27
33
votes
3 answers

Getting selected options with querySelectorAll

I wonder if it's possible in Javascript to get the currently selected options in a