document.querySelector get class name containing parentheses

Question

I am writing software that has to work with the dom of a third-party web-app that I don't control. Some of the class names have parameter, eg class="view_box(200px)". I'm guessing these class names are Sass/Less mixins/arguments?

document.querySelector doesn't seem to like .view_box(200px) as a valid class selector, and simply querying .view_box doesn't return any of the elements that have the full string with argument as their class.

I tried escaping the parens as \( and \). I even tried URL encoding them as %28 and %29. I get the error Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '.view_box(200px)' is not a valid selector.

Answer 1

You need to pass a literal backslash into the argument:

document.querySelector(".view_box\\(200px\\)")