1、JS-DOM：获取页面元素方法

first need to know: 

①、因为我们的文档是从上往下加载的，所以先得有标签，因此我们的script要写到标签的下面。

 

1、工具ID获取：document.getElementById('btn')

①、返回的是一个元素对象，后面我们有很多方法来操作这个对象。

②、console.dir 这个方法打印我们返回的元素对象，可以更好地查看里面的属性和方法。

 

 

2、通过标签名获取元素：var lis = document.getElementsByTagName('li') ：获取页面所有的li

①、返回的是获取过来元素对象的集合，以伪数组的形式存储。

②、如何要特定的那个: console.log(lis[0]);

③、如果要依次打印里面的元素对象我们可以采取遍历的方法：

for (var i = 0; i < lis.length; i++) {

　　log(lis[i]);

}

④、如果页面只有一个li，返回的还是伪数组形式。如果页面没有这个元素，返回的是空的伪数组形式。

⑤、如果要找特定某个 父元素里面的子元素，父元素必须指定单个元素，最好给父元素添加ID，使用byid方法来获取。

var ol = document.getElementById('first-ol');

log(ol.getElementsByTagName('li'));

父元素必须指定单个元素的意思是：父元素是必须精确的那个，加了ID就可以精确到是哪一个ol，因为页面可能有多个ol

 

 

3、通过HTML5新增方法获取：

        document.getElementsByTagName('li');

        // 1、HTML5新增的类选择器：可以选出所有的 box类元素

        document.getElementsByClassName('box');

        // 2、HTML5新增的：可以选出任意的元素，但是只能返回选择器的第一个元素，比如第一个Li，里面的选择器要加符号 .box #nav

        document.querySelector('.box');

        document.querySelector('#nav');

        // 3、HTML5新增：返回指定选择器所有元素对象集合

        document.querySelectorAll('.box');

        document.querySelectorAll('li');

 

 

4、特殊元素获取：（body HTML）：

①、body：document.body

②、HTML：document.documentElement