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
383 questions
178
votes
5 answers

querySelector, wildcard element match?

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
  • 1,781
  • 2
  • 11
  • 3
139
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
  • 1,395
  • 2
  • 9
  • 5
136
votes
13 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
  • 1,693
  • 2
  • 10
  • 19
107
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
  • 9,597
  • 12
  • 32
  • 47
107
votes
5 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
  • 13,060
  • 16
  • 51
  • 91
78
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
  • 3,869
  • 8
  • 37
  • 56
75
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,433
  • 9
  • 35
  • 49
63
votes
3 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
  • 6,322
  • 12
  • 57
  • 115
54
votes
2 answers

Can I 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
  • 24,965
  • 53
  • 166
  • 316
50
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
  • 4,743
  • 7
  • 33
  • 55
34
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,406
  • 3
  • 17
  • 23
29
votes
2 answers

IE8 does not support querySelectorAll

I tried to use document.querySelectorAll(), but IE8 throw error, that Object doesn't support this property or method var titleCheckBox = document.querySelectorAll(""); Here http://www.quirksmode.org/dom/w3c_core.html#t13 written, that IE8…
Roman Makhlin
  • 943
  • 1
  • 10
  • 26
28
votes
2 answers

Getting selected options with querySelectorAll

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