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

test Browser support or not , without try-catch

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

or

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

thanx : http://htmlgoodies.com/beyond/javascript/using-javascripts-css3-selectors.html

Answer 3

Use typeof to check it:

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