querySelector and querySelectorAll vs getElementsByClassName and getElementById in JavaScript
<p>I would like to know what exactly is the difference between <code>querySelector</code> and <code>querySelectorAll</code> against  <code>getElementsByClassName</code> and <code>getElementById</code>?</p>

<p>From <a href="https://developer.mozilla.org/en-US/docs/DOM/Document.querySelector" rel="nofollow">this link</a> I could gather that with <code>querySelector</code> I can write <code>document.querySelector(".myclass")</code> to get elements with class <code>myclass</code> and <code>document.querySelector("#myid")</code> to get element with ID <code>myid</code>. But I can already do that <code>getElementsByClassName</code> and <code>getElementById</code>. Which one should be preferred?</p>

<p>Also I work in <a href="http://stackoverflow.com/tags/xpages/info">XPages</a> where the ID is dynamically generated with colon and looks like this <code>view:_id1:inputText1</code>. So when I write <code>document.querySelector("#view:_id1:inputText1")</code> it doesn't work. But writing <code>document.getElementById("view:_id1:inputText1")</code> works. Any ideas why?</p>
