每个网页都是一个dom树，网页中所有的内容都是这个树上的一个节点。JavaScript的工作就是操作这些节点，对节点进行查增删改操作，或是给节点绑定事件。
以getElementBy开头的方法，可以根据具体的属性获取元素的后代节点。这些方法不只会获取子节点，他也会获取到所有符合条件的后代节点。
方法 | 依据属性 | 兼容性 | 其他 |
getElementById | id | 兼容性好，推荐使用 | 如果存在多个id相同的元素，只会返回第一个 |
getElementsByTagName | 标签名 | 不兼容ie8及以下版本 | 返回所有符合条件的元素的集合 |
getElementsByName | name | 不兼容ie8及以下版本 | 返回所有符合条件的元素的集合 |
getElementsByClassName | class | 不兼容ie8及以下版本 | 返回所有符合条件的元素的集合 |
二、child属性
每个dom元素都是一个对象，在dom元素对象中有四个专门用于获取子元素的属性：
属性名 | 作用 | 其他 |
childNodes | 获取所有子节点 | 不推荐使用，如果有空格，会作为文本节点获取到 |
child | 获取所有子节点 | 推荐使用 |
firstChild | 获取首个子节点 | 推荐使用 |
lastChild | 获取最后一个子节点 | 推荐使用 |
这四个属性都不存在兼容性问题，除了childNodes之外都是比较好用的。
要解决这个问题有两个方法：
方法一：去掉所有的回车空格等特殊字符，但是会影响程序的可读性和代码的规范。
方法二：动态过滤掉空白字符：
通过for循环遍历对象中的所有元素，删除纯文本元素。
完整的代码就是这样：
var a = document.getElementById("test"); var b = a.childNodes; for(i=0;i<b.length;i++){ if(b[i].nodeName == "#text"&& !/\s/.test(b.nodeValue)){ a.removeChild(b[i]); } }
第二种方法每次查询之前，都要先执行一段过滤代码。这样会影响程序的执行效率，因此childNodes属性不建议使用。
三、querySelector方法，强烈推荐！
querySelector的参数是css选择器，任何选择器都可以作为它的参数，这样就使得它非常方便灵活：
比如获取class=‘test’的标签下的第一个子元素，可以这样写querySelector('.test > * ')，也可以指定子元素的类型querySelector('.test > span ')，或者是：classquerySelector('.test > #f_div')
还可以使用querySelectorAll方法，这样会获取所有满足条件的元素，而不只是获取第一个元素。
querySelectorAll获取的结果是一个静态的集合，getElementBy获取到的元素结果是一个动态集合，会将页面中后续添加的记录添加进去
