Why document.querySelector fails to find class name in Javascript

Question

Just getting started with document.querySelector in JavaScript. Why would let result = document.querySelector('Lh') return a null. I have tried many permutations with a div as part of the search string but there must be something different about it in a div? Wildcard suggestions...

let result1 = document.querySelector('[class^="Lh(21px)"]')
let result2 = document.querySelector('[class^=".Lh(21px)"]')
let result3 = document.querySelector('[class^="Lh"]')
let result4 = document.querySelector('[class^=".Lh"]')

All return nulls.

<div class="" data-test="quote-mdl" data-yaft-module="tdv2-applet-summary">
    <div class="Mb(25px) smartphone_Px(20px)">
        <h3 class="Mb(5px)"><span>Summary</span></h3>
        <div class="Lh(21px)">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Sed et magna magna. Praesent in condimentum quam. Phasellus dui ligula,
            tincidunt porta fermentum nec. rhoncus id enim. Duis tempor, tellus at
            fermentum consectetur, nisl ipsum placerat metus, sed aliquam turpis enim eget erat.
        </div>
    </div>
</div>

I’m not sure the class names you’ve used in your HTML here are syntactically valid - [further SO reading](https://stackoverflow.com/questions/448981/which-characters-are-valid-in-css-class-names-selectors) — esqew, Jan 24 '21 at 20:17

TheEagle · Accepted Answer · 2021-01-25T02:08:44.867

2

<div class="Lh(21px)">Lorem ipsum dolor ...

The name of your class is Lh(21px) and not Lh, if you want to match any class name that begins with Lh, use the solution provided in this answer:

let result1 = document.querySelector('[class^="Lh"]');
console.log(result1)

<div class="" data-test="quote-mdl" data-yaft-module="tdv2-applet-summary">
    <div class="Mb(25px) smartphone_Px(20px)">
        <h3 class="Mb(5px)"><span>Summary</span></h3>
        <div class="Lh(21px)">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Sed et magna magna. Praesent in condimentum quam. Phasellus dui ligula,
            tincidunt porta fermentum nec. rhoncus id enim. Duis tempor, tellus at
            fermentum consectetur, nisl ipsum placerat metus, sed aliquam turpis enim eget erat.
        </div>
    </div>
</div>

edited Jan 25 '21 at 02:08

answered Jan 24 '21 at 20:15

TheEagle

5,808
3
11
39

Both these fail with null returns. let result = document.querySelector('[class^="Lh(21px)"]') let result1 = document.querySelector('[class^=".Lh(21px)"]') – SuperDave Jan 24 '21 at 22:37
@SuperDave do it like this : `let result1 = document.querySelector('[class^="Lh"]')` – TheEagle Jan 24 '21 at 22:39
Copy and pasted and it still returns null. – SuperDave Jan 24 '21 at 23:07
@SuperDave i made a StackSnippet with my solution and it works (as you can try !) – TheEagle Jan 25 '21 at 02:09
Thanks, I need then to find another way to debug than using Visual Code and the Chrome browser since this still fails in the console. – SuperDave Jan 25 '21 at 11:31

Roberto · Answer 2 · 2021-01-25T19:57:00.877

0

According to MDN:

The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.

Lh is not a valid selector, because is not a tag but a classname. So you should change your code to this:


const divElement = document.querySelector(".Lh\\(21px\\)")

[EDIT]: Add the backslash if you are using the parenthesis

edited Jan 25 '21 at 19:57

answered Jan 24 '21 at 21:09

Roberto

253
1
9

1

.Lh(21px)' is not a valid selector. – SuperDave Jan 24 '21 at 22:05
1

Sorry, my fault. You need to add the backslash if you are using the parenthesis – Roberto Jan 25 '21 at 19:55

Why document.querySelector fails to find class name in Javascript

2 Answers2