1、获取页面元素

(1)通过id获得元素 getElementById（）
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer); //返回的是一个元素对象object
console.dir(timer); //console.dir打印我们返回的元素对象,更好的查看里面的属性和方法

(2)通过标签名获取   getElementsByTagName（）
/* 返回带有指定标签名的对象的集合。 
   返回的是获取过来元素对象的集合,以伪数组的形式存储的，可以通过遍历获取里面的元素
   如果页面中只有一个li返回的还是伪数组的形式
   如果页面中没有这个元素返回的是空的伪数组的形式 */
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
// element.getElementsByTagName('标签名')

/* 获取某个元素(父元素)内部所有指定标签名的子元素; 
元素必须是单个对象(必须指明是哪一个元素对象)，获取的时候不包括父元索自己。 */
var ol = document.getElementById('top');
console.log(ol.getElementsByTagName('li'));

（3）h5新增
// getElementsByClassName 返回指定类名的所有元素对象集合
var boxs = document.getElementsByClassName('box');
console.log(boxs);

// querySelector 返回指定选择器的第一个元素对象,切记:里面的选择器需要加符号
var firstBox = document.querySelector('.box');
console.log(firstBox);
var nav = document.querySelector('#time');
console.log(nav);
var li = document.querySelector('li');
console.log(li);

// querySelectorAll( )返回指定选择器的所有元素对象集合
var allBox = document.querySelectorAll('.box');
console.log(allBox);
var lis = document.querySelectorAll('li');
console.log(lis);

(4)获取body、html元素
var bodyEle = document.body;
console.log(bodyEle); // 获取body元素
console.dir(bodyEle);
var htmlEle = document.documentElement; // 获取html元素
console.log(htmlEle);