document  指的是文档

下面列举一下查看元素节点的方法：

doucment.getElementById()　　获取指定id的对象

document.getElementsByTagName()　　获取一组指定标签名的集合，这个集合看似是数组，实则为类数组

document.getElementsByClassName()　　获取一组指定类名的集合

document.getElementsByName()　　获取一组指定name的集合

document.querySelector()　　　　获取指定的对象，在括号内写的方式就和咱们css一样，可以很容易选择，如div>p>span.a

document,querySelectorAll()　　　　获取一组指定的对象，就像getElementsByClassName()，getElementsByTagName()获取的一样，它们最终得到都是一组

关于最后两种querySelector和querySelectorAll，大家可能不常见，是因为这两种获取方法在IE6，IE7是没有的；这一点并不是最致命的，最致命的在于它们的操作不是实时的，选中的仅仅是一个副本罢了。下面举例说明一下

在这样一个html结构中

如果你已经对实时操作理解了，那么可以跳过下面的举例

1.先用getElementsByTagName举例说明

// 获取所有的div对象
var div = document.getElementsByTagName("div");
// 创建一个新的div
var newDiv = document.createElement("div");
// 将新创建的div添加至document文档
document.body.appendChild(newDiv);
// 下面我们查看一下当前div这个对象
console.log(div);
// 控制台结果是这样的HTMLCollection(4) [div, div.demo, div, div]
 大家请注意下，我是先选择的而后再给document添加的div元素，但是之前选择的div对象还是会获取到后创建的div元素

2.而当用querySelectotAll获取对象举例

// 获取div标签组对象
        var div = document.querySelectorAll("div");
        // 创建一个新的div
        var newDiv = document.createElement("div");
        // 将新创建的div添加至document文档
        document.body.appendChild(newDiv);
        // 此时在控制台输出我们选中div这个对象
        console.log(div);
        // 控制台结果是这样的NodeList [ div, div.demo, div ]
        可以清楚的看到，对于使用querySelectorAll选中的对象，并没有选中后面appendChild操作添加的元素，这就是不能够实时操作，因此，我们很少使用querySelector，querySelectorAll这两种选择器。