querySelector $() getElementBy区别

参考

http://stackoverflow.com/questions/14377590/queryselector-and-queryselectorall-vs-getelementsbyclassname-and-getelementbyid

区别

• querySelector是一个纯粹的CSS选择器 $()则是jQuery选择器 支持更多更高级的用法 比如:checked
• 另外CSS里面是 :first-child :nth-child(1) 而加Q里面则可以是 :first :last
• querySelector 不是实时更新的 但是 getElement $() 都是实时更新

实时更新

Note: The NodeList returned by querySelectorAll() is not live. This is different from other DOM querying methods that return live node lists.
or
http://www.cnblogs.com/wayou/p/html5_web_api_queryselector.html

    //首先选取页面中id为container的元素
    container=document.getElementById('#container');
    console.log(container.childNodes.length)//结果为2
    //然后通过代码为其添加一个子元素
    container.appendChild(document.createElement('div'));
    //这个元素不但添加到页面了，这里的变量container也自动更新了
    console.log(container.childNodes.length)//结果为3

但是使用 querySelector 就不是了 即使改动后 container内的元素还是和改动前选择的一样