关于HTML5有关DOM操作的学习

最近学习了 HTML5中有关 DOM操作的部分，在这里做些记录。

在传统的 JS开发中，查找 DOM 往往是开发人员遇到的第一个头疼的问题，原生的 JS所提供的 DOM 选择方法并不多，仅仅局限于通过 tag, name, id 等方式来查找，这显然是远远不够的，如果想要进行更为精确的选择不得不使用看起来非常繁琐的正则表达式，或者使用某个库jQuery。

新DOM获取API出现：
现在所有的浏览器厂商都提供了 querySelector 和 querySelectorAll 这两个方法的支持，甚至就连微软也派出了 IE 8 作为支持这一特性的代表，querySelector 和 querySelectorAll 作为查找 DOM 的又一途径，极大地方便了开发者，使用它们，你可以像使用 CSS 选择器一样快速地查找到你需要的节点。
优点：
H5新的获取DOM的querySelector 和querySelectorAll 方法可以不需要额外的jQuery等支持，也可以方便的获取DOM元素，语法跟jQuery类似。

获取元素API语法
document.querySelector(“选择器”);
document.querySelectorAll(“选择器”);

querySelector 和 querySelectorAll 的使用非常的简单，它和 CSS 的写法完全一样，对于前端开发人员来说，难度几乎为零。
document.querySelector只能获取单个元素。
如果想获取多个元素，可以利用document.querySelectorAll
区别：
①document.querySelector：该方法仅仅返回匹配指定选择器的第一个元素，即返回单个元素
②document.querySelectorAll：该方法返回所有满足条件的元素，结果是个nodeList集合

H5不仅增加了获取元素API，也增加了操作元素类样式的API，具体如下

对比：
classList 方式与 document.querySelector(“选择器”).className 的方法对比
分析：
classList 的方法添加和删除不会清除原来的 class 类样式，只是在其基础上添加和删除。而 className的方式直接对源类样式操作，容易遗漏和误操作。