Check if the browser supports document.querySelectorAll in JavaScript

Question

Now although most modern browser support document.querySelectorAll(), you may run into problems with older versions of Internet Explorer. The obvious way of checking if the browser supports a function would be:

if(document.querySelectorAll){
    //some random code
}

But from what I understand some browsers like (IE8) don't support certain properties, like 'body *'. Is there a better way to check if document.querySelectorAll('body *') will actually work?

Answer 1

document.querySelectorAll will thrown on any unsupported selector so you can simply use a try-catch block.

Answer 2

Check browser supports or not , without try-catch :

function QuerySelectors() {
  return (document['querySelector']&&document['querySelectorAll'])!=null;
}

or

function QuerySelectors(){
  return typeof(document['querySelector'])=='function'&&typeof(document['querySelectorAll'])=='function';
}

Read more > Reference

Answer 3

Use typeof to check it:

 if(typeof(document.querySelectorAll) != 'undefined'){
      //some random code
 }