DOM扩展之querySelector()和querySelectorAll()

在原生的Javascript开发中，查找DOM往往是开发人员的第一个头疼的问题，原生的Javascript所提供的DOM选择方法并不多，仅仅局限于通过tag、name、id等方式来查找，这显然是远远不够的。如果要进行更为精确的选择不得不使用看起来非常繁琐的正则表达式，或者使用某个库。HTML5向Web API 新引入的querySelector()和querySelectorAll()这两个方法能更方便的从DOM选取元素，功能类似于jQuery的选择器。querySelector()和querySelectorAll()作为查找DOM的又一途径，极大的方便了开发者，使用他们，就可以像使用CSS选择器一样快速的查找到需要的节点。

两个方法使用差不多的语法，都是接受一个字符串参数，该参数需要是合法的CSS选择语法。querySelector()方法仅仅返回匹配指定选择器的第一个元素，如果需要返回所有的元素，使用querySelectorAll()方法替代。

其中参数selector可以包含多个CSS选择器，用逗号隔开。

element=document.querySelector('selector1,selector2,.....');

element=document.querySelectorAll('selector1,selector2,.....');

注意：支持该方法的第一个浏览器的版本号，如IE8.chrome4、Firefox3.5、Opera10以及Safari3.1。使用这两个方法无法查找带伪类状态的元素，如querySelector(':hover')不会得到预期结果。

document.querySelector("#demo");          //获取文档中ID="demo"的元素。