Using Queryselector With Ids That Are Numbers

Using querySelector with IDs that are numbers

It is valid, but requires some special handling. From here: http://mathiasbynens.be/notes/css-escapes

Leading digits

If the first character of an identifier is numeric, you’ll need to escape it based on its Unicode code point. For example, the code point for the character 1 is U+0031, so you would escape it as \000031 or \31 .

Basically, to escape any numeric character, just prefix it with \3 and append a space character ( ). Yay Unicode!

So your code would end up as (CSS first, JS second):

#\31  {
    background: hotpink;
}

document.getElementById('1');
document.querySelector('#\\31 ');

How to fix an ID which isn't accepted as a query selector?

IDs beginning with a number are indeed valid in HTML 5, but #57acafcbdb4bc607922b834f is not a valid CSS selector, and document.querySelector() uses CSS selectors.

You can use attribute selector instead:

document.querySelector('[id="57acafcbdb4bc607922b834f"]')

Or you can use document.getElementById():

document.getElementById('57acafcbdb4bc607922b834f')

See this code snippet:

console.log(document.querySelector('[id="57acafcbdb4bc607922b834f"]'))console.log(document.getElementById('57acafcbdb4bc607922b834f'))

<div id="57acafcbdb4bc607922b834f"></div>

querySelector of item by a pattern of id

Since it's not possible to use RegEx within attribute selectors, the only way is to filter your querySelectorAll result; and there.. you can use a regex to match only numbers after feed_item_

It will be something like this

let items = [...document.querySelectorAll('[id^="feed_item_"]')].filter(
  (item) => item.id.match(/\d+$/)
);

many digits in querySelector

You can use ^= and querySelectorAll to get a NodeList of all the anchors you want, and then click() them using a forEach loop.

setTimeout(function() {
    document.querySelectorAll('[id^="village"] td:nth-child(11) a').forEach(a => a.click());
}, (Math.random() * 1000) + 1000);

A better approach would be to give them a common class so you don't have to use the IDs.

Error while query selector on numeric value

You might use " for the value of your selector : [key="value"]

document.querySelector('button').addEventListener('click',function(){
  document.querySelector('input[name="manufacturer"][value="apple"]').checked = true;
  document.querySelector('input[name="storage"][value="16"]').checked = true;
})

Find elements using part of ID

you can use querySelectorAll to hit partial attribs, including ID:

document.querySelectorAll("[id^='this_div_id']")

the ^ next to the equal sign indicates "starts with", you can use * instead, but it's prone to false-positives.

you also want to make sure to use quotes (or apos) around the comapare value in attrib selectors for maximum compatibility on querySelectorAll; in jQuery and evergreen browsers it doesn't matter, but in vanilla for old browsers it does matter.

EDIT: late breaking requirement needs a more specific selector:

document.querySelectorAll("[id^='this_div_id']:not([id$='_test_field'])");

the not() segment prevents anything ending with "_test_field" from matching.

proof of concept / demo: http://pagedemos.com/partialmatch/

Using Queryselector With Ids That Are Numbers